From 0d01e57a6cd0d1e13776e3454cfc161c4b6bc42d Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 7 Apr 2021 15:57:33 -0400
Subject: [PATCH 01/13] Created ItemAppBar component and related files.

---
 src/components/ItemAppBar/ItemAppBar.js       | 33 +++++++++++++++++++
 .../ItemAppBar/ItemAppBar.stories.mdx         |  0
 src/components/ItemAppBar/index.js            |  3 ++
 3 files changed, 36 insertions(+)
 create mode 100644 src/components/ItemAppBar/ItemAppBar.js
 create mode 100644 src/components/ItemAppBar/ItemAppBar.stories.mdx
 create mode 100644 src/components/ItemAppBar/index.js

diff --git a/src/components/ItemAppBar/ItemAppBar.js b/src/components/ItemAppBar/ItemAppBar.js
new file mode 100644
index 0000000..6d157c4
--- /dev/null
+++ b/src/components/ItemAppBar/ItemAppBar.js
@@ -0,0 +1,33 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { AppBar } from "@material-ui/core"
+import ItemTableAppBarActions from "../ItemAppBarActions/ItemAppBarActions";
+
+export default function ItemAppBar({ title, tooltipTitle, onClick, icon, color }) {
+
+    return (
+        <AppBar position="sticky" elevation={2} color={color} >
+            <ItemTableAppBarActions
+                title={title}
+                tooltipTitle={tooltipTitle}
+                onClick={onClick}
+                icon={icon} />
+        </AppBar>
+    );
+};
+
+ItemAppBar.propTypes = {
+    /** The title of the app bar. */
+    "title": PropTypes.string,
+    /** The tooltip that appears when the icon is hovered over. */
+    "toolbarTitle": PropTypes.string,
+    /** The function that is is ran when icon button is clicked */
+    "onClick": PropTypes.func.isRequired,
+    /** The title of the app bar. */
+    "icon": PropTypes.object.isRequired,
+
+};
+
+ItemAppBar.defaultProps = {
+    "title": ""
+};
\ No newline at end of file
diff --git a/src/components/ItemAppBar/ItemAppBar.stories.mdx b/src/components/ItemAppBar/ItemAppBar.stories.mdx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ItemAppBar/index.js b/src/components/ItemAppBar/index.js
new file mode 100644
index 0000000..1a84e97
--- /dev/null
+++ b/src/components/ItemAppBar/index.js
@@ -0,0 +1,3 @@
+import ItemAppBar from "./ItemAppBar";
+
+export default ItemAppBar;
\ No newline at end of file

From d395009e37bddcf95439b1fc9a01f2d77731b40e Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 7 Apr 2021 15:58:46 -0400
Subject: [PATCH 02/13] Created ItemAppBarActions component and the related
 files

---
 .../ItemAppBarActions/ItemAppBarActions.js    | 52 +++++++++++++++++++
 .../ItemAppBarActions.stories.mdx             |  0
 src/components/ItemAppBarActions/index.js     |  3 ++
 3 files changed, 55 insertions(+)
 create mode 100644 src/components/ItemAppBarActions/ItemAppBarActions.js
 create mode 100644 src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx
 create mode 100644 src/components/ItemAppBarActions/index.js

diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.js b/src/components/ItemAppBarActions/ItemAppBarActions.js
new file mode 100644
index 0000000..e2e8f80
--- /dev/null
+++ b/src/components/ItemAppBarActions/ItemAppBarActions.js
@@ -0,0 +1,52 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import { makeStyles, Tooltip, Typography, Toolbar, IconButton, Zoom, useTheme } from "@material-ui/core"
+
+
+export default function ItemAppBarActions({ title, tooltipTitle, onClick, icon, }) {
+
+    const theme = useTheme();
+    const useStyles = makeStyles((theme) => ({
+        menuButton: {
+            marginLeft: theme.spacing(2),
+        },
+        title: {
+            flexGrow: "1"
+        },
+    }));
+    const classes = useStyles(theme);
+
+    return (
+            <Toolbar variant="dense">
+                <Typography variant="h6" className={classes.title}>
+                    {title}
+                </Typography>
+
+                <Tooltip title={tooltipTitle}
+                    arrow
+                    onClick={onClick}
+                    TransitionComponent={Zoom}
+                >
+                    <IconButton color="inherit">
+                        {icon}
+                    </IconButton>
+                </Tooltip>
+            </Toolbar>
+    );
+};
+
+ItemAppBarActions.propTypes = {
+    /** The title of the app bar. */
+    "title": PropTypes.string,
+    /** The tooltip that appears when the icon is hovered over. */
+    "toolbarTitle": PropTypes.string,
+    /** The function that is is ran when icon button is clicked */
+    "onClick": PropTypes.func.isRequired,
+    /** The title of the app bar. */
+    "icon": PropTypes.object.isRequired,
+
+};
+
+ItemAppBarActions.defaultProps = {
+    "title": ""
+};
\ No newline at end of file
diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx b/src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/ItemAppBarActions/index.js b/src/components/ItemAppBarActions/index.js
new file mode 100644
index 0000000..13456f0
--- /dev/null
+++ b/src/components/ItemAppBarActions/index.js
@@ -0,0 +1,3 @@
+import ItemAppBarActions from "./ItemAppBarActions";
+
+export default ItemAppBarActions;
\ No newline at end of file

