ui.components.communities: deprecate componentWillReceiveProps

This commit is contained in:
derek 2020-07-12 23:17:56 -04:00
parent 5aa2a682ff
commit 195bf022bb

View file

@ -13,7 +13,7 @@ import {
GetSiteResponse, GetSiteResponse,
} from '../interfaces'; } from '../interfaces';
import { WebSocketService } from '../services'; import { WebSocketService } from '../services';
import { wsJsonToRes, toast } from '../utils'; import { wsJsonToRes, toast, getPageFromProps } from '../utils';
import { CommunityLink } from './community-link'; import { CommunityLink } from './community-link';
import { i18n } from '../i18next'; import { i18n } from '../i18next';
@ -32,7 +32,7 @@ export class Communities extends Component<any, CommunitiesState> {
private emptyState: CommunitiesState = { private emptyState: CommunitiesState = {
communities: [], communities: [],
loading: true, loading: true,
page: this.getPageFromProps(this.props), page: getPageFromProps(this.props),
}; };
constructor(props: any, context: any) { constructor(props: any, context: any) {
@ -50,19 +50,19 @@ export class Communities extends Component<any, CommunitiesState> {
WebSocketService.Instance.getSite(); WebSocketService.Instance.getSite();
} }
getPageFromProps(props: any): number {
return props.match.params.page ? Number(props.match.params.page) : 1;
}
componentWillUnmount() { componentWillUnmount() {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
} }
// Necessary for back button for some reason static getDerivedStateFromProps(props) {
componentWillReceiveProps(nextProps: any) { return {
if (nextProps.history.action == 'POP') { page: getPageFromProps(props),
this.state = this.emptyState; };
this.state.page = this.getPageFromProps(nextProps); }
componentDidUpdate(_, lastState) {
if (lastState.page !== this.state.page) {
this.setState({ loading: true });
this.refetch(); this.refetch();
} }
} }
@ -172,22 +172,17 @@ export class Communities extends Component<any, CommunitiesState> {
); );
} }
updateUrl() { updateUrl(paramUpdates: { page: number }) {
this.props.history.push(`/communities/page/${this.state.page}`); const page = paramUpdates.page || this.state.page;
this.props.history.push(`/communities/page/${page}`);
} }
nextPage(i: Communities) { nextPage(i: Communities) {
i.state.page++; i.updateUrl({ page: i.state.page + 1 });
i.setState(i.state);
i.updateUrl();
i.refetch();
} }
prevPage(i: Communities) { prevPage(i: Communities) {
i.state.page--; i.updateUrl({ page: i.state.page - 1 });
i.setState(i.state);
i.updateUrl();
i.refetch();
} }
handleUnsubscribe(communityId: number) { handleUnsubscribe(communityId: number) {