Added error handling for Growers page

src/api/growers.js

@@ -32,6 +32,9 @@ export default {
         offset: skip,
       };
 
+      console.log('filter - ', filter);
+      console.log(makeQueryString(growerFilter));
+
       const query = `${QUERY_API}/v2/growers${
         growerFilter ? `?${makeQueryString(growerFilter)}` : ''
       }`;

src/components/CaptureFilter.js

@@ -125,6 +125,8 @@ function Filter(props) {
       organization_id: organizationId,
       tokenId: tokenId.trim(),
     };
+
+    console.log('filter -', test);
     const filter = new FilterModel(test);
 
     props.onSubmit && props.onSubmit(filter);

src/components/Growers/Growers.js

@@ -1,7 +1,7 @@
 /*
  * Grower page
  */
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
 import { TablePagination, Typography, Tooltip, Box } from '@material-ui/core';
 import Grower from './Grower';
 import GrowerDetail from '../GrowerDetail';
@@ -17,6 +17,13 @@ const Growers = (props) => {
   const growerContext = useContext(GrowerContext);
   const [isDetailShown, setDetailShown] = useState(false);
   const [growerDetail, setGrowerDetail] = useState({});
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    if (!growerContext.isLoading && growerContext.error) {
+      setIsError(true);
+    }
+  }, [growerContext.isLoading]);
 
   function handlePageChange(e, page) {
     growerContext.changeCurrentPage(page);
@@ -98,7 +105,18 @@ const Growers = (props) => {
         <Box>{pagination}</Box>
       </Box>
 
-      <Box className={classes.items}>{growersItems}</Box>
+      <Box className={classes.items}>
+        {isError ? (
+          <Box className={classes.errorBox}>
+            <Typography>
+              Sorry, there has been an Internal Server Error. Please try again
+              later.
+            </Typography>
+          </Box>
+        ) : (
+          growersItems
+        )}
+      </Box>
 
       <Box className={classes.pagination}>{pagination}</Box>
 

src/components/Growers/Growers.styles.js

@@ -8,6 +8,13 @@ const useStyle = makeStyles((theme) => ({
     cursor: 'pointer',
     margin: '0.5rem',
   },
+  errorBox: {
+    width: '100%',
+    height: '70vh',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   cardContent: {
     padding: 0,
     height: `${GROWER_IMAGE_SIZE}px`,

src/context/GrowerContext.js

@@ -39,6 +39,7 @@ export function GrowerProvider(props) {
   );
   const [isLoading, setIsLoading] = useState(false);
   const [totalGrowerCount, setTotalGrowerCount] = useState(null);
+  const [isError, setIsError] = useState(false);
 
   useEffect(() => {
     const abortController = new AbortController();
@@ -70,19 +71,27 @@ export function GrowerProvider(props) {
     const pageNumber = currentPage;
 
     //set correct values for organization_id, an array of uuids for ALL_ORGANIZATIONS or a uuid string if provided
-    const finalFilter = setOrganizationFilter(filter, orgId, orgList);
-
-    const { total, grower_accounts } = await api.getGrowers(
-      {
-        skip: pageNumber * pageSize,
-        rowsPerPage: pageSize,
-        filter: new FilterGrower(finalFilter),
-      },
-      abortController
-    );
-    setCount(total);
-    setGrowers(grower_accounts);
-    setIsLoading(false);
+    try {
+      const finalFilter = setOrganizationFilter(filter, orgId, orgList);
+
+      const { total, grower_accounts } = await api.getGrowers(
+        {
+          skip: pageNumber * pageSize,
+          rowsPerPage: pageSize,
+          filter: new FilterGrower(finalFilter),
+        },
+        abortController
+      );
+
+      setCount(total);
+      setGrowers(grower_accounts);
+      setIsLoading(false);
+    } catch (err) {
+      console.log('error status', err.status);
+
+      setIsError(true);
+      setIsLoading(false);
+    }
   };
 
   const getWallets = async (name, pageNumber) => {
@@ -156,6 +165,7 @@ export function GrowerProvider(props) {
   };
 
   const value = {
+    error: isError,
     growers,
     pageSize,
     count,