Separate sidebarOpen and activeItem logic

ECN · Aug 11, 2020 · 09a2c8c · 09a2c8c
1 parent 82a18f2
commit 09a2c8c
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/src/App.js b/src/App.js
@@ -10,7 +10,7 @@ import { objectIsEmpty }  from "./utilities"
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
 	const [activeItem, setActiveItem] = useState({});
-	const sidebarOpen = !objectIsEmpty(activeItem);
+	const [sidebarOpen, setSidebarOpen] = useState(false)
 
 	const theme = createMuiTheme({
 		"palette": {
@@ -56,10 +56,10 @@ function App(){
 			<Box display="flex">
 				<Box className={classes.leftCol} >
 					<CustomAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-					<ItemTable activeItem={activeItem} setActiveItem={setActiveItem}/>
+					<ItemTable activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
 				</Box>
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
-					<ItemView activeItem={activeItem} setActiveItem={setActiveItem}/>
+					<ItemView activeItem={activeItem} setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/>
 				</Box>
 			</Box>
 		</ThemeProvider>

diff --git a/src/ItemTable.js b/src/ItemTable.js
@@ -39,7 +39,10 @@ function ItemTable(props) {
 			data={data}
 			title={"Demo Table"}
 			options={options}
-			onRowClick={(event, rowData) => props.setActiveItem(rowData)}
+			onRowClick={(event, rowData) => {
+				props.setActiveItem(rowData);
+				props.setSidebarOpen(true);
+			}}
 		/>
 	);
 }

diff --git a/src/ItemView.js b/src/ItemView.js
@@ -12,7 +12,7 @@ function ItemView(props){
 		<Paper>
 			<ItemViewAppBar 
 				title={props.activeItem["queue"] + " " + props.activeItem["number"]}
-				setActiveItem={props.setActiveItem}
+				setSidebarOpen={props.setSidebarOpen}
 			/>
 
 			<ListItem>

diff --git a/src/ItemViewAppBar.js b/src/ItemViewAppBar.js
@@ -21,7 +21,7 @@ export default function ItemViewAppBar(props){
 				<Toolbar>
                     <Tooltip title={"Close Item"} 
 						arrow 
-						onClick={() => props.setActiveItem({})}
+						onClick={() => props.setSidebarOpen(false)}
 						TransitionComponent={Zoom}
 					>
 						<IconButton color="inherit" className={classes.closeButton}>