routes.api: fix get_captcha endpoint (#1135)

[lemmy.git] / ui / src / components / communities.tsx

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index eef39ccf2a28ff89441e8c9c597c961ae00340cd..5be032c5e47f3790742cca62acc0df0ee9d3548e 100644 (file)
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -1,5 +1,5 @@
 import { Component, linkEvent } from 'inferno';
-import { Link } from 'inferno-router';
+import { Helmet } from 'inferno-helmet';
 import { Subscription } from 'rxjs';
 import { retryWhen, delay, take } from 'rxjs/operators';
 import {
@@ -11,11 +11,13 @@ import {
   ListCommunitiesForm,
   SortType,
   WebSocketJsonResponse,
-} from '../interfaces';
+  GetSiteResponse,
+  Site,
+} from 'lemmy-js-client';
 import { WebSocketService } from '../services';
-import { wsJsonToRes, toast } from '../utils';
+import { wsJsonToRes, toast, getPageFromProps } from '../utils';
+import { CommunityLink } from './community-link';
 import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
 
 declare const Sortable: any;
 
@@ -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> {
@@ -32,7 +39,8 @@ export class Communities extends Component<any, CommunitiesState> {
   private emptyState: CommunitiesState = {
     communities: [],
     loading: true,
-    page: this.getPageFromProps(this.props),
+    page: getPageFromProps(this.props),
+    site: undefined,
   };
 
   constructor(props: any, context: any) {
@@ -47,66 +55,59 @@ export class Communities extends Component<any, CommunitiesState> {
       );
 
     this.refetch();
-  }
-
-  getPageFromProps(props: any): number {
-    return props.match.params.page ? Number(props.match.params.page) : 1;
+    WebSocketService.Instance.getSite();
   }
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  componentDidMount() {
-    document.title = `${i18n.t('communities')} - ${
-      WebSocketService.Instance.site.name
-    }`;
+  static getDerivedStateFromProps(props: any): CommunitiesProps {
+    return {
+      page: getPageFromProps(props),
+    };
   }
 
-  // Necessary for back button for some reason
-  componentWillReceiveProps(nextProps: any) {
-    if (nextProps.history.action == 'POP') {
-      this.state = this.emptyState;
-      this.state.page = this.getPageFromProps(nextProps);
+  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 ? (
-          <p class="text-center">
+          <h5 class="">
             <svg class="icon icon-spinner spin">
               <use xlinkHref="#icon-spinner"></use>
             </svg>
-          </p>
+          </h5>
         ) : (
           <div>
-            <h5>
-              { i18n.t('list_of_communities') }
-            </h5>
+            <h5>{i18n.t('list_of_communities')}</h5>
             <div class="table-responsive">
               <table id="community_table" class="table table-sm table-hover">
                 <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>{i18n.t('name')}</th>
+                    <th>{i18n.t('category')}</th>
+                    <th class="text-right">{i18n.t('subscribers')}</th>
                     <th class="text-right d-none d-lg-table-cell">
-                      { i18n.t('posts') }
+                      {i18n.t('posts')}
                     </th>
                     <th class="text-right d-none d-lg-table-cell">
-                      { i18n.t('comments') }
+                      {i18n.t('comments')}
                     </th>
                     <th></th>
                   </tr>
@@ -115,11 +116,8 @@ export class Communities extends Component<any, CommunitiesState> {
                   {this.state.communities.map(community => (
                     <tr>
                       <td>
-                        <Link to={`/c/${community.name}`}>
-                          {community.name}
-                        </Link>
+                        <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}
@@ -139,7 +137,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleUnsubscribe
                             )}
                           >
-                            <T i18nKey="unsubscribe">#</T>
+                            {i18n.t('unsubscribe')}
                           </span>
                         ) : (
                           <span
@@ -149,7 +147,7 @@ export class Communities extends Component<any, CommunitiesState> {
                               this.handleSubscribe
                             )}
                           >
-                            { i18n.t('subscribe') }
+                            {i18n.t('subscribe')}
                           </span>
                         )}
                       </td>
@@ -170,41 +168,36 @@ 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') }
+            {i18n.t('prev')}
           </button>
         )}
 
-        {this.state.communities.length == communityLimit && (
+        {this.state.communities.length > 0 && (
           <button
-            class="btn btn-sm btn-secondary"
+            class="btn btn-secondary"
             onClick={linkEvent(this, this.nextPage)}
           >
-            { i18n.t('next') }
+            {i18n.t('next')}
           </button>
         )}
       </div>
     );
   }
 
-  updateUrl() {
-    this.props.history.push(`/communities/page/${this.state.page}`);
+  updateUrl(paramUpdates: CommunitiesProps) {
+    const page = paramUpdates.page || this.state.page;
+    this.props.history.push(`/communities/page/${page}`);
   }
 
   nextPage(i: Communities) {
-    i.state.page++;
-    i.setState(i.state);
-    i.updateUrl();
-    i.refetch();
+    i.updateUrl({ page: i.state.page + 1 });
   }
 
   prevPage(i: Communities) {
-    i.state.page--;
-    i.setState(i.state);
-    i.updateUrl();
-    i.refetch();
+    i.updateUrl({ page: i.state.page - 1 });
   }
 
   handleUnsubscribe(communityId: number) {
@@ -225,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,
     };
@@ -256,6 +249,10 @@ 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);
     }
   }
 }