feat: make searchParams handling more robust

Greenstand · Jan 30, 2023 · 96d02f5 · 96d02f5
1 parent 48d38c5
commit 96d02f5
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/src/context/CapturesContext.js b/src/context/CapturesContext.js
@@ -33,15 +33,15 @@ export const CapturesContext = createContext({
 });
 
 export function CapturesProvider(props) {
-  const { searchParams = [] } = props;
+  const { searchParams } = props;
 
   const {
     rowsPerPage: rowsPerPageParam = undefined,
     page: pageParam = undefined,
     order: orderParam = undefined,
     orderBy: orderByParam = undefined,
     ...filterParams
-  } = Object.fromEntries(searchParams);
+  } = Object.fromEntries(searchParams || []);
 
   const [captures, setCaptures] = useState([]);
   const [captureCount, setCaptureCount] = useState(0);
@@ -72,6 +72,10 @@ export function CapturesProvider(props) {
   }, [filter, rowsPerPage, page, order, orderBy]);
 
   useEffect(() => {
+    if (!searchParams) {
+      return;
+    }
+
     const {
       rowsPerPage: rowsPerPageParam = undefined,
       page: pageParam = undefined,
@@ -86,7 +90,7 @@ export function CapturesProvider(props) {
     setRowsPerPage(Number(rowsPerPageParam) || DEFAULT_ROWS_PER_PAGE);
     setOrder(orderParam || DEFAULT_ORDER);
     setOrderBy(orderByParam || DEFAULT_ORDER_BY);
-  }, [searchParams, location]);
+  }, [searchParams]);
 
   const getCaptures = async (abortController) => {
     log.debug('4 - load captures');

diff --git a/src/context/GrowerContext.js b/src/context/GrowerContext.js
@@ -3,7 +3,6 @@ import FilterGrower from 'models/FilterGrower';
 import api from 'api/growers';
 import { handleQuerySearchParams } from '../common/utils';
 import * as loglevel from 'loglevel';
-import { useLocation } from 'react-router-dom';
 
 const log = loglevel.getLogger('context/GrowerContext');
 
@@ -31,13 +30,13 @@ export const GrowerContext = createContext({
 });
 
 export function GrowerProvider(props) {
-  const { searchParams = [] } = props;
+  const { searchParams } = props;
 
   const {
     pageSize: pageSizeParam = undefined,
     currentPage: currentPageParam = undefined,
     ...filterParams
-  } = Object.fromEntries(searchParams);
+  } = Object.fromEntries(searchParams || []);
 
   const [growers, setGrowers] = useState([]);
   const [pageSize, setPageSize] = useState(
@@ -52,14 +51,15 @@ export function GrowerProvider(props) {
   );
   const [isLoading, setIsLoading] = useState(false);
   const [totalGrowerCount, setTotalGrowerCount] = useState(null);
-  const location = useLocation();
 
   useEffect(() => {
-    handleQuerySearchParams({
-      pageSize,
-      currentPage,
-      ...filter.toSearchParams(),
-    });
+    if (searchParams) {
+      handleQuerySearchParams({
+        pageSize,
+        currentPage,
+        ...filter.toSearchParams(),
+      });
+    }
 
     const abortController = new AbortController();
     load({ signal: abortController.signal });
@@ -68,6 +68,10 @@ export function GrowerProvider(props) {
   }, [filter, pageSize, currentPage]);
 
   useEffect(() => {
+    if (!searchParams) {
+      return;
+    }
+
     const {
       pageSize: pageSizeParam = undefined,
       currentPage: currentPageParam = undefined,
@@ -76,7 +80,7 @@ export function GrowerProvider(props) {
     setFilter(FilterGrower.fromSearchParams(filterParams));
     setPageSize(Number(pageSizeParam) || DEFAULT_PAGE_SIZE);
     setCurrentPage(Number(currentPageParam) || DEFAULT_CURRENT_PAGE);
-  }, [searchParams, location]);
+  }, [searchParams]);
 
   // EVENT HANDLERS
 

diff --git a/src/context/VerifyContext.js b/src/context/VerifyContext.js
@@ -37,13 +37,13 @@ export const VerifyContext = createContext({
 });
 
 export function VerifyProvider(props) {
-  const { searchParams = [] } = props;
+  const { searchParams } = props;
 
   const {
     pageSize: pageSizeParam = undefined,
     currentPage: currentPageParam = undefined,
     ...filterParams
-  } = Object.fromEntries(searchParams);
+  } = Object.fromEntries(searchParams || []);
 
   const [captureImages, setCaptureImages] = useState([]);
   const [captureImagesUndo, setCaptureImagesUndo] = useState([]);
@@ -73,11 +73,13 @@ export function VerifyProvider(props) {
 
   /* load captures when the page or page size changes */
   useEffect(() => {
-    handleQuerySearchParams({
-      pageSize,
-      currentPage,
-      ...filter.toSearchParams(),
-    });
+    if (searchParams) {
+      handleQuerySearchParams({
+        pageSize,
+        currentPage,
+        ...filter.toSearchParams(),
+      });
+    }
 
     const abortController = new AbortController();
     setCaptureImages([]);
@@ -86,6 +88,10 @@ export function VerifyProvider(props) {
   }, [filter, pageSize, currentPage]);
 
   useEffect(() => {
+    if (!searchParams) {
+      return;
+    }
+
     const {
       pageSize: pageSizeParam = undefined,
       currentPage: currentPageParam = undefined,
@@ -100,7 +106,7 @@ export function VerifyProvider(props) {
     );
     setPageSize(Number(pageSizeParam) || DEFAULT_PAGE_SIZE);
     setCurrentPage(Number(currentPageParam) || DEFAULT_CURRENT_PAGE);
-  }, [searchParams, location]);
+  }, [searchParams]);
 
   // STATE HELPER FUNCTIONS