Feature handle api status

src/components/AppView/AppView.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { Box, makeStyles, Paper, useTheme } from "@material-ui/core";
+import { Box, makeStyles, Paper, Typography, useTheme } from "@material-ui/core";
 import { Route } from "react-router-dom";
 import clsx from "clsx";
 import ItemTableAppBar from "../ItemTableAppBar/";
@@ -9,47 +9,50 @@ import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
-export default function AppView({ setDarkMode }){
+export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
 	const [items, setItems] = useState([]);
 	const [selectedQueues, setSelectedQueues] = useState([]);
 	const [queueSelectorOpen, setQueueSelectorOpen] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState(false)
+	const [response, setResponse] = useState({ status: '', message: '' })
 
 	const access_token = useToken();
 
 	// Get Queues from API.
-	useEffect( _ => {
-		(async function getQueues(){
-			if (access_token === null){
+	useEffect(_ => {
+		(async function getQueues() {
+			if (access_token === null) {
 				return undefined;
 			}
 
-			if (queueSelectorOpen){
+			if (queueSelectorOpen) {
 				return undefined;
 			}
 
-			if (selectedQueues.length === 0){
+			if (selectedQueues.length === 0) {
 				setQueues([])
 				return undefined;
 			}
 
 			setIsLoading(true);
 			let queuesToLoad = "";
 
-			if (selectedQueues.length === 1){
+			if (selectedQueues.length === 1) {
 				queuesToLoad = selectedQueues[0].name;
 			}
 			else {
-				selectedQueues.forEach( (queue, index) => (
+				selectedQueues.forEach((queue, index) => (
 					index === 0
 						? queuesToLoad += queue.name
 						: queuesToLoad += `+${queue.name}`
 				));
-			}			
+			}
 
 			let myHeaders = new Headers();
 			myHeaders.append("Authorization", `Bearer ${access_token}`);
@@ -58,15 +61,20 @@ export default function AppView({ setDarkMode }){
 			const apiResponse = await fetch(`${process.env.PUBLIC_URL}/api/data/${queuesToLoad}`, requestOptions);
 			const queueJson = await apiResponse.json();
 
-			setQueues(queueJson);
-			setIsLoading(false)
+			if (apiResponse.ok) {
+				setQueues(queueJson);
+				setIsLoading(false)
+			} else {
+				setResponse({ status: apiResponse.status, message: apiResponse.statusText })
+				setError(true)
+			}
 		})();
 	}, [selectedQueues, access_token, queueSelectorOpen]);
 
 	// Populate items array.
-	useEffect( _ => {
+	useEffect(_ => {
 		let tempItems = [];
-		for (let queue of queues){
+		for (let queue of queues) {
 			tempItems = tempItems.concat(queue.items);
 		}
 		setItems(tempItems);
@@ -102,34 +110,51 @@ export default function AppView({ setDarkMode }){
 				width: "40vw",
 			}
 		},
+		errorContainer: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			marginTop: theme.spacing(6)
+		},
+		errorIcon: {
+			fontSize: "10rem"
+		}
 	});
 	const classes = useStyles();
 
-	return(
+	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-				<QueueSelector 
+				<QueueSelector
 					open={queueSelectorOpen}
 					setOpen={setQueueSelectorOpen}
 					value={selectedQueues}
 					setValue={setSelectedQueues}
-				/>
-				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
+				/>{error ? <Box classes={{ root: classes.errorContainer }}>
+					<ErrorOutlineIcon classes={{ root: classes.errorIcon }} />
+					<Typography align="center" variant="h3">
+						{`${response.message}`}
+					</Typography>
+					<Typography align="center" variant="h5">
+						{`Error Code:${response.status}`}
+					</Typography>
+				</Box> : <ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />}
 			</Box>
 			<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 				{items.length === 0 ? null :
 					<Route
 						path="/:queue/:number"
 						render={({ match }) => (
 							<>
-								<ItemViewAppBar 
-									title={`${match.params.queue} ${match.params.number}`} 
+								<ItemViewAppBar
+									title={`${match.params.queue} ${match.params.number}`}
 									setSidebarOpen={setSidebarOpen}
 								/>
-								<ItemView 
-									queue={match.params.queue} 
-									number={match.params.number} 
+								<ItemView
+									queue={match.params.queue}
+									number={match.params.number}
 								/>
 							</>
 						)}

src/components/ItemTable/ItemTable.js

@@ -68,7 +68,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
             { Header: 'Last Updated', accessor: 'last_updated', sortInverted: true },
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
-            { Header: 'Date Received', accessor: 'date_received', sortInverted: true ,
+            { Header: 'Date Received', accessor: 'date_received', sortInverted: true , }
         ], []);
     const tableInstance = useTable(
         {