diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 4897ad7..f6762d2 100644 --- 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,17 +24,17 @@ 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; } @@ -42,11 +42,11 @@ export default function AppView({ setDarkMode }){ 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 ( @@ -121,8 +128,17 @@ export default function AppView({ setDarkMode }){ setOpen={setQueueSelectorOpen} value={selectedQueues} setValue={setSelectedQueues} - /> - + />{error ? + + {response.status} + + + Something went wrong. + + + {response.message} + + : } {items.length === 0 ? null :