From 195bf022bb38499754263f71d52b0596ebd0e333 Mon Sep 17 00:00:00 2001 From: derek Date: Sun, 12 Jul 2020 23:17:56 -0400 Subject: [PATCH] ui.components.communities: deprecate componentWillReceiveProps --- ui/src/components/communities.tsx | 37 +++++++++++++------------------ 1 file 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 { 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 { 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 { ); } - 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) { -- 2.44.1