From 2640efb3f0881f7ae66698a3b0b2713549be1d8d Mon Sep 17 00:00:00 2001
From: derek <wwsage@gmail.com>
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<any, MainState> {
     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<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: {
+    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<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({ 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 <wwsage@gmail.com>
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<any, MainState> {
   }) {
     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 <wwsage@gmail.com>
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<any, MainState> {
   private subscription: Subscription;
   private emptyState: MainState = {
@@ -141,7 +155,7 @@ export class Main extends Component<any, MainState> {
     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<any, MainState> {
     };
   }
 
-  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<any, MainState> {
     );
   }
 
-  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<any, MainState> {
   }
 
   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

