LemmyNet/lemmy
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy.git synced 2024-12-23 11:21:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui.components.main: fix duplicate requests

Browse source 
Deprecate componentWillReceiveProps for getDerivedStateFromProps
This commit is contained in:
derek 2020-07-12 22:57:02 -04:00
parent f1d01f4fa0
commit 2640efb3f0
1 changed files with 37 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
ui/src/components/main.tsx vendored
View file

@ -141,17 +141,23 @@ export class Main extends Component<any, MainState> {
this.subscription.unsubscribe(); this.subscription.unsubscribe();
} }
// Necessary for back button for some reason static getDerivedStateFromProps(props) {
componentWillReceiveProps(nextProps: any) { return {
listingType: getListingTypeFromProps(props),
dataType: getDataTypeFromProps(props),
sort: getSortTypeFromProps(props),
page: getPageFromProps(props),
};
}
componentDidUpdate(_, lastState) {
if ( if (
nextProps.history.action == 'POP' || lastState.listingType !== this.state.listingType ||
nextProps.history.action == 'PUSH' lastState.dataType !== this.state.dataType ||
lastState.sort !== this.state.sort ||
lastState.page !== this.state.page
) { ) {
this.state.listingType = getListingTypeFromProps(nextProps); this.setState({ loading: true });
this.state.dataType = getDataTypeFromProps(nextProps);
this.state.sort = getSortTypeFromProps(nextProps);
this.state.page = getPageFromProps(nextProps);
this.setState(this.state);
this.fetchData(); this.fetchData();
} }
} }
@ -257,12 +263,24 @@ export class Main extends Component<any, MainState> {
); );
} }
updateUrl() { updateUrl(paramUpdates: {
let listingTypeStr = ListingType[this.state.listingType].toLowerCase(); listing_type?: string;
let dataTypeStr = DataType[this.state.dataType].toLowerCase(); data_type?: string;
let sortStr = SortType[this.state.sort].toLowerCase(); sort?: string;
page?: number;
}) {
const listingTypeStr =
paramUpdates.listing_type ||
ListingType[getListingTypeFromProps(this.props)].toLowerCase();
const dataTypeStr =
paramUpdates.data_type ||
DataType[getDataTypeFromProps(this.props)].toLowerCase();
const sortStr =
paramUpdates.sort ||
SortType[getSortTypeFromProps(this.props)].toLowerCase();
const page = paramUpdates.page || getPageFromProps(this.props);
this.props.history.push( this.props.history.push(
`/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${this.state.page}` `/home/data_type/${dataTypeStr}/listing_type/${listingTypeStr}/sort/${sortStr}/page/${page}`
); );
} }
@ -529,50 +547,27 @@ export class Main extends Component<any, MainState> {
} }
nextPage(i: Main) { nextPage(i: Main) {
i.state.page++; i.updateUrl({ page: this.state.page + 1 });
i.state.loading = true;
i.setState(i.state);
i.updateUrl();
i.fetchData();
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
prevPage(i: Main) { prevPage(i: Main) {
i.state.page--; i.updateUrl({ page: this.state.page - 1 });
i.state.loading = true;
i.setState(i.state);
i.updateUrl();
i.fetchData();
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
handleSortChange(val: SortType) { handleSortChange(val: SortType) {
this.state.sort = val; this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 });
this.state.page = 1;
this.state.loading = true;
this.setState(this.state);
this.updateUrl();
this.fetchData();
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
handleListingTypeChange(val: ListingType) { handleListingTypeChange(val: ListingType) {
this.state.listingType = val; this.updateUrl({ listing_type: ListingType[val].toLowerCase(), page: 1 });
this.state.page = 1;
this.state.loading = true;
this.setState(this.state);
this.updateUrl();
this.fetchData();
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }
handleDataTypeChange(val: DataType) { handleDataTypeChange(val: DataType) {
this.state.dataType = val; this.updateUrl({ data_type: DataType[val].toLowerCase(), page: 1 });
this.state.page = 1;
this.state.loading = true;
this.setState(this.state);
this.updateUrl();
this.fetchData();
window.scrollTo(0, 0); window.scrollTo(0, 0);
} }