Some cleanup.

src/shared/components/app.tsx

@@ -38,7 +38,7 @@ export class App extends Component<AppProps, any> {
               </Switch>
               <Symbols />
             </div>
-            <Footer />
+            <Footer site={this.props.site} />
           </div>
         </Provider>
       </>

src/shared/components/comment-form.tsx

@@ -1,7 +1,6 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
 import {
   CommentNode as CommentNodeI,
   CommentForm as CommentFormI,
@@ -9,7 +8,7 @@ import {
   UserOperation,
   CommentResponse,
 } from 'lemmy-js-client';
-import { capitalizeFirstLetter, wsJsonToRes } from '../utils';
+import { capitalizeFirstLetter, wsJsonToRes, wsSubscribe } from '../utils';
 import { WebSocketService, UserService } from '../services';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -71,13 +70,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
       }
     }
 
-    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')
-      );
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
   }
 
   componentWillUnmount() {

src/shared/components/community-form.tsx

@@ -1,7 +1,6 @@
 import { Component, linkEvent } from 'inferno';
 import { Prompt } from 'inferno-router';
 import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
 import {
   CommunityForm as CommunityFormI,
   UserOperation,
@@ -11,7 +10,13 @@ import {
   Community,
 } from 'lemmy-js-client';
 import { WebSocketService } from '../services';
-import { wsJsonToRes, capitalizeFirstLetter, toast, randomStr } from '../utils';
+import {
+  wsJsonToRes,
+  capitalizeFirstLetter,
+  toast,
+  randomStr,
+  wsSubscribe,
+} from '../utils';
 import { i18n } from '../i18next';
 
 import { MarkdownTextArea } from './markdown-textarea';
@@ -79,13 +84,8 @@ export class CommunityForm extends Component<
       };
     }
 
