HTML title bugs.

- Fixing HTML titles for some pages. Fixes #801
- Removing WebSocketService.Instance.site, fetching site on demand now.

ui/src/components/comment-node.tsx

@@ -73,6 +73,7 @@ interface CommentNodeProps {
   showCommunity?: boolean;
   sort?: CommentSortType;
   sortType?: SortType;
+  enableDownvotes: boolean;
 }
 
 export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
@@ -279,7 +280,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           <span class="ml-1">{this.state.upvotes}</span>
                         )}
                       </button>
-                      {WebSocketService.Instance.site.enable_downvotes && (
+                      {this.props.enableDownvotes && (
                         <button
                           className={`btn btn-link btn-animate ${
                             this.state.my_vote == -1
@@ -703,6 +704,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
             postCreatorId={this.props.postCreatorId}
             sort={this.props.sort}
             sortType={this.props.sortType}
+            enableDownvotes={this.props.enableDownvotes}
           />
         )}
         {/* A collapsed clearfix */}

ui/src/components/comment-nodes.tsx

@@ -24,6 +24,7 @@ interface CommentNodesProps {
   showCommunity?: boolean;
   sort?: CommentSortType;
   sortType?: SortType;
+  enableDownvotes: boolean;
 }
 
 export class CommentNodes extends Component<
@@ -52,6 +53,7 @@ export class CommentNodes extends Component<
             showCommunity={this.props.showCommunity}
             sort={this.props.sort}
             sortType={this.props.sortType}
+            enableDownvotes={this.props.enableDownvotes}
           />
         ))}
       </div>

ui/src/components/communities.tsx

@@ -1,5 +1,4 @@
 import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -11,6 +10,7 @@ import {
   ListCommunitiesForm,
   SortType,
   WebSocketJsonResponse,
+  GetSiteResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import { wsJsonToRes, toast } from '../utils';
@@ -47,6 +47,7 @@ export class Communities extends Component<any, CommunitiesState> {
       );
 
     this.refetch();
+    WebSocketService.Instance.getSite();
   }
 
   getPageFromProps(props: any): number {
@@ -57,12 +58,6 @@ export class Communities extends Component<any, CommunitiesState> {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `${i18n.t('communities')} - ${
-      WebSocketService.Instance.site.name
-    }`;
-  }
-
   // Necessary for back button for some reason
   componentWillReceiveProps(nextProps: any) {
     if (nextProps.history.action == 'POP') {
@@ -244,6 +239,9 @@ 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;
+      document.title = `${i18n.t('communities')} - ${data.site.name}`;
     }
   }
 }

ui/src/components/community-form.tsx

@@ -8,7 +8,6 @@ import {
   Category,
   ListCategoriesResponse,
   CommunityResponse,
-  GetSiteResponse,
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
@@ -30,13 +29,13 @@ interface CommunityFormProps {
   onCancel?(): any;
   onCreate?(community: Community): any;
   onEdit?(community: Community): any;
+  enableNsfw: boolean;
 }
 
 interface CommunityFormState {
   communityForm: CommunityFormI;
   categories: Array<Category>;
   loading: boolean;
-  enable_nsfw: boolean;
 }
 
 export class CommunityForm extends Component<
@@ -56,7 +55,6 @@ export class CommunityForm extends Component<
     },
     categories: [],
     loading: false,
-    enable_nsfw: null,
   };
 
   constructor(props: any, context: any) {
@@ -86,7 +84,6 @@ export class CommunityForm extends Component<
       );
 
     WebSocketService.Instance.listCategories();
-    WebSocketService.Instance.getSite();
   }
 
   componentDidMount() {
@@ -187,7 +184,7 @@ export class CommunityForm extends Component<
             </div>
           </div>
 
-          {this.state.enable_nsfw && (
+          {this.props.enableNsfw && (
             <div class="form-group row">
               <div class="col-12">
                 <div class="form-check">
@@ -303,10 +300,6 @@ export class CommunityForm extends Component<
       let data = res.data as CommunityResponse;
       this.state.loading = false;
       this.props.onEdit(data.community);
-    } else if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-      this.state.enable_nsfw = data.site.enable_nsfw;
-      this.setState(this.state);
     }
   }
 }

ui/src/components/community.tsx

@@ -23,6 +23,8 @@ import {
   GetCommentsResponse,
   CommentResponse,
   WebSocketJsonResponse,
+  GetSiteResponse,
+  Site,
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import { PostListings } from './post-listings';
@@ -60,6 +62,7 @@ interface State {
   dataType: DataType;
   sort: SortType;
   page: number;
+  site: Site;
 }
 
 export class Community extends Component<any, State> {
@@ -97,6 +100,20 @@ export class Community extends Component<any, State> {
     dataType: getDataTypeFromProps(this.props),
     sort: getSortTypeFromProps(this.props),
     page: getPageFromProps(this.props),
+    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,
+    },
   };
 
   constructor(props: any, context: any) {
@@ -119,6 +136,7 @@ export class Community extends Component<any, State> {
       name: this.state.communityName ? this.state.communityName : null,
     };
     WebSocketService.Instance.getCommunity(form);
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
@@ -174,6 +192,7 @@ export class Community extends Component<any, State> {
                 moderators={this.state.moderators}
                 admins={this.state.admins}
                 online={this.state.online}
+                enableNsfw={this.state.site.enable_nsfw}
               />
             </div>
           </div>
@@ -188,6 +207,8 @@ export class Community extends Component<any, State> {
         posts={this.state.posts}
         removeDuplicates
         sort={this.state.sort}
+        enableDownvotes={this.state.site.enable_downvotes}
+        enableNsfw={this.state.site.enable_nsfw}
       />
     ) : (
       <CommentNodes
@@ -195,6 +216,7 @@ export class Community extends Component<any, State> {
         noIndent
         sortType={this.state.sort}
         showContext
+        enableDownvotes={this.state.site.enable_downvotes}
       />
     );
   }
@@ -331,7 +353,7 @@ export class Community extends Component<any, State> {
       this.state.moderators = data.moderators;
       this.state.admins = data.admins;
       this.state.online = data.online;
-      document.title = `/c/${this.state.community.name} - ${WebSocketService.Instance.site.name}`;
+      document.title = `/c/${this.state.community.name} - ${this.state.site.name}`;
       this.setState(this.state);
       this.fetchData();
     } else if (res.op == UserOperation.EditCommunity) {
@@ -399,6 +421,10 @@ export class Community extends Component<any, State> {
       let data = res.data as CommentResponse;
       createCommentLikeRes(data, this.state.comments);
       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);
     }
   }
 }

ui/src/components/create-community.tsx

@@ -1,19 +1,44 @@
 import { Component } from 'inferno';
+import { Subscription } from 'rxjs';
+import { retryWhen, delay, take } from 'rxjs/operators';
 import { CommunityForm } from './community-form';
-import { Community } from '../interfaces';
+import {
+  Community,
+  UserOperation,
+  WebSocketJsonResponse,
+  GetSiteResponse,
+} from '../interfaces';
+import { toast, wsJsonToRes } from '../utils';
 import { WebSocketService } from '../services';
 import { i18n } from '../i18next';
 
-export class CreateCommunity extends Component<any, any> {
+interface CreateCommunityState {
+  enableNsfw: boolean;
+}
+
+export class CreateCommunity extends Component<any, CreateCommunityState> {
+  private subscription: Subscription;
+  private emptyState: CreateCommunityState = {
+    enableNsfw: null,
+  };
   constructor(props: any, context: any) {
     super(props, context);
     this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
+    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();
   }
 
-  componentDidMount() {
+  componentWillUnmount() {
-    document.title = `${i18n.t('create_community')} - ${
+    this.subscription.unsubscribe();
-      WebSocketService.Instance.site.name
-    }`;
   }
 
   render() {
@@ -22,7 +47,10 @@ export class CreateCommunity extends Component<any, any> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>{i18n.t('create_community')}</h5>
-            <CommunityForm onCreate={this.handleCommunityCreate} />
+            <CommunityForm
+              onCreate={this.handleCommunityCreate}
+              enableNsfw={this.state.enableNsfw}
+            />
           </div>
         </div>
       </div>
@@ -32,4 +60,18 @@ export class CreateCommunity extends Component<any, any> {
   handleCommunityCreate(community: Community) {
     this.props.history.push(`/c/${community.name}`);
   }
+
+  parseMessage(msg: WebSocketJsonResponse) {
+    console.log(msg);
+    let res = wsJsonToRes(msg);
+    if (msg.error) {
+      toast(i18n.t(msg.error), 'danger');
+      return;
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.state.enableNsfw = data.site.enable_nsfw;
+      this.setState(this.state);
+      document.title = `${i18n.t('create_community')} - ${data.site.name}`;
+    }
+  }
 }

ui/src/components/create-post.tsx

@@ -1,19 +1,59 @@
 import { Component } from 'inferno';
+import { Subscription } from 'rxjs';
+import { retryWhen, delay, take } from 'rxjs/operators';
 import { PostForm } from './post-form';
+import { toast, wsJsonToRes } from '../utils';
 import { WebSocketService } from '../services';
-import { PostFormParams } from '../interfaces';
+import {
+  UserOperation,
+  PostFormParams,
+  WebSocketJsonResponse,
+  GetSiteResponse,
+  Site,
+} from '../interfaces';
 import { i18n } from '../i18next';
 
-export class CreatePost extends Component<any, any> {
+interface CreatePostState {
+  site: Site;
+}
+
+export class CreatePost extends Component<any, CreatePostState> {
+  private subscription: Subscription;
+  private emptyState: CreatePostState = {
+    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,
+    },
+  };
+
   constructor(props: any, context: any) {
     super(props, context);
     this.handlePostCreate = this.handlePostCreate.bind(this);
+    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();
   }
 
-  componentDidMount() {
+  componentWillUnmount() {
-    document.title = `${i18n.t('create_post')} - ${
+    this.subscription.unsubscribe();
-      WebSocketService.Instance.site.name
-    }`;
   }
 
   render() {
@@ -22,7 +62,12 @@ export class CreatePost extends Component<any, any> {
         <div class="row">
           <div class="col-12 col-lg-6 offset-lg-3 mb-4">
             <h5>{i18n.t('create_post')}</h5>
-            <PostForm onCreate={this.handlePostCreate} params={this.params} />
+            <PostForm
+              onCreate={this.handlePostCreate}
+              params={this.params}
+              enableDownvotes={this.state.site.enable_downvotes}
+              enableNsfw={this.state.site.enable_nsfw}
+            />
           </div>
         </div>
       </div>
@@ -56,4 +101,18 @@ export class CreatePost extends Component<any, any> {
   handlePostCreate(id: number) {
     this.props.history.push(`/post/${id}`);
   }
+
+  parseMessage(msg: WebSocketJsonResponse) {
+    console.log(msg);
+    let res = wsJsonToRes(msg);
+    if (msg.error) {
+      toast(i18n.t(msg.error), 'danger');
+      return;
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.state.site = data.site;
+      this.setState(this.state);
+      document.title = `${i18n.t('create_post')} - ${data.site.name}`;
+    }
+  }
 }

ui/src/components/create-private-message.tsx

@@ -1,22 +1,38 @@
 import { Component } from 'inferno';
+import { Subscription } from 'rxjs';
+import { retryWhen, delay, take } from 'rxjs/operators';
 import { PrivateMessageForm } from './private-message-form';
 import { WebSocketService } from '../services';
-import { PrivateMessageFormParams } from '../interfaces';
+import {
-import { toast } from '../utils';
+  UserOperation,
+  WebSocketJsonResponse,
+  GetSiteResponse,
+  PrivateMessageFormParams,
+} from '../interfaces';
+import { toast, wsJsonToRes } from '../utils';
 import { i18n } from '../i18next';
 
 export class CreatePrivateMessage extends Component<any, any> {
+  private subscription: Subscription;
   constructor(props: any, context: any) {
     super(props, context);
     this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
       this
     );
+
+    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();
   }
 
-  componentDidMount() {
+  componentWillUnmount() {
-    document.title = `${i18n.t('create_private_message')} - ${
+    this.subscription.unsubscribe();
-      WebSocketService.Instance.site.name
-    }`;
   }
 
   render() {
@@ -50,4 +66,18 @@ export class CreatePrivateMessage extends Component<any, any> {
     // Navigate to the front
     this.props.history.push(`/`);
   }
+
+  parseMessage(msg: WebSocketJsonResponse) {
+    console.log(msg);
+    let res = wsJsonToRes(msg);
+    if (msg.error) {
+      toast(i18n.t(msg.error), 'danger');
+      return;
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      document.title = `${i18n.t('create_private_message')} - ${
+        data.site.name
+      }`;
+    }
+  }
 }

ui/src/components/inbox.tsx

@@ -16,6 +16,7 @@ import {
   GetPrivateMessagesForm,
   PrivateMessagesResponse,
   PrivateMessageResponse,
+  GetSiteResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import {
@@ -56,6 +57,7 @@ interface InboxState {
   messages: Array<PrivateMessageI>;
   sort: SortType;
   page: number;
+  enableDownvotes: boolean;
 }
 
 export class Inbox extends Component<any, InboxState> {
@@ -68,6 +70,7 @@ export class Inbox extends Component<any, InboxState> {
     messages: [],
     sort: SortType.New,
     page: 1,
+    enableDownvotes: undefined,
   };
 
   constructor(props: any, context: any) {
@@ -85,18 +88,13 @@ export class Inbox extends Component<any, InboxState> {
       );
 
     this.refetch();
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `/u/${UserService.Instance.user.username} ${i18n.t(
-      'inbox'
-    )} - ${WebSocketService.Instance.site.name}`;
-  }
-
   render() {
     return (
       <div class="container">
@@ -270,6 +268,7 @@ export class Inbox extends Component<any, InboxState> {
               noIndent
               markable
               showContext
+              enableDownvotes={this.state.enableDownvotes}
             />
           ) : (
             <PrivateMessage privateMessage={i} />
@@ -287,6 +286,7 @@ export class Inbox extends Component<any, InboxState> {
           noIndent
           markable
           showContext
+          enableDownvotes={this.state.enableDownvotes}
         />
       </div>
     );
@@ -301,6 +301,7 @@ export class Inbox extends Component<any, InboxState> {
             noIndent
             markable
             showContext
+            enableDownvotes={this.state.enableDownvotes}
           />
         ))}
       </div>
@@ -522,6 +523,13 @@ export class Inbox extends Component<any, InboxState> {
       let data = res.data as CommentResponse;
       createCommentLikeRes(data, this.state.replies);
       this.setState(this.state);
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.state.enableDownvotes = data.site.enable_downvotes;
+      this.setState(this.state);
+      document.title = `/u/${UserService.Instance.user.username} ${i18n.t(
+        'inbox'
+      )} - ${data.site.name}`;
     }
   }
 

ui/src/components/login.tsx

@@ -385,9 +385,7 @@ export class Login extends Component<any, State> {
         let data = res.data as GetSiteResponse;
         this.state.enable_nsfw = data.site.enable_nsfw;
         this.setState(this.state);
-        document.title = `${i18n.t('login')} - ${
+        document.title = `${i18n.t('login')} - ${data.site.name}`;
-          WebSocketService.Instance.site.name
-        }`;
       }
     }
   }

ui/src/components/main.tsx

@@ -418,6 +418,8 @@ export class Main extends Component<any, MainState> {
         showCommunity
         removeDuplicates
         sort={this.state.sort}
+        enableDownvotes={this.state.siteRes.site.enable_downvotes}
+        enableNsfw={this.state.siteRes.site.enable_nsfw}
       />
     ) : (
       <CommentNodes
@@ -426,6 +428,7 @@ export class Main extends Component<any, MainState> {
         showCommunity
         sortType={this.state.sort}
         showContext
+        enableDownvotes={this.state.siteRes.site.enable_downvotes}
       />
     );
   }
@@ -617,7 +620,7 @@ export class Main extends Component<any, MainState> {
       this.state.siteRes.banned = data.banned;
       this.state.siteRes.online = data.online;
       this.setState(this.state);
-      document.title = `${WebSocketService.Instance.site.name}`;
+      document.title = `${this.state.siteRes.site.name}`;
     } else if (res.op == UserOperation.EditSite) {
       let data = res.data as SiteResponse;
       this.state.siteRes.site = data.site;

ui/src/components/modlog.tsx

@@ -16,6 +16,7 @@ import {
   ModAddCommunity,
   ModAdd,
   WebSocketJsonResponse,
+  GetSiteResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import { wsJsonToRes, addTypeInfo, fetchLimit, toast } from '../utils';
@@ -64,16 +65,13 @@ export class Modlog extends Component<any, ModlogState> {
       );
 
     this.refetch();
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `Modlog - ${WebSocketService.Instance.site.name}`;
-  }
-
   setCombined(res: GetModlogResponse) {
     let removed_posts = addTypeInfo(res.removed_posts, 'removed_posts');
     let locked_posts = addTypeInfo(res.locked_posts, 'locked_posts');
@@ -434,6 +432,9 @@ export class Modlog extends Component<any, ModlogState> {
       this.state.loading = false;
       window.scrollTo(0, 0);
       this.setCombined(data);
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      document.title = `Modlog - ${data.site.name}`;
     }
   }
 }

ui/src/components/navbar.tsx

@@ -396,9 +396,6 @@ export class Navbar extends Component<any, NavbarState> {
       if (data.site && !this.state.siteName) {
         this.state.siteName = data.site.name;
         this.state.admins = data.admins;
-        WebSocketService.Instance.site = data.site;
-        WebSocketService.Instance.admins = data.admins;
-
         this.setState(this.state);
       }
     }

ui/src/components/password_change.tsx

@@ -6,6 +6,7 @@ import {
   LoginResponse,
   PasswordChangeForm,
   WebSocketJsonResponse,
+  GetSiteResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import { wsJsonToRes, capitalizeFirstLetter, toast } from '../utils';
@@ -40,18 +41,13 @@ export class PasswordChange extends Component<any, State> {
         err => console.error(err),
         () => console.log('complete')
       );
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `${i18n.t('password_change')} - ${
-      WebSocketService.Instance.site.name
-    }`;
-  }
-
   render() {
     return (
       <div class="container">
@@ -138,14 +134,15 @@ export class PasswordChange extends Component<any, State> {
       this.state.loading = false;
       this.setState(this.state);
       return;
-    } else {
+    } else if (res.op == UserOperation.PasswordChange) {
-      if (res.op == UserOperation.PasswordChange) {
+      let data = res.data as LoginResponse;
-        let data = res.data as LoginResponse;
+      this.state = this.emptyState;
-        this.state = this.emptyState;
+      this.setState(this.state);
-        this.setState(this.state);
+      UserService.Instance.login(data);
-        UserService.Instance.login(data);
+      this.props.history.push('/');
-        this.props.history.push('/');
+    } else if (res.op == UserOperation.GetSite) {
-      }
+      let data = res.data as GetSiteResponse;
+      document.title = `${i18n.t('password_change')} - ${data.site.name}`;
     }
   }
 }

ui/src/components/post-form.tsx

@@ -16,7 +16,6 @@ import {
   SearchForm,
   SearchType,
   SearchResponse,
-  GetSiteResponse,
   WebSocketJsonResponse,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
@@ -52,6 +51,8 @@ interface PostFormProps {
   onCancel?(): any;
   onCreate?(id: number): any;
   onEdit?(post: Post): any;
+  enableNsfw: boolean;
+  enableDownvotes: boolean;
 }
 
 interface PostFormState {
@@ -63,7 +64,6 @@ interface PostFormState {
   suggestedTitle: string;
   suggestedPosts: Array<Post>;
   crossPosts: Array<Post>;
-  enable_nsfw: boolean;
 }
 
 export class PostForm extends Component<PostFormProps, PostFormState> {
@@ -87,7 +87,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     suggestedTitle: undefined,
     suggestedPosts: [],
     crossPosts: [],
-    enable_nsfw: undefined,
   };
 
   constructor(props: any, context: any) {
@@ -138,7 +137,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
     };
 
     WebSocketService.Instance.listCommunities(listCommunitiesForm);
-    WebSocketService.Instance.getSite();
   }
 
   componentDidMount() {
@@ -240,7 +238,12 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   <div class="my-1 text-muted small font-weight-bold">
                     {i18n.t('cross_posts')}
                   </div>
-                  <PostListings showCommunity posts={this.state.crossPosts} />
+                  <PostListings
+                    showCommunity
+                    posts={this.state.crossPosts}
+                    enableDownvotes={this.props.enableDownvotes}
+                    enableNsfw={this.props.enableNsfw}
+                  />
                 </>
               )}
             </div>
@@ -265,7 +268,11 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
                   <div class="my-1 text-muted small font-weight-bold">
                     {i18n.t('related_posts')}
                   </div>
-                  <PostListings posts={this.state.suggestedPosts} />
+                  <PostListings
+                    posts={this.state.suggestedPosts}
+                    enableDownvotes={this.props.enableDownvotes}
+                    enableNsfw={this.props.enableNsfw}
+                  />
                 </>
               )}
             </div>
@@ -346,7 +353,7 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
               </div>
             </div>
           )}
-          {this.state.enable_nsfw && (
+          {this.props.enableNsfw && (
             <div class="form-group row">
               <div class="col-sm-10">
                 <div class="form-check">
@@ -631,10 +638,6 @@ export class PostForm extends Component<PostFormProps, PostFormState> {
         this.state.crossPosts = data.posts;
       }
       this.setState(this.state);
-    } else if (res.op == UserOperation.GetSite) {
-      let data = res.data as GetSiteResponse;
-      this.state.enable_nsfw = data.site.enable_nsfw;
-      this.setState(this.state);
     }
   }
 }

ui/src/components/post-listing.tsx

@@ -61,6 +61,8 @@ interface PostListingProps {
   showBody?: boolean;
   moderators?: Array<CommunityUser>;
   admins?: Array<UserView>;
+  enableDownvotes: boolean;
+  enableNsfw: boolean;
 }
 
 export class PostListing extends Component<PostListingProps, PostListingState> {
@@ -115,6 +117,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               post={this.props.post}
               onEdit={this.handleEditPost}
               onCancel={this.handleEditCancel}
+              enableNsfw={this.props.enableNsfw}
+              enableDownvotes={this.props.enableDownvotes}
             />
           </div>
         )}
@@ -273,7 +277,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           >
             {this.state.score}
           </div>
-          {WebSocketService.Instance.site.enable_downvotes && (
+          {this.props.enableDownvotes && (
             <button
               className={`btn-animate btn btn-link p-0 ${
                 this.state.my_vote == -1 ? 'text-danger' : 'text-muted'

ui/src/components/post-listings.tsx

@@ -11,6 +11,8 @@ interface PostListingsProps {
   showCommunity?: boolean;
   removeDuplicates?: boolean;
   sort?: SortType;
+  enableDownvotes: boolean;
+  enableNsfw: boolean;
 }
 
 export class PostListings extends Component<PostListingsProps, any> {
@@ -27,6 +29,8 @@ export class PostListings extends Component<PostListingsProps, any> {
               <PostListing
                 post={post}
                 showCommunity={this.props.showCommunity}
+                enableDownvotes={this.props.enableDownvotes}
+                enableNsfw={this.props.enableNsfw}
               />
               <hr class="my-2" />
             </>

ui/src/components/post.tsx

@@ -18,7 +18,6 @@ import {
   BanUserResponse,
   AddModToCommunityResponse,
   AddAdminResponse,
-  UserView,
   SearchType,
   SortType,
   SearchForm,
@@ -52,12 +51,12 @@ interface PostState {
   commentSort: CommentSortType;
   community: Community;
   moderators: Array<CommunityUser>;
-  admins: Array<UserView>;
   online: number;
   scrolled?: boolean;
   scrolled_comment_id?: number;
   loading: boolean;
   crossPosts: Array<PostI>;
+  siteRes: GetSiteResponse;
 }
 
 export class Post extends Component<any, PostState> {
@@ -68,11 +67,29 @@ export class Post extends Component<any, PostState> {
     commentSort: CommentSortType.Hot,
     community: null,
     moderators: [],
-    admins: [],
     online: null,
     scrolled: false,
     loading: true,
     crossPosts: [],
+    siteRes: {
+      admins: [],
+      banned: [],
+      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,
+      },
+      online: null,
+    },
   };
 
   constructor(props: any, context: any) {
@@ -97,6 +114,7 @@ export class Post extends Component<any, PostState> {
       id: postId,
     };
     WebSocketService.Instance.getPost(form);
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
@@ -180,7 +198,9 @@ export class Post extends Component<any, PostState> {
                 showBody
                 showCommunity
                 moderators={this.state.moderators}
-                admins={this.state.admins}
+                admins={this.state.siteRes.admins}
+                enableDownvotes={this.state.siteRes.site.enable_downvotes}
+                enableNsfw={this.state.siteRes.site.enable_nsfw}
               />
               <div className="mb-2" />
               <CommentForm
@@ -269,9 +289,10 @@ export class Post extends Component<any, PostState> {
             noIndent
             locked={this.state.post.locked}
             moderators={this.state.moderators}
-            admins={this.state.admins}
+            admins={this.state.siteRes.admins}
             postCreatorId={this.state.post.creator_id}
             showContext
+            enableDownvotes={this.state.siteRes.site.enable_downvotes}
           />
         </div>
       </div>
@@ -284,8 +305,9 @@ export class Post extends Component<any, PostState> {
         <Sidebar
           community={this.state.community}
           moderators={this.state.moderators}
-          admins={this.state.admins}
+          admins={this.state.siteRes.admins}
           online={this.state.online}
+          enableNsfw={this.state.siteRes.site.enable_nsfw}
         />
       </div>
     );
@@ -336,9 +358,10 @@ export class Post extends Component<any, PostState> {
           nodes={nodes}
           locked={this.state.post.locked}
           moderators={this.state.moderators}
-          admins={this.state.admins}
+          admins={this.state.siteRes.admins}
           postCreatorId={this.state.post.creator_id}
           sort={this.state.commentSort}
+          enableDownvotes={this.state.siteRes.site.enable_downvotes}
         />
       </div>
     );
@@ -360,10 +383,10 @@ export class Post extends Component<any, PostState> {
       this.state.comments = data.comments;
       this.state.community = data.community;
       this.state.moderators = data.moderators;
-      this.state.admins = data.admins;
+      this.state.siteRes.admins = data.admins;
       this.state.online = data.online;
       this.state.loading = false;
-      document.title = `${this.state.post.name} - ${WebSocketService.Instance.site.name}`;
+      document.title = `${this.state.post.name} - ${this.state.siteRes.site.name}`;
 
       // Get cross-posts
       if (this.state.post.url) {
@@ -450,7 +473,7 @@ export class Post extends Component<any, PostState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.AddAdmin) {
       let data = res.data as AddAdminResponse;
-      this.state.admins = data.admins;
+      this.state.siteRes.admins = data.admins;
       this.setState(this.state);
     } else if (res.op == UserOperation.Search) {
       let data = res.data as SearchResponse;
@@ -461,15 +484,18 @@ export class Post extends Component<any, PostState> {
         this.state.post.duplicates = this.state.crossPosts;
       }
       this.setState(this.state);
-    } else if (res.op == UserOperation.TransferSite) {
+    } else if (
+      res.op == UserOperation.TransferSite ||
+      res.op == UserOperation.GetSite
+    ) {
       let data = res.data as GetSiteResponse;
-      this.state.admins = data.admins;
+      this.state.siteRes = data;
       this.setState(this.state);
     } else if (res.op == UserOperation.TransferCommunity) {
       let data = res.data as GetCommunityResponse;
       this.state.community = data.community;
       this.state.moderators = data.moderators;
-      this.state.admins = data.admins;
+      this.state.siteRes.admins = data.admins;
       this.setState(this.state);
     }
   }

ui/src/components/private-message-form.tsx

@@ -1,6 +1,5 @@
 import { Component, linkEvent } from 'inferno';
 import { Prompt } from 'inferno-router';
-import { Link } from 'inferno-router';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {

ui/src/components/search.tsx

@@ -15,6 +15,8 @@ import {
   PostResponse,
   CommentResponse,
   WebSocketJsonResponse,
+  GetSiteResponse,
+  Site,
 } from '../interfaces';
 import { WebSocketService } from '../services';
 import {
@@ -41,6 +43,7 @@ interface SearchState {
   page: number;
   searchResponse: SearchResponse;
   loading: boolean;
+  site: Site;
 }
 
 export class Search extends Component<any, SearchState> {
@@ -58,6 +61,20 @@ export class Search extends Component<any, SearchState> {
       users: [],
     },
     loading: 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,
+    },
   };
 
   getSearchQueryFromProps(props: any): string {
@@ -94,6 +111,8 @@ export class Search extends Component<any, SearchState> {
         () => console.log('complete')
       );
 
+    WebSocketService.Instance.getSite();
+
     if (this.state.q) {
       this.search();
     }
@@ -118,12 +137,6 @@ export class Search extends Component<any, SearchState> {
     }
   }
 
-  componentDidMount() {
-    document.title = `${i18n.t('search')} - ${
-      WebSocketService.Instance.site.name
-    }`;
-  }
-
   render() {
     return (
       <div class="container">
@@ -241,13 +254,19 @@ export class Search extends Component<any, SearchState> {
           <div class="row">
             <div class="col-12">
               {i.type_ == 'posts' && (
-                <PostListing post={i.data as Post} showCommunity />
+                <PostListing
+                  post={i.data as Post}
+                  showCommunity
+                  enableDownvotes={this.state.site.enable_downvotes}
+                  enableNsfw={this.state.site.enable_nsfw}
+                />
               )}
               {i.type_ == 'comments' && (
                 <CommentNodes
                   nodes={[{ comment: i.data as Comment }]}
                   locked
                   noIndent
+                  enableDownvotes={this.state.site.enable_downvotes}
                 />
               )}
               {i.type_ == 'communities' && (
@@ -281,6 +300,7 @@ export class Search extends Component<any, SearchState> {
         nodes={commentsToFlatNodes(this.state.searchResponse.comments)}
         locked
         noIndent
+        enableDownvotes={this.state.site.enable_downvotes}
       />
     );
   }
@@ -291,7 +311,12 @@ export class Search extends Component<any, SearchState> {
         {this.state.searchResponse.posts.map(post => (
           <div class="row">
             <div class="col-12">
-              <PostListing post={post} showCommunity />
+              <PostListing
+                post={post}
+                showCommunity
+                enableDownvotes={this.state.site.enable_downvotes}
+                enableNsfw={this.state.site.enable_nsfw}
+              />
             </div>
           </div>
         ))}
@@ -455,7 +480,7 @@ export class Search extends Component<any, SearchState> {
       this.state.searchResponse = data;
       this.state.loading = false;
       document.title = `${i18n.t('search')} - ${this.state.q} - ${
-        WebSocketService.Instance.site.name
+        this.state.site.name
       }`;
       window.scrollTo(0, 0);
       this.setState(this.state);
@@ -467,6 +492,11 @@ export class Search extends Component<any, SearchState> {
       let data = res.data as PostResponse;
       createPostLikeFindRes(data, this.state.searchResponse.posts);
       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);
+      document.title = `${i18n.t('search')} - ${data.site.name}`;
     }
   }
 }

ui/src/components/sidebar.tsx

@@ -19,6 +19,7 @@ interface SidebarProps {
   moderators: Array<CommunityUser>;
   admins: Array<UserView>;
   online: number;
+  enableNsfw: boolean;
 }
 
 interface SidebarState {
@@ -53,6 +54,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             community={this.props.community}
             onEdit={this.handleEditCommunity}
             onCancel={this.handleEditCancel}
+            enableNsfw={this.props.enableNsfw}
           />
         )}
       </div>

ui/src/components/sponsors.tsx

@@ -1,8 +1,15 @@
 import { Component } from 'inferno';
+import { Subscription } from 'rxjs';
+import { retryWhen, delay, take } from 'rxjs/operators';
 import { WebSocketService } from '../services';
+import {
+  GetSiteResponse,
+  WebSocketJsonResponse,
+  UserOperation,
+} from '../interfaces';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
-import { repoUrl } from '../utils';
+import { repoUrl, wsJsonToRes, toast } from '../utils';
 
 interface SilverUser {
   name: string;
@@ -33,17 +40,28 @@ let silver: Array<SilverUser> = [
 // let latinum = [];
 
 export class Sponsors extends Component<any, any> {
+  private subscription: Subscription;
   constructor(props: any, context: any) {
     super(props, context);
+    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();
   }
 
   componentDidMount() {
-    document.title = `${i18n.t('sponsors')} - ${
-      WebSocketService.Instance.site.name
-    }`;
     window.scrollTo(0, 0);
   }
 
+  componentWillUnmount() {
+    this.subscription.unsubscribe();
+  }
+
   render() {
     return (
       <div class="container text-center">
@@ -153,4 +171,16 @@ export class Sponsors extends Component<any, any> {
       </div>
     );
   }
+
+  parseMessage(msg: WebSocketJsonResponse) {
+    console.log(msg);
+    let res = wsJsonToRes(msg);
+    if (msg.error) {
+      toast(i18n.t(msg.error), 'danger');
+      return;
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      document.title = `${i18n.t('sponsors')} - ${data.site.name}`;
+    }
+  }
 }

ui/src/components/user.tsx

@@ -20,6 +20,8 @@ import {
   DeleteAccountForm,
   PostResponse,
   WebSocketJsonResponse,
+  GetSiteResponse,
+  Site,
 } from '../interfaces';
 import { WebSocketService, UserService } from '../services';
 import {
@@ -74,6 +76,7 @@ interface UserState {
   deleteAccountLoading: boolean;
   deleteAccountShowConfirm: boolean;
   deleteAccountForm: DeleteAccountForm;
+  site: Site;
 }
 
 export class User extends Component<any, UserState> {
@@ -122,6 +125,20 @@ export class User extends Component<any, UserState> {
     deleteAccountForm: {
       password: null,
     },
+    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,
+    },
   };
 
   constructor(props: any, context: any) {
@@ -148,6 +165,7 @@ export class User extends Component<any, UserState> {
       );
 
     this.refetch();
+    WebSocketService.Instance.getSite();
   }
 
   get isCurrentUser() {
@@ -356,6 +374,8 @@ export class User extends Component<any, UserState> {
                 post={i.data as Post}
                 admins={this.state.admins}
                 showCommunity
+                enableDownvotes={this.state.site.enable_downvotes}
+                enableNsfw={this.state.site.enable_nsfw}
               />
             ) : (
               <CommentNodes
@@ -363,6 +383,7 @@ export class User extends Component<any, UserState> {
                 admins={this.state.admins}
                 noIndent
                 showContext
+                enableDownvotes={this.state.site.enable_downvotes}
               />
             )}
           </div>
@@ -379,6 +400,7 @@ export class User extends Component<any, UserState> {
           admins={this.state.admins}
           noIndent
           showContext
+          enableDownvotes={this.state.site.enable_downvotes}
         />
       </div>
     );
@@ -388,7 +410,13 @@ export class User extends Component<any, UserState> {
     return (
       <div>
         {this.state.posts.map(post => (
-          <PostListing post={post} admins={this.state.admins} showCommunity />
+          <PostListing
+            post={post}
+            admins={this.state.admins}
+            showCommunity
+            enableDownvotes={this.state.site.enable_downvotes}
+            enableNsfw={this.state.site.enable_nsfw}
+          />
         ))}
       </div>
     );
@@ -670,7 +698,7 @@ export class User extends Component<any, UserState> {
                   />
                 </div>
               </div>
-              {WebSocketService.Instance.site.enable_nsfw && (
+              {this.state.site.enable_nsfw && (
                 <div class="form-group">
                   <div class="form-check">
                     <input
@@ -1107,7 +1135,7 @@ export class User extends Component<any, UserState> {
           UserService.Instance.user.show_avatars;
         this.state.userSettingsForm.matrix_user_id = this.state.user.matrix_user_id;
       }
-      document.title = `/u/${this.state.user.name} - ${WebSocketService.Instance.site.name}`;
+      document.title = `/u/${this.state.user.name} - ${this.state.site.name}`;
       window.scrollTo(0, 0);
       this.setState(this.state);
       setupTippy();
@@ -1159,6 +1187,10 @@ export class User extends Component<any, UserState> {
       this.state.deleteAccountShowConfirm = false;
       this.setState(this.state);
       this.context.router.history.push('/');
+    } else if (res.op == UserOperation.GetSite) {
+      let data = res.data as GetSiteResponse;
+      this.state.site = data.site;
+      this.setState(this.state);
     }
   }
 }

ui/src/services/WebSocketService.ts

@@ -25,7 +25,6 @@ import {
   TransferSiteForm,
   BanUserForm,
   SiteForm,
-  Site,
   UserView,
   GetRepliesForm,
   GetUserMentionsForm,
@@ -57,7 +56,6 @@ export class WebSocketService {
   public ws: ReconnectingWebSocket;
   public subject: Observable<any>;
 
-  public site: Site;
   public admins: Array<UserView>;
   public banned: Array<UserView>;