Better resolver, communities mostly done.

src/server/index.tsx

@@ -10,7 +10,7 @@ import { IsoData } from '../shared/interfaces';
 import { routes } from '../shared/routes';
 import IsomorphicCookie from 'isomorphic-cookie';
 import { lemmyHttp, setAuth } from '../shared/utils';
-import { GetSiteForm } from 'lemmy-js-client';
+import { GetSiteForm, GetSiteResponse } from 'lemmy-js-client';
 const server = express();
 const port = 1234;
 
@@ -38,15 +38,23 @@ server.get('/*', async (req, res) => {
   }
 
   let resolver = await Promise.all(promises);
+  let site: GetSiteResponse = resolver[0];
+  let routeData = resolver.slice(1, resolver.length);
+
+  let acceptLang = req.headers['accept-language'].split(',')[0];
+  let lang = !!site.my_user
+    ? site.my_user.lang == 'browser'
+      ? acceptLang
+      : 'en'
+    : acceptLang;
 
   let isoData: IsoData = {
     path: req.path,
-    site: resolver[0],
+    site,
-    routeData: resolver.slice(1, resolver.length),
+    routeData,
+    lang,
   };
 
-  console.log(activeRoute.path);
-
   const wrapper = (
     <StaticRouter location={req.url} context={isoData}>
       <App site={isoData.site} />

src/shared/components/app.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'inferno';
 import { Route, Switch } from 'inferno-router';
-/* import { Provider } from 'inferno-i18next'; */
+import { Provider } from 'inferno-i18next';
-/* import { i18n } from './i18next'; */
+import { i18n } from '../i18next';
 import { routes } from '../../shared/routes';
 import { Navbar } from '../../shared/components/navbar';
 import { Footer } from '../../shared/components/footer';
@@ -18,10 +18,10 @@ export class App extends Component<AppProps, any> {
     super(props, context);
   }
 
-  /* <Provider i18next={i18n}> */
   render() {
     return (
       <>
+        <Provider i18next={i18n}>
           <div>
             <Navbar site={this.props.site} />
             <div class="mt-4 p-0 fl-1">
@@ -40,6 +40,7 @@ export class App extends Component<AppProps, any> {
             </div>
             <Footer />
           </div>
+        </Provider>
       </>
     );
   }

src/shared/components/communities.tsx

@@ -1,7 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
 import {
   UserOperation,
   Community,
@@ -11,7 +10,6 @@ import {
   ListCommunitiesForm,
   SortType,
   WebSocketJsonResponse,
-  GetSiteResponse,
   Site,
 } from 'lemmy-js-client';
 import { WebSocketService } from '../services';
@@ -22,10 +20,11 @@ import {
   isBrowser,
   lemmyHttp,
   setAuth,
+  setIsoData,
+  wsSubscribe,
 } from '../utils';
 import { CommunityLink } from './community-link';
 import { i18n } from '../i18next';
-import { IsoData } from 'shared/interfaces';
 
 const communityLimit = 100;
 
@@ -42,36 +41,24 @@ interface CommunitiesProps {
 
 export class Communities extends Component<any, CommunitiesState> {
   private subscription: Subscription;
+  private isoData = setIsoData(this.context);
   private emptyState: CommunitiesState = {
     communities: [],
     loading: true,
     page: getPageFromProps(this.props),
-    site: undefined,
+    site: this.isoData.site.site,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
     this.state = this.emptyState;
-    let isoData: IsoData;
+    this.parseMessage = this.parseMessage.bind(this);
 
-    if (isBrowser()) {
+    this.subscription = wsSubscribe(this.parseMessage);
-      this.subscription = WebSocketService.Instance.subject
-        .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        .subscribe(
-          msg => this.parseMessage(msg),
-          err => console.error(err),
-          () => console.log('complete')
-        );
-      isoData = window.isoData;
-    } else {
-      isoData = this.context.router.staticContext;
-    }
-
-    this.state.site = isoData.site.site;
 
     // Only fetch the data if coming from another route
-    if (isoData.path == this.context.router.route.match.path) {
+    if (this.isoData.path == this.context.router.route.match.url) {
-      this.state.communities = isoData.routeData[0].communities;
+      this.state.communities = this.isoData.routeData[0].communities;
       this.state.loading = false;
     } else {
       this.refetch();
@@ -98,11 +85,7 @@ export class Communities extends Component<any, CommunitiesState> {
   }
 
   get documentTitle(): string {
-    if (this.state.site) {
     return `${i18n.t('communities')} - ${this.state.site.name}`;
-    } else {
-      return 'Lemmy';
-    }
   }
 
   render() {
@@ -250,7 +233,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   static fetchInitialData(auth: string, path: string): Promise<any>[] {
     let pathSplit = path.split('/');
-    let page = pathSplit[2] ? Number(pathSplit[2]) : 1;
+    let page = pathSplit[3] ? Number(pathSplit[3]) : 1;
     let listCommunitiesForm: ListCommunitiesForm = {
       sort: SortType.TopAll,
       limit: communityLimit,
@@ -282,10 +265,6 @@ export class Communities extends Component<any, CommunitiesState> {
       found.subscribed = data.community.subscribed;
       found.number_of_subscribers = data.community.number_of_subscribers;
       this.setState(this.state);
-    } else if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-      this.state.site = data.site;
-      this.setState(this.state);
     }
   }
 }

src/shared/components/navbar.tsx

@@ -46,7 +46,6 @@ interface NavbarState {
   unreadCount: number;
   searchParam: string;
   toggleSearch: boolean;
-  siteRes: GetSiteResponse;
   onSiteBanner?(url: string): any;
 }
 
@@ -62,7 +61,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     mentions: [],
     messages: [],
     expanded: false,
-    siteRes: this.props.site, // TODO this could probably go away
     searchParam: '',
     toggleSearch: false,
   };
@@ -80,14 +78,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           () => console.log('complete')
         );
 
-      // WebSocketService.Instance.getSite();
-
       this.searchTextField = createRef();
     }
 
     // The login
+    // TODO this needs some work
     if (this.props.site.my_user) {
+      console.log(this.props.site.my_user);
       UserService.Instance.user = this.props.site.my_user;
+      // i18n.changeLanguage(getLanguage());
 
       if (isBrowser()) {
         WebSocketService.Instance.userJoin();
@@ -97,6 +96,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           this.fetchUnreads();
           // setTheme(data.my_user.theme, true);
           // i18n.changeLanguage(getLanguage());
+          // i18n.changeLanguage('de');
         }
       }
     }
@@ -113,7 +113,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           this.state.isLoggedIn = false;
         }
         console.log('a new login');
-        WebSocketService.Instance.getSite();
+        // WebSocketService.Instance.getSite();
         this.setState(this.state);
       });
 
@@ -184,19 +184,19 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
       <nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
         <div class="container">
           <Link
-            title={this.state.siteRes.version}
+            title={this.props.site.version}
             className="d-flex align-items-center navbar-brand mr-md-3"
             to="/"
           >
-            {this.state.siteRes.site.icon && showAvatars() && (
+            {this.props.site.site.icon && showAvatars() && (
               <img
-                src={pictrsAvatarThumbnail(this.state.siteRes.site.icon)}
+                src={pictrsAvatarThumbnail(this.props.site.site.icon)}
                 height="32"
                 width="32"
                 class="rounded-circle mr-2"
               />
             )}
-            {this.state.siteRes.site.name}
+            {this.props.site.site.name}
           </Link>
           {this.state.isLoggedIn && (
             <Link
@@ -441,29 +441,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
         }
       }
     }
-
-    // TODO all this needs to be moved
-    else if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-
-      this.state.siteRes = data;
-
-      // The login
-      if (data.my_user) {
-        UserService.Instance.user = data.my_user;
-        WebSocketService.Instance.userJoin();
-        // On the first load, check the unreads
-        if (this.state.isLoggedIn == false) {
-          this.requestNotificationPermission();
-          this.fetchUnreads();
-          setTheme(data.my_user.theme, true);
-          i18n.changeLanguage(getLanguage());
-        }
-        this.state.isLoggedIn = true;
-      }
-
-      this.setState(this.state);
-    }
   }
 
   fetchUnreads() {
@@ -514,7 +491,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
   get canAdmin(): boolean {
     return (
       UserService.Instance.user &&
-      this.state.siteRes.admins
+      this.props.site.admins
         .map(a => a.id)
         .includes(UserService.Instance.user.id)
     );

src/shared/components/sponsors.tsx

@@ -93,11 +93,9 @@ export class Sponsors extends Component<any, SponsorsState> {
       <div>
         <h5>{i18n.t('donate_to_lemmy')}</h5>
         <p>
-          {/* TODO 
           <T i18nKey="sponsor_message">
             #<a href={repoUrl}>#</a>
           </T>
-          */}
         </p>
         <a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
           {i18n.t('support_on_liberapay')}

src/shared/interfaces.ts

@@ -4,6 +4,8 @@ export interface IsoData {
   path: string;
   routeData: any[];
   site: GetSiteResponse;
+  // Lang and theme
+  lang: string;
   // communities?: ListCommunitiesResponse;
 }
 

src/shared/utils.ts

@@ -47,7 +47,7 @@ import {
 
 import { httpUri } from './env';
 
-import { CommentSortType, DataType } from './interfaces';
+import { CommentSortType, DataType, IsoData } from './interfaces';
 import { UserService, WebSocketService } from './services';
 
 // import Tribute from 'tributejs';
@@ -60,6 +60,8 @@ import emojiShortName from 'emoji-short-name';
 import Toastify from 'toastify-js';
 import tippy from 'tippy.js';
 import moment from 'moment';
+import { Subscription } from 'rxjs';
+import { retryWhen, delay, take } from 'rxjs/operators';
 
 export const favIconUrl = '/static/assets/favicon.svg';
 export const favIconPngUrl = '/static/assets/apple-touch-icon.png';
@@ -828,9 +830,7 @@ export function getSortTypeFromProps(props: any): SortType {
 }
 
 export function getPageFromProps(props: any): number {
-  // TODO
+  return props.match.params.page ? Number(props.match.params.page) : 1;
-  return 1;
-  // return props.match.params.page ? Number(props.match.params.page) : 1;
 }
 
 export function editCommentRes(data: CommentResponse, comments: Comment[]) {
@@ -1112,3 +1112,25 @@ export function setAuth(obj: any, auth: string) {
     obj.auth = auth;
   }
 }
+
+export function setIsoData(context: any): IsoData {
+  if (isBrowser()) {
+    return window.isoData;
+  } else {
+    return context.router.staticContext;
+  }
+}
+
+export function wsSubscribe(parseMessage: any): Subscription {
+  if (isBrowser()) {
+    return WebSocketService.Instance.subject
+      .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
+      .subscribe(
+        msg => parseMessage(msg),
+        err => console.error(err),
+        () => console.log('complete')
+      );
+  } else {
+    return null;
+  }
+}