]> Untitled Git - lemmy.git/blobdiff - ui/src/components/communities.tsx
routes.api: fix get_captcha endpoint (#1135)
[lemmy.git] / ui / src / components / communities.tsx
index 71ea878de50c1dfb6c0266c818db5f7dc8826683..5be032c5e47f3790742cca62acc0df0ee9d3548e 100644 (file)
@@ -1,4 +1,5 @@
 import { Component, linkEvent } from 'inferno';
+import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -11,7 +12,8 @@ import {
   SortType,
   WebSocketJsonResponse,
   GetSiteResponse,
-} from '../interfaces';
+  Site,
+} from 'lemmy-js-client';
 import { WebSocketService } from '../services';
 import { wsJsonToRes, toast, getPageFromProps } from '../utils';
 import { CommunityLink } from './community-link';
@@ -25,6 +27,11 @@ interface CommunitiesState {
   communities: Array<Community>;
   page: number;
   loading: boolean;
+  site: Site;
+}
+
+interface CommunitiesProps {
+  page: number;
 }
 
 export class Communities extends Component<any, CommunitiesState> {
@@ -33,6 +40,7 @@ export class Communities extends Component<any, CommunitiesState> {
     communities: [],
     loading: true,
     page: getPageFromProps(this.props),
+    site: undefined,
   };
 
   constructor(props: any, context: any) {
@@ -54,22 +62,31 @@ export class Communities extends Component<any, CommunitiesState> {
     this.subscription.unsubscribe();
   }
 
-  static getDerivedStateFromProps(props) {
+  static getDerivedStateFromProps(props: any): CommunitiesProps {
     return {
       page: getPageFromProps(props),
     };
   }
 
-  componentDidUpdate(_, lastState) {
+  componentDidUpdate(_: any, lastState: CommunitiesState) {
     if (lastState.page !== this.state.page) {
       this.setState({ loading: true });
       this.refetch();
     }
   }
 
+  get documentTitle(): string {
+    if (this.state.site) {
+      return `${i18n.t('communities')} - ${this.state.site.name}`;
+    } else {
+      return 'Lemmy';
+    }
+  }
+
   render() {
     return (
       <div class="container">
+        <Helmet title={this.documentTitle} />
         {this.state.loading ? (
           <h5 class="">
             <svg class="icon icon-spinner spin">
@@ -84,7 +101,6 @@ export class Communities extends Component<any, CommunitiesState> {
                 <thead class="pointer">
                   <tr>
                     <th>{i18n.t('name')}</th>
-                    <th class="d-none d-lg-table-cell">{i18n.t('title')}</th>
                     <th>{i18n.t('category')}</th>
                     <th class="text-right">{i18n.t('subscribers')}</th>
                     <th class="text-right d-none d-lg-table-cell">
@@ -102,7 +118,6 @@ export class Communities extends Component<any, CommunitiesState> {
                       <td>
                         <CommunityLink community={community} />
                       </td>
-                      <td class="d-none d-lg-table-cell">{community.title}</td>
                       <td>{community.category_name}</td>
                       <td class="text-right">
                         {community.number_of_subscribers}
@@ -153,7 +168,7 @@ export class Communities extends Component<any, CommunitiesState> {
       <div class="mt-2">
         {this.state.page > 1 && (
           <button
-            class="btn btn-sm btn-secondary mr-1"
+            class="btn btn-secondary mr-1"
             onClick={linkEvent(this, this.prevPage)}
           >
             {i18n.t('prev')}
@@ -162,7 +177,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
         {this.state.communities.length > 0 && (
           <button
-            class="btn btn-sm btn-secondary"
+            class="btn btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
             {i18n.t('next')}
@@ -172,7 +187,7 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
-  updateUrl(paramUpdates: { page: number }) {
+  updateUrl(paramUpdates: CommunitiesProps) {
     const page = paramUpdates.page || this.state.page;
     this.props.history.push(`/communities/page/${page}`);
   }
@@ -203,7 +218,7 @@ export class Communities extends Component<any, CommunitiesState> {
 
   refetch() {
     let listCommunitiesForm: ListCommunitiesForm = {
-      sort: SortType[SortType.TopAll],
+      sort: SortType.TopAll,
       limit: communityLimit,
       page: this.state.page,
     };
@@ -236,7 +251,8 @@ export class Communities extends Component<any, CommunitiesState> {
       this.setState(this.state);
     } else if (res.op == UserOperation.GetSite) {
       let data = res.data as GetSiteResponse;
-      document.title = `${i18n.t('communities')} - ${data.site.name}`;
+      this.state.site = data.site;
+      this.setState(this.state);
     }
   }
 }