From 6afaf23e79925cfa387795fa4985b2931bac8285 Mon Sep 17 00:00:00 2001 From: Justin Campbell Date: Fri, 12 Mar 2021 17:24:03 -0500 Subject: [PATCH] Add error page to ItemView --- src/components/ItemView/ItemView.js | 77 +++++++++++++++++++---------- 1 file changed, 52 insertions(+), 25 deletions(-) diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js index e2650bb..0bedad7 100644 --- a/src/components/ItemView/ItemView.js +++ b/src/components/ItemView/ItemView.js @@ -1,19 +1,22 @@ import React, { useState, useEffect } from 'react'; import PropTypes from "prop-types"; -import { Paper, AppBar, Tab, makeStyles, useTheme } from '@material-ui/core'; +import { Paper, AppBar, Tab, makeStyles, useTheme, Box, Typography } from '@material-ui/core'; // Import these tab components from @material-ui/lab instead of @material-ui/core for automatic a11y props // See: https://material-ui.com/components/tabs/#experimental-api import { TabContext, TabList, TabPanel } from '@material-ui/lab'; +import SadFaceIcon from '@material-ui/icons/SentimentVeryDissatisfied'; import ItemMetadataView from "../ItemMetadataView" import ItemBodyView from "../ItemBodyView"; import ItemHeaderView from "../ItemHeaderView"; import { useItem, useItemSetter } from "../ItemProvider"; import { useToken } from "../AuthProvider/"; -export default function ItemView({ queue, number }){ +export default function ItemView() { + let { queue, number } = {queue: "test", number: 1}; // Set stateful variables const [activeTab, setActiveTab] = useState('Conversation'); const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(false); // Set contextual variables const activeItem = useItem(); @@ -21,13 +24,13 @@ export default function ItemView({ queue, number }){ const access_token = useToken(); // Get full Item from API - useEffect( _ => { + useEffect(_ => { (async _ => { - if (access_token === null){ + if (access_token === null) { return undefined; } - if (activeItem.queue === queue && activeItem.number == number){ + if (activeItem.queue === queue && activeItem.number == number) { return undefined; } @@ -39,8 +42,9 @@ export default function ItemView({ queue, number }){ const apiResponse = await fetch(`/api/${queue}/${number}`, requestOptions); - if (!apiResponse.ok){ + if (!apiResponse.ok) { console.error(`Fetching item ${queue}${number}. Got code ${apiResponse.status} (${apiResponse.statusText})`); + setError(true); return undefined; } @@ -61,6 +65,13 @@ export default function ItemView({ queue, number }){ }, "tabPanelPadding": { padding: `${theme.spacing(2)}px ${theme.spacing(2)}px` + }, + errorContainer: { + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + marginTop: theme.spacing(6) } }); const classes = useStyles(); @@ -69,25 +80,41 @@ export default function ItemView({ queue, number }){ setActiveTab(newValue); }; - return( - - - - - - - - - - - - - - - - - - + return ( + + {error ? ( + + + 4☹4 + + + Something went wrong. + + + {`Item ${queue}${number} could not be found.`} + + + ) : ( + <> + + + + + + + + + + + + + + + + + + + )} ); };