From 1a01bf921def8449cd97ebb7e6b5815059f9958a Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 7 Apr 2021 16:42:05 -0400
Subject: [PATCH 03/13] Began testing implementation of ItemAppBar component in
 AppView

---
 src/components/AppView/AppView.js | 54 +++++++++++++++++++------------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index abb7e67..16323b2 100644
--- a/src/components/AppView/AppView.js
+++ b/src/components/AppView/AppView.js
@@ -9,8 +9,11 @@ import ItemViewAppBar from "../ItemViewAppBar/";
 import ItemView from "../ItemView/";
 import QueueSelector from "../QueueSelector/";
 import { useToken } from "../AuthProvider/";
+import ItemAppBar from "../ItemAppBar";
+import DarkModeIcon from '@material-ui/icons/Brightness4';
+import LightModeIcon from '@material-ui/icons/Brightness7';
 
-export default function AppView({ setDarkMode }){
+export default function AppView({ setDarkMode }) {
 	// Create stateful variables.
 	const [sidebarOpen, setSidebarOpen] = useState(false);
 	const [queues, setQueues] = useState([]);
@@ -22,17 +25,17 @@ export default function AppView({ setDarkMode }){
 	const access_token = useToken();
 
 	// Get Queues from API.
-	useEffect( _ => {
-		(async function getQueues(){
-			if (access_token === null){
+	useEffect(_ => {
+		(async function getQueues() {
+			if (access_token === null) {
 				return undefined;
 			}
 
-			if (queueSelectorOpen){
+			if (queueSelectorOpen) {
 				return undefined;
 			}
 
-			if (selectedQueues.length === 0){
+			if (selectedQueues.length === 0) {
 				setQueues([])
 				return undefined;
 			}
@@ -40,16 +43,16 @@ export default function AppView({ setDarkMode }){
 			setIsLoading(true);
 			let queuesToLoad = "";
 
-			if (selectedQueues.length === 1){
+			if (selectedQueues.length === 1) {
 				queuesToLoad = selectedQueues[0].name;
 			}
-			else if (selectedQueues.length > 0){
-				selectedQueues.forEach( (queue, index) => (
+			else if (selectedQueues.length > 0) {
+				selectedQueues.forEach((queue, index) => (
 					index === 0
 						? queuesToLoad += queue.name
 						: queuesToLoad += `+${queue.name}`
 				));
-			}			
+			}
 
 			let myHeaders = new Headers();
 			myHeaders.append("Authorization", `Bearer ${access_token}`);
@@ -64,9 +67,9 @@ export default function AppView({ setDarkMode }){
 	}, [selectedQueues, access_token, queueSelectorOpen]);
 
 	// Populate items array.
-	useEffect( _ => {
+	useEffect(_ => {
 		let tempItems = [];
-		for (let queue of queues){
+		for (let queue of queues) {
 			tempItems = tempItems.concat(queue.items);
 		}
 		setItems(tempItems);
@@ -103,19 +106,28 @@ export default function AppView({ setDarkMode }){
 			}
 		},
 	});
+
+	const darkMode = theme.palette.type === "dark"
+	const toggleDarkMode = () => setDarkMode(!darkMode);
+
 	const classes = useStyles();
 
-	return(
+	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
-				<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-				<QueueSelector 
+				{/* <ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} /> */}
+				<ItemAppBar title="webqueue2"
+					tooltipTitle={"Turn " + (darkMode ? "off" : "on") + " dark mode"}
+					onClick={toggleDarkMode}
+					icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
+				/>
+				<QueueSelector
 					open={queueSelectorOpen}
 					setOpen={setQueueSelectorOpen}
 					value={selectedQueues}
 					setValue={setSelectedQueues}
 				/>
-				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading}/>
+				<ItemTable data={items} rowCanBeSelected={sidebarOpen} loading={isLoading} />
 			</Box>
 			<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 				{items.length === 0 ? null :
@@ -123,13 +135,13 @@ export default function AppView({ setDarkMode }){
 						path="/:queue/:number"
 						render={({ match }) => (
 							<>
-								<ItemViewAppBar 
-									title={`${match.params.queue} ${match.params.number}`} 
+								<ItemViewAppBar
+									title={`${match.params.queue} ${match.params.number}`}
 									setSidebarOpen={setSidebarOpen}
 								/>
-								<ItemView 
-									queue={match.params.queue} 
-									number={match.params.number} 
+								<ItemView
+									queue={match.params.queue}
+									number={match.params.number}
 								/>
 							</>
 						)}

From 33851ea6f9c3e97a3bf3a1f33811bed83ed54726 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 21 Apr 2021 08:45:46 -0400
Subject: [PATCH 04/13] Replace toolbar icon action with ItemAppBarActions
 component

---
 .../ItemAppBarActions/ItemAppBarActions.js    | 17 +----------
 .../ItemTableAppBar/ItemTableAppBar.js        | 26 ++++++++---------
 .../ItemViewAppBar/ItemViewAppBar.js          | 28 ++++++++-----------
 3 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.js b/src/components/ItemAppBarActions/ItemAppBarActions.js
index e2e8f80..9deb081 100644
--- a/src/components/ItemAppBarActions/ItemAppBarActions.js
+++ b/src/components/ItemAppBarActions/ItemAppBarActions.js
@@ -3,25 +3,10 @@ import PropTypes from 'prop-types';
 import { makeStyles, Tooltip, Typography, Toolbar, IconButton, Zoom, useTheme } from "@material-ui/core"
 
 
-export default function ItemAppBarActions({ title, tooltipTitle, onClick, icon, }) {
-
-    const theme = useTheme();
-    const useStyles = makeStyles((theme) => ({
-        menuButton: {
-            marginLeft: theme.spacing(2),
-        },
-        title: {
-            flexGrow: "1"
-        },
-    }));
-    const classes = useStyles(theme);
+export default function ItemAppBarActions({ tooltipTitle, onClick, icon, }) {
 
     return (
             <Toolbar variant="dense">
-                <Typography variant="h6" className={classes.title}>
-                    {title}
-                </Typography>
-
                 <Tooltip title={tooltipTitle}
                     arrow
                     onClick={onClick}
diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js
index 86431ff..e154294 100644
--- a/src/components/ItemTableAppBar/ItemTableAppBar.js
+++ b/src/components/ItemTableAppBar/ItemTableAppBar.js
@@ -1,11 +1,14 @@
 import React from "react";
 import PropTypes from 'prop-types';
-import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme} from "@material-ui/core"
+import { makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme } from "@material-ui/core"
+import ItemAppBarActions from "../ItemAppBarActions";
+
 import DarkModeIcon from '@material-ui/icons/Brightness4';
 import LightModeIcon from '@material-ui/icons/Brightness7';
+import { actions } from "react-table";
 
 
-export default function ItemTableAppBar({ title, setDarkMode }){
+export default function ItemTableAppBar({ title, action }) {
 
 	const theme = useTheme();
 	const useStyles = makeStyles((theme) => ({
@@ -18,26 +21,23 @@ export default function ItemTableAppBar({ title, setDarkMode }){
 	}));
 	const classes = useStyles(theme);
 	const darkMode = theme.palette.type === "dark"
+	const setDarkMode = action
+
 
 	const toggleDarkMode = () => setDarkMode(!darkMode);
 
-	return(
+	return (
 		<>
 			<AppBar position="sticky" elevation={2} >
 				<Toolbar variant="dense">
 					<Typography variant="h6" className={classes.title}>
 						{title}
 					</Typography>
-
-					<Tooltip title={"Turn " + (darkMode ? "off" : "on") + " dark mode"} 
-						arrow 
-						onClick={toggleDarkMode} 
-						TransitionComponent={Zoom}
-					>
-						<IconButton color="inherit">
-							{darkMode ? <DarkModeIcon /> : <LightModeIcon />}
-						</IconButton>
-					</Tooltip>
+					<ItemAppBarActions
+						tooltipTitle={"Turn " + (darkMode ? "off" : "on") + " dark mode"}
+						onClick={toggleDarkMode}
+						icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
+					/>
 				</Toolbar>
 			</AppBar>
 		</>
diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.js b/src/components/ItemViewAppBar/ItemViewAppBar.js
index 0dc081f..daa7bcf 100644
--- a/src/components/ItemViewAppBar/ItemViewAppBar.js
+++ b/src/components/ItemViewAppBar/ItemViewAppBar.js
@@ -3,9 +3,11 @@ import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
 import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme} from "@material-ui/core"
 import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
+import ItemAppBarActions from "../ItemAppBarActions";
 
 
-export default function ItemViewAppBar({ title, setSidebarOpen }){
+export default function ItemViewAppBar({ title, action }){
+	const setSidebarOpen = action
 
 	useEffect(() => {
 		setSidebarOpen(true)
@@ -22,7 +24,7 @@ export default function ItemViewAppBar({ title, setSidebarOpen }){
 		},
 		appBarRoot: {
 			width: "inherit",
-			
+
 		},
 	}));
 	const classes = useStyles(theme);
@@ -32,21 +34,15 @@ export default function ItemViewAppBar({ title, setSidebarOpen }){
 	return(
 		<>
 			<AppBar position="fixed" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>
-			
-				<Toolbar variant="dense">
-                    <Tooltip title={"Close Item"} 
-						arrow 
-						onClick={() => 
-						{
-							history.push("/");
-						}}
-						TransitionComponent={Zoom}
-					>
-						<IconButton color="inherit" className={classes.closeButton}>
-							<CloseItemViewIcon />
-						</IconButton>
-					</Tooltip>
 
+				<Toolbar variant="dense">
+				<ItemAppBarActions
+						tooltipTitle={"Close Item"}
+						onClick={() => {
+								history.push("/");
+							}}
+						icon={<CloseItemViewIcon />}
+					/>
 					<Typography variant="h6" className={classes.title}>
 						{title}
 					</Typography>

From b92d4e260b4977dba0857e88d074d2af2a6c029a Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Wed, 21 Apr 2021 08:46:33 -0400
Subject: [PATCH 05/13] Update props for the *AppBar components

---
 src/components/AppView/AppView.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/AppView/AppView.js b/src/components/AppView/AppView.js
index 16323b2..b0aa023 100644
--- a/src/components/AppView/AppView.js
+++ b/src/components/AppView/AppView.js
@@ -115,12 +115,7 @@ export default function AppView({ setDarkMode }) {
 	return (
 		<Box component={Paper} display="flex" square elevation={0}>
 			<Box className={classes.leftCol}>
-				{/* <ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} /> */}
-				<ItemAppBar title="webqueue2"
-					tooltipTitle={"Turn " + (darkMode ? "off" : "on") + " dark mode"}
-					onClick={toggleDarkMode}
-					icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
-				/>
+				<ItemTableAppBar title="webqueue2" action={setDarkMode} />
 				<QueueSelector
 					open={queueSelectorOpen}
 					setOpen={setQueueSelectorOpen}
@@ -137,7 +132,7 @@ export default function AppView({ setDarkMode }) {
 							<>
 								<ItemViewAppBar
 									title={`${match.params.queue} ${match.params.number}`}
-									setSidebarOpen={setSidebarOpen}
+									action={setSidebarOpen}
 								/>
 								<ItemView
 									queue={match.params.queue}

From 0895c78f5096d93a52835f998bbb2ff30af8ee3a Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Fri, 7 May 2021 12:01:08 -0400
Subject: [PATCH 06/13] Minor formatting changes

---
 .../ItemTableAppBar/ItemTableAppBar.js        |  2 +-
 .../ItemViewAppBar/ItemViewAppBar.js          | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js
index e154294..2dc969d 100644
--- a/src/components/ItemTableAppBar/ItemTableAppBar.js
+++ b/src/components/ItemTableAppBar/ItemTableAppBar.js
@@ -48,7 +48,7 @@ ItemTableAppBar.propTypes = {
 	/** The title of the app bar. */
 	"title": PropTypes.string,
 	/** Function to toggle darkMode. */
-	"setDarkMode": PropTypes.func.isRequired,
+	"action": PropTypes.func.isRequired,
 };
 
 ItemTableAppBar.defaultProps = {
diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.js b/src/components/ItemViewAppBar/ItemViewAppBar.js
index daa7bcf..474e0a3 100644
--- a/src/components/ItemViewAppBar/ItemViewAppBar.js
+++ b/src/components/ItemViewAppBar/ItemViewAppBar.js
@@ -1,12 +1,12 @@
 import React, { useEffect } from "react";
 import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
-import {makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme} from "@material-ui/core"
+import { makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme } from "@material-ui/core"
 import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
 import ItemAppBarActions from "../ItemAppBarActions";
 
 
-export default function ItemViewAppBar({ title, action }){
+export default function ItemViewAppBar({ title, action }) {
 	const setSidebarOpen = action
 
 	useEffect(() => {
@@ -31,16 +31,15 @@ export default function ItemViewAppBar({ title, action }){
 
 	const history = useHistory();
 
-	return(
+	return (
 		<>
-			<AppBar position="fixed" color="secondary" elevation={2} classes={{root: classes.appBarRoot}}>
-
+			<AppBar position="fixed" color="secondary" elevation={2} classes={{ root: classes.appBarRoot }}>
 				<Toolbar variant="dense">
-				<ItemAppBarActions
+					<ItemAppBarActions
 						tooltipTitle={"Close Item"}
 						onClick={() => {
-								history.push("/");
-							}}
+							history.push("/");
+						}}
 						icon={<CloseItemViewIcon />}
 					/>
 					<Typography variant="h6" className={classes.title}>
@@ -48,7 +47,7 @@ export default function ItemViewAppBar({ title, action }){
 					</Typography>
 				</Toolbar>
 			</AppBar>
-			<Toolbar  variant="dense"/>
+			<Toolbar variant="dense" />
 		</>
 	);
 }
@@ -56,7 +55,7 @@ export default function ItemViewAppBar({ title, action }){
 ItemViewAppBar.propTypes = {
 
 	/** Function to toggle sidebar open. */
-	"setSidebarOpen": PropTypes.func.isRequired,
+	"action": PropTypes.func.isRequired,
 	/** The title of the app bar. */
 	"title": PropTypes.string
 };

From a39ee179fa1f0625f7b0d530c4de51bad001b8f8 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Fri, 7 May 2021 12:01:37 -0400
Subject: [PATCH 07/13] Initial ItemAppBarActions documentation

---
 .../ItemAppBarActions.stories.mdx             | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx b/src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx
index e69de29..5802fc1 100644
--- a/src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx
+++ b/src/components/ItemAppBarActions/ItemAppBarActions.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import ItemAppBarActions from "./ItemAppBarActions";
+import CloseItemViewIcon from '@material-ui/icons/ChevronRight';
+
+
+<Meta
+    title="Components/ItemAppBarActions"
+    component={ItemAppBarActions}
+
+/>
+
+The ItemAppBarActions is the adds functionality to the appbar components. It allows the toolbars to perform actions like toggling darkmode or closing an item.
+
+<Canvas>
+    <Story
+        name="Default"
+        args={{
+           tooltipTitle:"This is a button. Please click me.",
+           onClick: () => alert("You clicked this button")  ,
+           icon: <CloseItemViewIcon/>,
+        }}
+    >
+        { args => <ItemAppBarActions {...args} /> }
+    </Story>
+</Canvas>
+
+<ArgsTable of={ItemAppBarActions} />
\ No newline at end of file

From f6459c04b95645bfbf5e226aa034aff91ccb8877 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Fri, 7 May 2021 13:50:27 -0400
Subject: [PATCH 08/13] Removed unnecessary prop

---
 src/components/ItemAppBarActions/ItemAppBarActions.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.js b/src/components/ItemAppBarActions/ItemAppBarActions.js
index 9deb081..79a70b9 100644
--- a/src/components/ItemAppBarActions/ItemAppBarActions.js
+++ b/src/components/ItemAppBarActions/ItemAppBarActions.js
@@ -21,8 +21,6 @@ export default function ItemAppBarActions({ tooltipTitle, onClick, icon, }) {
 };
 
 ItemAppBarActions.propTypes = {
-    /** The title of the app bar. */
-    "title": PropTypes.string,
     /** The tooltip that appears when the icon is hovered over. */
     "toolbarTitle": PropTypes.string,
     /** The function that is is ran when icon button is clicked */

From 2bb1fa7c58f8c209980d4c324a716b3e0986e710 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Fri, 7 May 2021 13:56:03 -0400
Subject: [PATCH 09/13] Updated propType descriptions and default props

---
 .../ItemAppBarActions/ItemAppBarActions.js    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.js b/src/components/ItemAppBarActions/ItemAppBarActions.js
index 79a70b9..772b4f2 100644
--- a/src/components/ItemAppBarActions/ItemAppBarActions.js
+++ b/src/components/ItemAppBarActions/ItemAppBarActions.js
@@ -6,17 +6,17 @@ import { makeStyles, Tooltip, Typography, Toolbar, IconButton, Zoom, useTheme }
 export default function ItemAppBarActions({ tooltipTitle, onClick, icon, }) {
 
     return (
-            <Toolbar variant="dense">
-                <Tooltip title={tooltipTitle}
-                    arrow
-                    onClick={onClick}
-                    TransitionComponent={Zoom}
-                >
-                    <IconButton color="inherit">
-                        {icon}
-                    </IconButton>
-                </Tooltip>
-            </Toolbar>
+        <Toolbar variant="dense">
+            <Tooltip title={tooltipTitle}
+                arrow
+                onClick={onClick}
+                TransitionComponent={Zoom}
+            >
+                <IconButton color="inherit">
+                    {icon}
+                </IconButton>
+            </Tooltip>
+        </Toolbar>
     );
 };
 
@@ -25,11 +25,11 @@ ItemAppBarActions.propTypes = {
     "toolbarTitle": PropTypes.string,
     /** The function that is is ran when icon button is clicked */
     "onClick": PropTypes.func.isRequired,
-    /** The title of the app bar. */
+    /** The icon that is displayed inthe app bar. */
     "icon": PropTypes.object.isRequired,
 
 };
 
 ItemAppBarActions.defaultProps = {
-    "title": ""
+    "toolbarTitle": ""
 };
\ No newline at end of file

From ceade2bf0de83f8a9c3fdd0a428a199a868e08d0 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Tue, 18 May 2021 15:36:29 -0400
Subject: [PATCH 10/13] Removed unnecessary Toolbar component from
 ItemAppBarActions

---
 .../ItemAppBarActions/ItemAppBarActions.js    | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/ItemAppBarActions/ItemAppBarActions.js b/src/components/ItemAppBarActions/ItemAppBarActions.js
index 772b4f2..66219af 100644
--- a/src/components/ItemAppBarActions/ItemAppBarActions.js
+++ b/src/components/ItemAppBarActions/ItemAppBarActions.js
@@ -6,17 +6,15 @@ import { makeStyles, Tooltip, Typography, Toolbar, IconButton, Zoom, useTheme }
 export default function ItemAppBarActions({ tooltipTitle, onClick, icon, }) {
 
     return (
-        <Toolbar variant="dense">
-            <Tooltip title={tooltipTitle}
-                arrow
-                onClick={onClick}
-                TransitionComponent={Zoom}
-            >
-                <IconButton color="inherit">
-                    {icon}
-                </IconButton>
-            </Tooltip>
-        </Toolbar>
+        <Tooltip title={tooltipTitle}
+            arrow
+            onClick={onClick}
+            TransitionComponent={Zoom}
+        >
+            <IconButton color="inherit">
+                {icon}
+            </IconButton>
+        </Tooltip>
     );
 };
 

From 5c8dcf6090c258be54fd37ac4158f1b2c95a63a3 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Tue, 18 May 2021 16:12:47 -0400
Subject: [PATCH 11/13] Added additional ItemAppbarAction to ItemTableAppBar
 component; Removed unnecessary import

---
 src/components/ItemTableAppBar/ItemTableAppBar.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js
index 2dc969d..9d6605c 100644
--- a/src/components/ItemTableAppBar/ItemTableAppBar.js
+++ b/src/components/ItemTableAppBar/ItemTableAppBar.js
@@ -2,10 +2,9 @@ import React from "react";
 import PropTypes from 'prop-types';
 import { makeStyles, Tooltip, Typography, AppBar, Toolbar, IconButton, Zoom, useTheme } from "@material-ui/core"
 import ItemAppBarActions from "../ItemAppBarActions";
-
 import DarkModeIcon from '@material-ui/icons/Brightness4';
 import LightModeIcon from '@material-ui/icons/Brightness7';
-import { actions } from "react-table";
+import LogoutIcon from '@material-ui/icons/ExitToApp';
 
 
 export default function ItemTableAppBar({ title, action }) {
@@ -38,6 +37,11 @@ export default function ItemTableAppBar({ title, action }) {
 						onClick={toggleDarkMode}
 						icon={darkMode ? <DarkModeIcon /> : <LightModeIcon />}
 					/>
+					<ItemAppBarActions
+						tooltipTitle={"Logout"}
+						onClick={()=> alert("You clicked the logout button!")}
+						icon={<LogoutIcon/>}
+					/>
 				</Toolbar>
 			</AppBar>
 		</>

From a3ba160b8dce8302db48f42ff3e54bc3d3b107e7 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Tue, 18 May 2021 17:28:26 -0400
Subject: [PATCH 12/13] Implement function to handle logout

---
 .../ItemTableAppBar/ItemTableAppBar.js           | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js
index 9d6605c..2ef4bd4 100644
--- a/src/components/ItemTableAppBar/ItemTableAppBar.js
+++ b/src/components/ItemTableAppBar/ItemTableAppBar.js
@@ -5,6 +5,8 @@ import ItemAppBarActions from "../ItemAppBarActions";
 import DarkModeIcon from '@material-ui/icons/Brightness4';
 import LightModeIcon from '@material-ui/icons/Brightness7';
 import LogoutIcon from '@material-ui/icons/ExitToApp';
+import { useLoginSetter, useTokenSetter } from "../AuthProvider";
+import { useCookies } from "react-cookie";
 
 
 export default function ItemTableAppBar({ title, action }) {
@@ -22,9 +24,17 @@ export default function ItemTableAppBar({ title, action }) {
 	const darkMode = theme.palette.type === "dark"
 	const setDarkMode = action
 
-
 	const toggleDarkMode = () => setDarkMode(!darkMode);
 
+	const setLogin = useLoginSetter();
+	const setToken = useTokenSetter();
+	const [cookies, removeCookie] = useCookies(["csrf_refresh_token"]);
+
+	const handleLogout = () => {
+		setLogin(false);
+		removeCookie(["csrf_refresh_token"])
+	}
+
 	return (
 		<>
 			<AppBar position="sticky" elevation={2} >
@@ -39,8 +49,8 @@ export default function ItemTableAppBar({ title, action }) {
 					/>
 					<ItemAppBarActions
 						tooltipTitle={"Logout"}
-						onClick={()=> alert("You clicked the logout button!")}
-						icon={<LogoutIcon/>}
+						onClick={() => handleLogout()}
+						icon={<LogoutIcon />}
 					/>
 				</Toolbar>
 			</AppBar>

From b2179cc7794b4f69e5fe71217ac671ab4ce8ce10 Mon Sep 17 00:00:00 2001
From: wrigh393 <wrigh393@purdue.edu>
Date: Tue, 18 May 2021 18:00:05 -0400
Subject: [PATCH 13/13] Removed unnecessary useToken hook

---
 src/components/ItemTableAppBar/ItemTableAppBar.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.js b/src/components/ItemTableAppBar/ItemTableAppBar.js
index 2ef4bd4..c55df52 100644
--- a/src/components/ItemTableAppBar/ItemTableAppBar.js
+++ b/src/components/ItemTableAppBar/ItemTableAppBar.js
@@ -5,7 +5,7 @@ import ItemAppBarActions from "../ItemAppBarActions";
 import DarkModeIcon from '@material-ui/icons/Brightness4';
 import LightModeIcon from '@material-ui/icons/Brightness7';
 import LogoutIcon from '@material-ui/icons/ExitToApp';
-import { useLoginSetter, useTokenSetter } from "../AuthProvider";
+import { useLoginSetter } from "../AuthProvider";
 import { useCookies } from "react-cookie";
 
 
@@ -27,7 +27,6 @@ export default function ItemTableAppBar({ title, action }) {
 	const toggleDarkMode = () => setDarkMode(!darkMode);
 
 	const setLogin = useLoginSetter();
-	const setToken = useTokenSetter();
 	const [cookies, removeCookie] = useCookies(["csrf_refresh_token"]);
 
 	const handleLogout = () => {