From 2640efb3f0881f7ae66698a3b0b2713549be1d8d Mon Sep 17 00:00:00 2001 From: derek Date: Sun, 12 Jul 2020 22:57:02 -0400 Subject: ui.components.main: fix duplicate requests Deprecate componentWillReceiveProps for getDerivedStateFromProps --- ui/src/components/main.tsx | 79 ++++++++++++++++++++++------------------------ 1 file changed, 37 insertions(+), 42 deletions(-) (limited to 'ui/src/components/main.tsx') diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 9063a039..3946132f 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -141,17 +141,23 @@ export class Main extends Component { this.subscription.unsubscribe(); } - // Necessary for back button for some reason - componentWillReceiveProps(nextProps: any) { + static getDerivedStateFromProps(props) { + return { + listingType: getListingTypeFromProps(props), + dataType: getDataTypeFromProps(props), + sort: getSortTypeFromProps(props), + page: getPageFromProps(props), + }; + } + + componentDidUpdate(_, lastState) { 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 +263,24 @@ export class Main extends Component { ); } - updateUrl() { - let listingTypeStr = ListingType[this.state.listingType].toLowerCase(); - let dataTypeStr = DataType[this.state.dataType].toLowerCase(); - let sortStr = SortType[this.state.sort].toLowerCase(); + updateUrl(paramUpdates: { + listing_type?: string; + data_type?: string; + 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( - `/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 { } 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({ listing_type: 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({ data_type: DataType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } -- cgit v1.2.3 From 602993ac761e1d1bacbb0acb8d1fdc3625828acf Mon Sep 17 00:00:00 2001 From: derek Date: Mon, 13 Jul 2020 00:20:36 -0400 Subject: ui.components.main: simplify url update logic --- ui/src/components/main.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'ui/src/components/main.tsx') diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 3946132f..0460a639 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -271,14 +271,12 @@ export class Main extends Component { }) { const listingTypeStr = paramUpdates.listing_type || - ListingType[getListingTypeFromProps(this.props)].toLowerCase(); + ListingType[this.state.listingType].toLowerCase(); const dataTypeStr = - paramUpdates.data_type || - DataType[getDataTypeFromProps(this.props)].toLowerCase(); + paramUpdates.data_type || DataType[this.state.dataType].toLowerCase(); const sortStr = - paramUpdates.sort || - SortType[getSortTypeFromProps(this.props)].toLowerCase(); - const page = paramUpdates.page || getPageFromProps(this.props); + 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/${page}` ); -- cgit v1.2.3 From ef62f4698a62e996bcd54faa1f360eff89b8ac4b Mon Sep 17 00:00:00 2001 From: derek Date: Tue, 14 Jul 2020 01:13:43 -0400 Subject: ui.components: fix ts types, move user pagination to user details --- ui/src/components/main.tsx | 33 +++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) (limited to 'ui/src/components/main.tsx') diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index 0460a639..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 { private subscription: Subscription; private emptyState: MainState = { @@ -141,7 +155,7 @@ export class Main extends Component { this.subscription.unsubscribe(); } - static getDerivedStateFromProps(props) { + static getDerivedStateFromProps(props: any): MainProps { return { listingType: getListingTypeFromProps(props), dataType: getDataTypeFromProps(props), @@ -150,7 +164,7 @@ export class Main extends Component { }; } - componentDidUpdate(_, lastState) { + componentDidUpdate(_: any, lastState: MainState) { if ( lastState.listingType !== this.state.listingType || lastState.dataType !== this.state.dataType || @@ -263,17 +277,12 @@ export class Main extends Component { ); } - updateUrl(paramUpdates: { - listing_type?: string; - data_type?: string; - sort?: string; - page?: number; - }) { + updateUrl(paramUpdates: UrlParams) { const listingTypeStr = - paramUpdates.listing_type || + paramUpdates.listingType || ListingType[this.state.listingType].toLowerCase(); const dataTypeStr = - paramUpdates.data_type || DataType[this.state.dataType].toLowerCase(); + paramUpdates.dataType || DataType[this.state.dataType].toLowerCase(); const sortStr = paramUpdates.sort || SortType[this.state.sort].toLowerCase(); const page = paramUpdates.page || this.state.page; @@ -560,12 +569,12 @@ export class Main extends Component { } handleListingTypeChange(val: ListingType) { - this.updateUrl({ listing_type: ListingType[val].toLowerCase(), page: 1 }); + this.updateUrl({ listingType: ListingType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } handleDataTypeChange(val: DataType) { - this.updateUrl({ data_type: DataType[val].toLowerCase(), page: 1 }); + this.updateUrl({ dataType: DataType[val].toLowerCase(), page: 1 }); window.scrollTo(0, 0); } -- cgit v1.2.3