From 99e8086720b180980d1b9d4050bbdd55c87dc065 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@purdue.edu>
Date: Wed, 14 Jul 2021 13:27:14 -0400
Subject: [PATCH] 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 (
+			<Box classes={{ root: classes.errorContainer }}>
+				<ErrorOutlineIcon classes={{ root: classes.errorIcon }} />
+				<Typography align="center" variant="h3">
+					{`MESSAGE`}
+				</Typography>
+				<Typography align="center" variant="h5">
+					{`Error Code: CODE`}
+				</Typography>
+			</Box>
+		);
+	}
+
 	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
@@ -132,15 +146,11 @@ export default function AppView({ setDarkMode }) {
 					setOpen={setQueueSelectorOpen}
 					value={selectedQueues}
 					setValue={setSelectedQueues}
-				/>{error ? <Box classes={{ root: classes.errorContainer }}>
-					<ErrorOutlineIcon classes={{ root: classes.errorIcon }} />
-					<Typography align="center" variant="h3">
-						{`${response.message}`}
-					</Typography>
-					<Typography align="center" variant="h5">
-						{`Error Code:${response.status}`}
-					</Typography>
-				</Box> : <ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />}
+				/>
+				{ error
+					? <ErrorMessage />
+					: <ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />
+				}
 			</Box>
 			<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 				{items.length === 0 ? null :