fix: added error handling for growers page

Greenstand · Oct 19, 2023 · 2b39fec · 2b39fec
1 parent 45510d7
commit 2b39fec
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/src/components/Growers/Growers.js b/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>
 

diff --git a/src/components/Growers/Growers.styles.js b/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`,

diff --git a/src/context/GrowerContext.js b/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,