diff options
Diffstat (limited to 'ui/src/components/main.tsx')
-rw-r--r-- | ui/src/components/main.tsx | 86 |
1 files changed, 44 insertions, 42 deletions
diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 9063a039..0560e802 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -70,6 +70,20 @@ interface MainState { page: number; } +interface MainProps { + listingType: ListingType; + dataType: DataType; + sort: SortType; + page: number; +} + +interface UrlParams { + listingType?: string; + dataType?: string; + sort?: string; + page?: number; +} + export class Main extends Component<any, MainState> { private subscription: Subscription; private emptyState: MainState = { @@ -141,17 +155,23 @@ export class Main extends Component<any, MainState> { this.subscription.unsubscribe(); } - // Necessary for back button for some reason - componentWillReceiveProps(nextProps: any) { + static getDerivedStateFromProps(props: any): MainProps { + return { + listingType: getListingTypeFromProps(props), + dataType: getDataTypeFromProps(props), + sort: getSortTypeFromProps(props), + page: getPageFromProps(props), + }; + } + + componentDidUpdate(_: any, lastState: MainState) { if ( - nextProps.history.action == 'POP' || - nextProps.history.action == 'PUSH' + lastState.listingType !== this.state.listingType || + lastState.dataType !== this.state.dataType || + lastState.sort !== this.state.sort || + lastState.page !== this.state.page ) { - this.state.listingType = getListingTypeFromProps(nextProps); - this.state.dataType = getDataTypeFromProps(nextProps); - this.state.sort = getSortTypeFromProps(nextProps); - this.state.page = getPageFromProps(nextProps); - this.setState(this.state); + this.setState({ loading: true }); this.fetchData(); } } @@ -257,12 +277,17 @@ export class Main extends Component<any, MainState> { ); } - updateUrl() { - let listingTypeStr = ListingType[this.state.listingType].toLowerCase(); - let dataTypeStr = DataType[this.state.dataType].toLowerCase(); - let sortStr = SortType[this.state.sort].toLowerCase(); + updateUrl(paramUpdates: UrlParams) { + const listingTypeStr = + paramUpdates.listingType || + ListingType[this.state.listingType].toLowerCase(); + const dataTypeStr = + paramUpdates.dataType || DataType[this.state.dataType].toLowerCase(); + const sortStr = + paramUpdates.sort || SortType[this.state.sort].toLowerCase(); + const page = paramUpdates.page || this.state.page; 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 +554,27 @@ export class Main extends Component<any, MainState> { } nextPage(i: Main) { - i.state.page++; - i.state.loading = true; - i.setState(i.state); - i.updateUrl(); - i.fetchData(); + i.updateUrl({ page: this.state.page + 1 }); window.scrollTo(0, 0); } prevPage(i: Main) { - i.state.page--; - i.state.loading = true; - i.setState(i.state); - i.updateUrl(); - i.fetchData(); + i.updateUrl({ page: this.state.page - 1 }); window.scrollTo(0, 0); } handleSortChange(val: SortType) { - this.state.sort = val; - this.state.page = 1; - this.state.loading = true; - this.setState(this.state); - this.updateUrl(); - this.fetchData(); + this.updateUrl({ sort: SortType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } handleListingTypeChange(val: ListingType) { - this.state.listingType = val; - this.state.page = 1; - this.state.loading = true; - this.setState(this.state); - this.updateUrl(); - this.fetchData(); + this.updateUrl({ listingType: ListingType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } handleDataTypeChange(val: DataType) { - this.state.dataType = val; - this.state.page = 1; - this.state.loading = true; - this.setState(this.state); - this.updateUrl(); - this.fetchData(); + this.updateUrl({ dataType: DataType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } |