Add error page to ItemView

ECN · Mar 12, 2021 · 6afaf23 · 6afaf23
1 parent 322a075
commit 6afaf23
Showing 1 changed file with 52 additions and 25 deletions.
diff --git a/src/components/ItemView/ItemView.js b/src/components/ItemView/ItemView.js
@@ -1,33 +1,36 @@
 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();
 	const setActiveItem = useItemSetter();
 	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(
-		<Paper variant="outlined" classes={{root: classes.paperPadding}} square>
-			<ItemMetadataView item={activeItem} />
-			<TabContext value={activeTab}>
-				<AppBar position="relative" color="default" variant="outlined">
-					<TabList onChange={handleTabChange} variant="fullWidth">
-						<Tab label="Conversation" value="Conversation" />
-						<Tab label="Headers" value="Headers" />
-					</TabList>
-				</AppBar>
-
-				<TabPanel value="Conversation" classes={{ root: classes.tabPanelPadding }}>
-					<ItemBodyView sections={activeItem.content} loading={isLoading} />
-				</TabPanel>
-
-				<TabPanel value="Headers" classes={{ root: classes.tabPanelPadding }}>
-					<ItemHeaderView data={activeItem.headers} />
-				</TabPanel>
-			</TabContext>
+	return (
+		<Paper variant="outlined" classes={{ root: classes.paperPadding }} square>
+			{error ? (
+				<Box classes={{ root: classes.errorContainer }}>
+					<Typography variant="h1">
+						4☹4
+					</Typography>
+					<Typography variant="h3">
+						Something went wrong.
+					</Typography>
+					<Typography variant="h5">
+						{`Item ${queue}${number} could not be found.`}
+					</Typography>
+				</Box>
+			) : (
+				<>
+					<ItemMetadataView item={activeItem} />
+					<TabContext value={activeTab}>
+						<AppBar position="relative" color="default" variant="outlined">
+							<TabList onChange={handleTabChange} variant="fullWidth">
+								<Tab label="Conversation" value="Conversation" />
+								<Tab label="Headers" value="Headers" />
+							</TabList>
+						</AppBar>
+
+						<TabPanel value="Conversation" classes={{ root: classes.tabPanelPadding }}>
+							<ItemBodyView sections={activeItem.content} loading={isLoading} />
+						</TabPanel>
+
+						<TabPanel value="Headers" classes={{ root: classes.tabPanelPadding }}>
+							<ItemHeaderView data={activeItem.headers} />
+						</TabPanel>
+					</TabContext>
+				</>
+			)}
 		</Paper>
 	);
 };