-    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')
-      );
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
   }
 
   componentDidUpdate() {

src/shared/components/footer.tsx

@@ -1,43 +1,18 @@
 import { Component } from 'inferno';
 import { Link } from 'inferno-router';
 import { i18n } from '../i18next';
-import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
-import { WebSocketService } from '../services';
-import { repoUrl, wsJsonToRes, isBrowser } from '../utils';
-import {
-  UserOperation,
-  WebSocketJsonResponse,
-  GetSiteResponse,
-} from 'lemmy-js-client';
+import { repoUrl } from '../utils';
+import { GetSiteResponse } from 'lemmy-js-client';
 
-interface FooterState {
-  version: string;
+interface FooterProps {
+  site: GetSiteResponse;
 }
 
-export class Footer extends Component<any, FooterState> {
-  private wsSub: Subscription;
-  emptyState: FooterState = {
-    version: null,
-  };
+interface FooterState {}
+
+export class Footer extends Component<FooterProps, FooterState> {
   constructor(props: any, context: any) {
     super(props, context);
-
-    this.state = this.emptyState;
-
-    if (isBrowser()) {
-      this.wsSub = WebSocketService.Instance.subject
-        .pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
-        .subscribe(
-          msg => this.parseMessage(msg),
-          err => console.error(err),
-          () => console.log('complete')
-        );
-    }
-  }
-
-  componentWillUnmount() {
-    this.wsSub.unsubscribe();
   }
 
   render() {
@@ -46,7 +21,7 @@ export class Footer extends Component<any, FooterState> {
         <div className="navbar-collapse">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
-              <span class="navbar-text">{this.state.version}</span>
+              <span class="navbar-text">{this.props.site.version}</span>
             </li>
             <li className="nav-item">
               <Link className="nav-link" to="/modlog">
@@ -78,12 +53,4 @@ export class Footer extends Component<any, FooterState> {
       </nav>
     );
   }
-  parseMessage(msg: WebSocketJsonResponse) {
-    let res = wsJsonToRes(msg);
-
-    if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-      this.setState({ version: data.version });
-    }
-  }
 }

src/shared/components/login.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 {
   LoginForm,
   RegisterForm,
@@ -14,7 +13,14 @@ import {
   Site,
 } from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
-import { wsJsonToRes, validEmail, toast } from '../utils';
+import {
+  wsJsonToRes,
+  validEmail,
+  toast,
+  wsSubscribe,
+  isBrowser,
+  setIsoData,
+} from '../utils';
 import { i18n } from '../i18next';
 
 interface State {
@@ -28,6 +34,7 @@ interface State {
 }
 
 export class Login extends Component<any, State> {
+  private isoData = setIsoData(this.context);
   private subscription: Subscription;
 
   emptyState: State = {
@@ -48,20 +55,7 @@ export class Login extends Component<any, State> {
     registerLoading: false,
     captcha: undefined,
     captchaPlaying: false,
-    site: {
-      id: undefined,
-      name: undefined,
-      creator_id: undefined,
-      published: undefined,
-      creator_name: undefined,
-      number_of_users: undefined,
-      number_of_posts: undefined,
-      number_of_comments: undefined,
-      number_of_communities: undefined,
-      enable_downvotes: undefined,
-      open_registration: undefined,
-      enable_nsfw: undefined,
-    },
+    site: this.isoData.site.site,
   };
 
   constructor(props: any, context: any) {
@@ -69,21 +63,19 @@ export class Login extends Component<any, State> {
 
     this.state = this.emptyState;
 
-    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')
-      );
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
 
-    WebSocketService.Instance.getSite();
+    if (isBrowser()) {
       WebSocketService.Instance.getCaptcha();
     }
+  }
 
   componentWillUnmount() {
+    if (isBrowser()) {
       this.subscription.unsubscribe();
     }
+  }
 
   get documentTitle(): string {
     if (this.state.site.name) {

src/shared/components/password_change.tsx

@@ -1,17 +1,22 @@
 import { Component, linkEvent } from 'inferno';
 import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
-import { retryWhen, delay, take } from 'rxjs/operators';
 import {
   UserOperation,
   LoginResponse,
   PasswordChangeForm,
   WebSocketJsonResponse,
-  GetSiteResponse,
   Site,
 } from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
-import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
+import {
+  wsJsonToRes,
+  capitalizeFirstLetter,
+  toast,
+  setIsoData,
+  isBrowser,
+  wsSubscribe,
+} from '../utils';
 import { i18n } from '../i18next';
 
 interface State {
@@ -21,6 +26,7 @@ interface State {
 }
 
 export class PasswordChange extends Component<any, State> {
+  private isoData = setIsoData(this.context);
   private subscription: Subscription;
 
   emptyState: State = {
@@ -30,7 +36,7 @@ export class PasswordChange extends Component<any, State> {
       password_verify: undefined,
     },
     loading: false,
-    site: undefined,
+    site: this.isoData.site.site,
   };
 
   constructor(props: any, context: any) {
@@ -38,26 +44,18 @@ export class PasswordChange extends Component<any, State> {
 
     this.state = this.emptyState;
 
-    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')
-      );
-    WebSocketService.Instance.getSite();
+    this.parseMessage = this.parseMessage.bind(this);
+    this.subscription = wsSubscribe(this.parseMessage);
   }
 
   componentWillUnmount() {
+    if (isBrowser()) {
       this.subscription.unsubscribe();
     }
+  }
 
   get documentTitle(): string {
-    if (this.state.site) {
     return `${i18n.t('password_change')} - ${this.state.site.name}`;
-    } else {
-      return 'Lemmy';
-    }
   }
 
   render() {
@@ -153,10 +151,6 @@ export class PasswordChange extends Component<any, State> {
       this.setState(this.state);
       UserService.Instance.login(data);
       this.props.history.push('/');
-    } else if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-      this.state.site = data.site;
-      this.setState(this.state);
     }
   }
 }

src/shared/components/post-listing.tsx

@@ -62,7 +62,7 @@ interface PostListingState {
 
 interface PostListingProps {
   post: Post;
-  communities: Community[];
+  communities: Community[]; // TODO this should be an optional
   showCommunity?: boolean;
   showBody?: boolean;
   moderators?: CommunityUser[];

src/shared/components/post-listings.tsx

@@ -27,6 +27,7 @@ export class PostListings extends Component<PostListingsProps, any> {
           this.outer().map(post => (
             <>
               <PostListing
+                communities={[]}
                 post={post}
                 showCommunity={this.props.showCommunity}
                 enableDownvotes={this.props.enableDownvotes}

src/shared/components/private-message.tsx

@@ -1,12 +1,12 @@
 import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
 import {
   PrivateMessage as PrivateMessageI,
   DeletePrivateMessageForm,
   MarkPrivateMessageAsReadForm,
+  UserView,
 } from 'lemmy-js-client';
 import { WebSocketService, UserService } from '../services';
-import { mdToHtml, pictrsAvatarThumbnail, showAvatars, toast } from '../utils';
+import { mdToHtml, toast } from '../utils';
 import { MomentTime } from './moment-time';
 import { PrivateMessageForm } from './private-message-form';
 import { UserListing, UserOther } from './user-listing';
@@ -17,6 +17,7 @@ interface PrivateMessageState {
   showEdit: boolean;
   collapsed: boolean;
   viewSource: boolean;
+  recipient: UserView;
 }
 
 interface PrivateMessageProps {
@@ -32,6 +33,21 @@ export class PrivateMessage extends Component<
     showEdit: false,
     collapsed: false,
     viewSource: false,
+    recipient: {
+      id: this.props.privateMessage.recipient_id,
+      actor_id: this.props.privateMessage.recipient_actor_id,
+      name: this.props.privateMessage.recipient_name,
+      local: this.props.privateMessage.recipient_local,
+      avatar: this.props.privateMessage.recipient_avatar,
+      preferred_username: this.props.privateMessage
+        .recipient_preferred_username,
+      published: undefined,
+      number_of_posts: 0,
+      post_score: 0,
+      number_of_comments: 0,
+      comment_score: 0,
+      banned: false,
+    },
   };
 
   constructor(props: any, context: any) {
@@ -109,6 +125,7 @@ export class PrivateMessage extends Component<
           </ul>
           {this.state.showEdit && (
             <PrivateMessageForm
+              recipient={this.state.recipient}
               privateMessage={message}
               onEdit={this.handlePrivateMessageEdit}
               onCreate={this.handlePrivateMessageCreate}
@@ -215,9 +232,7 @@ export class PrivateMessage extends Component<
         </div>
         {this.state.showReply && (
           <PrivateMessageForm
-            params={{
-              recipient_id: this.props.privateMessage.creator_id,
-            }}
+            recipient={this.state.recipient}
             onCreate={this.handlePrivateMessageCreate}
           />
         )}

src/shared/routes.ts

@@ -33,7 +33,10 @@ export const routes: IRoutePropsWithFetch[] = [
     component: Main,
     fetchInitialData: (auth, path) => Main.fetchInitialData(auth, path),
   },
-  { path: `/login`, component: Login },
+  {
+    path: `/login`,
+    component: Login,
+  },
   {
     path: `/create_post`,
     component: CreatePost,