From 74d139cf958cd14e21d8c06511d9d9aa661bcc3b Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Mon, 12 Jul 2021 17:43:55 -0400 Subject: [PATCH 1/8] Fixed missing bracket --- src/components/ItemTable/ItemTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index e124b19..399afb7 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/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( { From dc4a4cf0321533f7b75fd4c27e64a637b64a39a1 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Mon, 12 Jul 2021 17:48:45 -0400 Subject: [PATCH 2/8] Implemented code for getting response info when error occurs --- src/components/AppView/AppView.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index bd31b21..4897ad7 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -18,6 +18,8 @@ export default function AppView({ setDarkMode }){ 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(); @@ -49,7 +51,7 @@ export default function AppView({ setDarkMode }){ ? queuesToLoad += queue.name : queuesToLoad += `+${queue.name}` )); - } + } let myHeaders = new Headers(); myHeaders.append("Authorization", `Bearer ${access_token}`); @@ -58,8 +60,13 @@ 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]); @@ -109,7 +116,7 @@ export default function AppView({ setDarkMode }){ - ( <> - - )} From 1931506e4fd209719459a96c80cc35240ef40d60 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Mon, 12 Jul 2021 17:54:57 -0400 Subject: [PATCH 3/8] Implemented UI for showing error code and status message on failed API calls --- src/components/AppView/AppView.js | 44 +++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 14 deletions(-) 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 : From 305d69411a9c30695061302b66538109c3f848d1 Mon Sep 17 00:00:00 2001 From: wrigh393 Date: Wed, 14 Jul 2021 10:03:53 -0400 Subject: [PATCH 4/8] Added appropriate icon for error UI; reformatted error UI text to emphasisze the proper information. --- src/components/AppView/AppView.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index f6762d2..4e6e088 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -9,6 +9,7 @@ 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 }) { // Create stateful variables. @@ -115,6 +116,9 @@ export default function AppView({ setDarkMode }) { alignItems: "center", justifyContent: "center", marginTop: theme.spacing(6) + }, + errorIcon: { + fontSize: "10rem" } }); const classes = useStyles(); @@ -129,14 +133,12 @@ export default function AppView({ setDarkMode }) { value={selectedQueues} setValue={setSelectedQueues} />{error ? - - {response.status} - - - Something went wrong. + + + {`${response.message}`} - - {response.message} + + {`Error Code:${response.status}`} : } From 1fad3bd73fc45dad4aeb43c521ddca579aa074f8 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 14 Jul 2021 13:22:21 -0400 Subject: [PATCH 5/8] Remove unused state variable --- src/components/AppView/AppView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 4e6e088..0e2679d 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -20,7 +20,6 @@ export default function AppView({ setDarkMode }) { 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(); From 759b164cbe0c90bffea57dfbf45df9d4736da690 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 14 Jul 2021 13:24:07 -0400 Subject: [PATCH 6/8] Revert "Remove unused state variable" This reverts commit 1fad3bd73fc45dad4aeb43c521ddca579aa074f8. --- src/components/AppView/AppView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 0e2679d..4e6e088 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -20,6 +20,7 @@ export default function AppView({ setDarkMode }) { 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(); From 99e8086720b180980d1b9d4050bbdd55c87dc065 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 14 Jul 2021 13:27:14 -0400 Subject: [PATCH 7/8] Refactor error message into its own component and cleanup ternary --- src/components/AppView/AppView.js | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index 4e6e088..cf8f0e5 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -123,6 +123,20 @@ export default function AppView({ setDarkMode }) { }); const classes = useStyles(); + const ErrorMessage = _ => { + return ( + + + + {`MESSAGE`} + + + {`Error Code: CODE`} + + + ); + } + return ( @@ -132,15 +146,11 @@ export default function AppView({ setDarkMode }) { setOpen={setQueueSelectorOpen} value={selectedQueues} setValue={setSelectedQueues} - />{error ? - - - {`${response.message}`} - - - {`Error Code:${response.status}`} - - : } + /> + { error + ? + : + } {items.length === 0 ? null : From 861aea2f1895eaeca880075b601a82adeb23de0c Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Wed, 14 Jul 2021 13:41:09 -0400 Subject: [PATCH 8/8] Refactor error message state variable to support dynamic error messages and move failure code to prevent bad data --- src/components/AppView/AppView.js | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js index cf8f0e5..acc139a 100644 --- a/src/components/AppView/AppView.js +++ b/src/components/AppView/AppView.js @@ -20,7 +20,7 @@ export default function AppView({ setDarkMode }) { const [queueSelectorOpen, setQueueSelectorOpen] = useState(false); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false) - const [response, setResponse] = useState({ status: '', message: '' }) + const [errorResponse, setErrorResponse] = useState({ code: "", description: "", message: "" }) const access_token = useToken(); @@ -59,15 +59,22 @@ export default function AppView({ setDarkMode }) { let requestOptions = { headers: myHeaders }; const apiResponse = await fetch(`${process.env.PUBLIC_URL}/api/data/${queuesToLoad}`, requestOptions); - const queueJson = await apiResponse.json(); - if (apiResponse.ok) { - setQueues(queueJson); - setIsLoading(false) - } else { - setResponse({ status: apiResponse.status, message: apiResponse.statusText }) - setError(true) + 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]); @@ -128,10 +135,10 @@ export default function AppView({ setDarkMode }) { - {`MESSAGE`} + {`${errorResponse.message}`} - {`Error Code: CODE`} + {`Error Code: ${errorResponse.code} (${errorResponse.description})`} );