ui.components.communities: deprecate componentWillReceiveProps

1 files changed, 16 insertions, 21 deletions

diff --git a/ui/src/components/communities.tsx b/ui/src/components/communities.tsx
index 10a3ab80..71ea878d 100644
--- a/ui/src/components/communities.tsx
+++ b/ui/src/components/communities.tsx
@@ -13,7 +13,7 @@ import {
   GetSiteResponse,
 } from '../interfaces';
 import { WebSocketService } from '../services';
-import { wsJsonToRes, toast } from '../utils';
+import { wsJsonToRes, toast, getPageFromProps } from '../utils';
 import { CommunityLink } from './community-link';
 import { i18n } from '../i18next';
 
@@ -32,7 +32,7 @@ export class Communities extends Component<any, CommunitiesState> {
   private emptyState: CommunitiesState = {
     communities: [],
     loading: true,
-    page: this.getPageFromProps(this.props),
+    page: getPageFromProps(this.props),
   };
 
   constructor(props: any, context: any) {
@@ -50,19 +50,19 @@ export class Communities extends Component<any, CommunitiesState> {
     WebSocketService.Instance.getSite();
   }
 
-  getPageFromProps(props: any): number {
-    return props.match.params.page ? Number(props.match.params.page) : 1;
-  }
-
   componentWillUnmount() {
     this.subscription.unsubscribe();
   }
 
-  // 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);
+  static getDerivedStateFromProps(props) {
+    return {
+      page: getPageFromProps(props),
+    };
+  }
+
+  componentDidUpdate(_, lastState) {
+    if (lastState.page !== this.state.page) {
+      this.setState({ loading: true });
       this.refetch();
     }
   }
@@ -172,22 +172,17 @@ export class Communities extends Component<any, CommunitiesState> {
     );
   }
 
-  updateUrl() {
-    this.props.history.push(`/communities/page/${this.state.page}`);
+  updateUrl(paramUpdates: { page: number }) {
+    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) {