ItemAppBarActions implementation

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,34 +25,34 @@ 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;
 			}
 
 			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,33 +106,37 @@ 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" action={setDarkMode} />
+				<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 :
 					<Route
 						path="/:queue/:number"
 						render={({ match }) => (
 							<>
-								<ItemViewAppBar 
-									title={`${match.params.queue} ${match.params.number}`} 
-									setSidebarOpen={setSidebarOpen}
+								<ItemViewAppBar
+									title={`${match.params.queue} ${match.params.number}`}
+									action={setSidebarOpen}
 								/>
-								<ItemView 
-									queue={match.params.queue} 
-									number={match.params.number} 
+								<ItemView
+									queue={match.params.queue}
+									number={match.params.number}
 								/>
 							</>
 						)}

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": ""
+};

src/components/ItemAppBar/index.js

@@ -0,0 +1,3 @@
+import ItemAppBar from "./ItemAppBar";
+
+export default ItemAppBar;

src/components/ItemAppBarActions/ItemAppBarActions.js

@@ -0,0 +1,33 @@
+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({ tooltipTitle, onClick, icon, }) {
+
+    return (
+        <Tooltip title={tooltipTitle}
+            arrow
+            onClick={onClick}
+            TransitionComponent={Zoom}
+        >
+            <IconButton color="inherit">
+                {icon}
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+ItemAppBarActions.propTypes = {
+    /** 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 icon that is displayed inthe app bar. */
+    "icon": PropTypes.object.isRequired,
+
+};
+
+ItemAppBarActions.defaultProps = {
+    "toolbarTitle": ""
+};

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} />

src/components/ItemAppBarActions/index.js

@@ -0,0 +1,3 @@
+import ItemAppBarActions from "./ItemAppBarActions";
+
+export default ItemAppBarActions;

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>
 		</>
@@ -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 = {

src/components/ItemViewAppBar/ItemViewAppBar.js

@@ -1,11 +1,13 @@
 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, setSidebarOpen }){
+export default function ItemViewAppBar({ title, action }) {
+	const setSidebarOpen = action
 
 	useEffect(() => {
 		setSidebarOpen(true)
@@ -22,45 +24,38 @@ export default function ItemViewAppBar({ title, setSidebarOpen }){
 		},
 		appBarRoot: {
 			width: "inherit",
-			
+
 		},
 	}));
 	const classes = useStyles(theme);
 
 	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">
-                    <Tooltip title={"Close Item"} 
-						arrow 
-						onClick={() => 
-						{
+					<ItemAppBarActions
+						tooltipTitle={"Close Item"}
+						onClick={() => {
 							history.push("/");
 						}}
-						TransitionComponent={Zoom}
-					>
-						<IconButton color="inherit" className={classes.closeButton}>
-							<CloseItemViewIcon />
-						</IconButton>
-					</Tooltip>
-
+						icon={<CloseItemViewIcon />}
+					/>
 					<Typography variant="h6" className={classes.title}>
 						{title}
 					</Typography>
 				</Toolbar>
 			</AppBar>
-			<Toolbar  variant="dense"/>
+			<Toolbar variant="dense" />
 		</>
 	);
 }
 
 ItemViewAppBar.propTypes = {
 
 	/** Function to toggle sidebar open. */
-	"setSidebarOpen": PropTypes.func.isRequired,
+	"action": PropTypes.func.isRequired,
 	/** The title of the app bar. */
 	"title": PropTypes.string
 };