Refactor error message state variable to support dynamic error messag…

…es and move failure code to prevent bad data

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 }) {
 			<Box classes={{ root: classes.errorContainer }}>
 				<ErrorOutlineIcon classes={{ root: classes.errorIcon }} />
 				<Typography align="center" variant="h3">
-					{`MESSAGE`}
+					{`${errorResponse.message}`}
 				</Typography>
 				<Typography align="center" variant="h5">
-					{`Error Code: CODE`}
+					{`Error Code: ${errorResponse.code} (${errorResponse.description})`}
 				</Typography>
 			</Box>
 		);