From 2b39fec0ca54275ec9fea8f15a0948ff940faa05 Mon Sep 17 00:00:00 2001
From: Krithin Jay Pakshootra <krithinjaycode@gmail.com>
Date: Thu, 19 Oct 2023 14:48:21 +0800
Subject: [PATCH] fix: added error handling for growers page

---
 src/components/Growers/Growers.js        | 22 +++++++++++++--
 src/components/Growers/Growers.styles.js |  7 +++++
 src/context/GrowerContext.js             | 36 +++++++++++++++---------
 3 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/components/Growers/Growers.js b/src/components/Growers/Growers.js
index 3c830db25..75e7e9f1f 100644
--- 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
index 1500b6f99..a65503d62 100644
--- 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
index afa8c0faa..7b22a248d 100644
--- 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,