Implemented UI for showing error code and status message on failed AP…

…I calls
ECN · Jul 12, 2021 · 1931506 · 1931506
1 parent dc4a4cf
commit 1931506
Showing 1 changed file with 30 additions and 14 deletions.
diff --git a/src/components/AppView/AppView.js b/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/";
@@ -10,7 +10,7 @@ import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
 
-export default function AppView({ setDarkMode }){
+export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
@@ -24,29 +24,29 @@ export default function AppView({ setDarkMode }){
 	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}`
@@ -71,9 +71,9 @@ export default function AppView({ setDarkMode }){
 	}, [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);
@@ -109,10 +109,17 @@ export default function AppView({ setDarkMode }){
 				width: "40vw",
 			}
 		},
+		errorContainer: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			marginTop: theme.spacing(6)
+		}
 	});
 	const classes = useStyles();
 
-	return(
+	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
 				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
@@ -121,8 +128,17 @@ export default function AppView({ setDarkMode }){
 					setOpen={setQueueSelectorOpen}
 					value={selectedQueues}
 					setValue={setSelectedQueues}
-				/>
-				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
+				/>{error ? <Box classes={{ root: classes.errorContainer }}>
+					<Typography variant="h1">
+						{response.status}
+					</Typography>
+					<Typography variant="h3">
+						Something went wrong.
+					</Typography>
+					<Typography variant="h5">
+						{response.message}
+					</Typography>
+				</Box> : <ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />}
 			</Box>
 			<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 				{items.length === 0 ? null :