Refactor to support ItemTableAppBar actions

src/components/AppView/AppView.js

@@ -3,13 +3,17 @@ import PropTypes from "prop-types";
 import { Box, makeStyles, Paper, Typography, useTheme } from "@material-ui/core";
 import { Route } from "react-router-dom";
 import clsx from "clsx";
+import ItemTableAppBarAction from "../ItemTableAppBarAction";
+import DarkModeIcon from '@material-ui/icons/Brightness4';
+import LightModeIcon from '@material-ui/icons/Brightness7';
+import LogoutIcon from '@material-ui/icons/ExitToApp';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 import ItemTableAppBar from "../ItemTableAppBar/";
 import ItemTable from "../ItemTable/";
 import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
-import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
 
 export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
@@ -144,10 +148,24 @@ export default function AppView({ setDarkMode }) {
 		);
 	}
 
+	const darkMode = theme.palette.type === "dark"
+	const itemtableappbarActions = [
+		<ItemTableAppBarAction
+			title={"Turn " + (theme.palette.type ? "off" : "on") + " dark mode"}
+			onClick={_ => setDarkMode(!darkMode)}
+			icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
+		/>,
+		<ItemTableAppBarAction
+			title="Logout"
+			onClick={_ => alert("Hazzah!")}
+			icon={<LogoutIcon />}
+		/>
+	]
+
 	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
-				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
+				<ItemTableAppBar title="webqueue2" actions={itemtableappbarActions} />
 				<QueueSelector
 					open={queueSelectorOpen}
 					setOpen={setQueueSelectorOpen}