Refactor error message into its own component and cleanup ternary

ECN · Jul 14, 2021 · 99e8086 · 99e8086
1 parent 759b164
commit 99e8086
Showing 1 changed file with 19 additions and 9 deletions.
diff --git 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 :