Revize e9103a47

Persist navigation state

re #9630

frontend/src/features/Catalog/AddNewLocationDialog.tsx

@@ +1 @@
+import { Button } from "@mui/material"
+import { Fragment } from "react"
+import AddIcon from '@mui/icons-material/Add'
+
+const AddNewLocationDialog = () => {
+
+    return (
+        <Fragment>
+            <Button startIcon={<AddIcon />} variant="outlined">Add Location</Button>
+        </Fragment>
+    )
+}
+
+export default AddNewLocationDialog

frontend/src/features/Catalog/Catalog.tsx

@@ -1 @@
-import { Container, Paper, Typography } from '@mui/material'
+import { Container, Paper, Stack, Typography } from '@mui/material'
 import CatalogTable from './CatalogTable'
 import { Fragment } from 'react'
 import CatalogFilter from './CatalogFilter'
@@ -15 +15 @@
             // variant="outlined"
             style={{ minHeight: '50vh' }}
         >
-            <Container sx={{ mt: 4 }}>
-                <CatalogFilter />
+            <Stack sx={{ mx: 12, my: 2 }}>
+                <Stack alignItems="start">
+                    <CatalogFilter />
+                </Stack>
                 <CatalogTable />
-            </Container>
+            </Stack>
         </Paper>
     </Fragment>
 )

frontend/src/features/Catalog/CatalogFilter.tsx

@@ -14 +14 @@
 import FilterListOffIcon from '@mui/icons-material/FilterListOff'
 import ManageSearchIcon from '@mui/icons-material/ManageSearch'
 import { RootState } from '../redux/store'
+import AddNewLocationDialog from './AddNewLocationDialog'
 
 const CatalogFilter = () => {
     const dispatch = useDispatch()
@@ -33 +34 @@
 
     return (
         <Fragment>
-            <Button
-                startIcon={
-                    filterOpen ? <FilterListOffIcon /> : <FilterListIcon />
-                }
-                variant="outlined"
-                color="primary"
-                onClick={toggleFilter}
-                sx={{ mb: 2 }}
-            >
-                Filter
-            </Button>
+            <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+                <Button
+                    startIcon={
+                        filterOpen ? <FilterListOffIcon /> : <FilterListIcon />
+                    }
+                    variant="outlined"
+                    color="primary"
+                    onClick={toggleFilter}
+                >
+                    Filter
+                </Button>
+                <AddNewLocationDialog />
+            </Stack>
             <Collapse in={filterOpen} timeout="auto" unmountOnExit>
                 <Stack direction="row" spacing={2} sx={{ mt: 2 }}>
                     <TextField

frontend/src/features/Navigation/Navigation.tsx

@@ -17 +17 @@
 
 import DarkModeIcon from '@mui/icons-material/DarkMode'
 import LightModeIcon from '@mui/icons-material/LightMode'
+import { setOpen } from './navigationSlice'
 
 const drawerWidth = 240
 
@@ -74 +75 @@
 }
 
 const PersistentDrawerLeft: FunctionComponent<DrawerProps> = ({ children }) => {
-    const [open, setOpen] = React.useState(false)
+    const open = useSelector((state: RootState) => state.navigation.open)
 
     const onOpenDrawer = () => {
-        setOpen(true)
+        dispatch(setOpen(true))
     }
 
     const colorThemeMode = useSelector(
@@ -92 +93 @@
 
     return (
         <Fragment>
-            <Paper style={{ minHeight: '100vh', borderRadius: 0 }}>
+            <Paper style={{ minHeight: '100vh', borderRadius: 0}}>
                 <Box sx={{ display: 'flex' }}>
                     {/* <CssBaseline /> */}
                     <AppBar position="fixed" open={open}>
@@ -125 +126 @@
                     <NavigationMenu
                         open={open}
                         drawerWidth={drawerWidth}
-                        setOpen={setOpen}
+                        setOpen={(open: boolean) => dispatch(setOpen(open))}
                     />
                     <Main open={open} sx={{ mt: 2 }}>
                         <DrawerHeader />

frontend/src/features/Navigation/navigationSlice.tsx

@@ +1 @@
+import { createSlice } from '@reduxjs/toolkit'
+import persistReducer from 'redux-persist/es/persistReducer'
+import storage from 'redux-persist/lib/storage'
+
+export interface NavigationState {
+    selectedMenuItem?: string,
+    open: boolean,
+}
+
+const persistConfig = {
+    key: 'navigation',
+    storage
+}
+
+const initialState = {
+    selectedMenuItem: '',
+    open: false
+}
+
+export const navigationSlice = createSlice({
+    name: 'navigation',
+    initialState,
+    reducers: {
+        setSelectedMenuItem: (state, action) => ({...state, selectedMenuItem: action.payload}),
+        setOpen: (state, action) => ({...state, open: action.payload}),
+    }
+})
+
+const navigationReducer = persistReducer(persistConfig, navigationSlice.reducer)
+
+export const { setSelectedMenuItem, setOpen } = navigationSlice.actions
+
+export default navigationReducer

frontend/src/features/Reusables/ButtonOpenableDialog.tsx

@@ -12 +12 @@
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' // the max width of the dialog
 }
 
+
 // Generic dialog that can be opened by a button and closed by clicking on the backdrop.
 const ButtonOpenableDialog: FunctionComponent<ButtonOpenableDialogProps> = ({
     onOpenCallback,
@@ -52 +53 @@
                 {buttonText}
             </Button>
             <Dialog
-                fullWidth={true}
+                fullWidth
                 open={open}
                 onClose={onClose}
                 maxWidth={maxWidth}

frontend/src/features/redux/store.ts

@@ -8 +8 @@
 import notificationReducer from '../Notification/notificationSlice'
 import trackingToolReducer from '../TrackingTool/trackingToolSlice'
 import { enableMapSet } from 'immer'
+import navigationReducer from '../Navigation/navigationSlice'
 
 enableMapSet()
 
@@ -20 +21 @@
         theme: themeReducer,
         catalog: catalogReducer,
         notification: notificationReducer,
-        trackingTool: trackingToolReducer
+        trackingTool: trackingToolReducer,
+        navigation: navigationReducer,
     }),
     process.env.REACT_APP_DEV_ENV === 'true'
-        ? composeEnhancers( // ComposeEnhancers will inject redux-devtools-extension
+        ? composeEnhancers(
+              // ComposeEnhancers will inject redux-devtools-extension
               applyMiddleware(thunk) // Thunk middleware so we can async fetch data from the api
           )
         : applyMiddleware(thunk)