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,64 +9,79 @@ 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 [errorResponse, setErrorResponse] = useState({ code: "", description: "", 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}`);
 			let requestOptions = { headers: myHeaders };
 
 			const apiResponse = await fetch(`${process.env.PUBLIC_URL}/api/data/${queuesToLoad}`, requestOptions);
-			const queueJson = await apiResponse.json();
 
+			if (!apiResponse.ok) {
+				console.error(`Fetching queues failed. Got code ${apiResponse.status} (${apiResponse.statusText})`);
+				const errorMessageJSON = await apiResponse.json();
+				setErrorResponse({
+					code: apiResponse.status,
+					description: apiResponse.statusText,
+					message: errorMessageJSON.message ? errorMessageJSON.message : ""
+				})
+				setError(true);
+				return undefined;
+			}
+
+			const queueJson = await apiResponse.json();
 			setQueues(queueJson);
 			setIsLoading(false)
 		})();
 	}, [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 +117,61 @@ 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(
+	const ErrorMessage = _ => {
+		return (
+			<Box classes={{ root: classes.errorContainer }}>
+				<ErrorOutlineIcon classes={{ root: classes.errorIcon }} />
+				<Typography align="center" variant="h3">
+					{`${errorResponse.message}`}
+				</Typography>
+				<Typography align="center" variant="h5">
+					{`Error Code: ${errorResponse.code} (${errorResponse.description})`}
+				</Typography>
+			</Box>
+		);
+	}
+
+	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
+					? <ErrorMessage />
+					: <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(
         {