diff --git a/src/components/Growers/Growers.js b/src/components/Growers/Growers.js
index 3c830db2..75e7e9f1 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) => {
{pagination}
- {growersItems}
+
+ {isError ? (
+
+
+ Sorry, there has been an Internal Server Error. Please try again
+ later.
+
+
+ ) : (
+ growersItems
+ )}
+
{pagination}
diff --git a/src/components/Growers/Growers.styles.js b/src/components/Growers/Growers.styles.js
index 1500b6f9..a65503d6 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 afa8c0fa..7b22a248 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,