Use redux for drawer open state

ui/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { connect, ConnectedProps } from "react-redux";
 import clsx from "clsx";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
@@ -28,6 +28,7 @@ import { AppState } from "./store";
 import { paths } from "./paths";
 import { useTheme } from "./theme";
 import { closeSnackbar } from "./actions/snackbarActions";
+import { toggleDrawer } from "./actions/settingsActions";
 import ListItemLink from "./components/ListItemLink";
 import SchedulersView from "./views/SchedulersView";
 import DashboardView from "./views/DashboardView";
@@ -135,11 +136,13 @@ function mapStateToProps(state: AppState) {
   return {
     snackbar: state.snackbar,
     themePreference: state.settings.themePreference,
+    isDrawerOpen: state.settings.isDrawerOpen,
   };
 }
 
 const mapDispatchToProps = {
   closeSnackbar,
+  toggleDrawer,
 };
 
 const connector = connect(mapStateToProps, mapDispatchToProps);
@@ -151,8 +154,6 @@ function SlideUpTransition(props: TransitionProps) {
 function App(props: ConnectedProps<typeof connector>) {
   const theme = useTheme(props.themePreference);
   const classes = useStyles(theme)();
-  const [open, setOpen] = useState(true);
-  const toggleDrawer = () => setOpen(!open);
   return (
     <ThemeProvider theme={theme}>
       <Router>
@@ -167,7 +168,7 @@ function App(props: ConnectedProps<typeof connector>) {
                 edge="start"
                 color="inherit"
                 aria-label="open drawer"
-                onClick={toggleDrawer}
+                onClick={props.toggleDrawer}
                 className={classes.menuButton}
               >
                 <MenuIcon />
@@ -189,10 +190,10 @@ function App(props: ConnectedProps<typeof connector>) {
               classes={{
                 paper: clsx(
                   classes.drawerPaper,
-                  !open && classes.drawerPaperClose
+                  !props.isDrawerOpen && classes.drawerPaperClose
                 ),
               }}
-              open={open}
+              open={props.isDrawerOpen}
             >
               <Snackbar
                 anchorOrigin={{ vertical: "bottom", horizontal: "left" }}

ui/src/actions/settingsActions.ts

@@ -2,21 +2,27 @@ import { ThemePreference } from "../reducers/settingsReducer";
 // List of settings related action types.
 export const POLL_INTERVAL_CHANGE = "POLL_INTERVAL_CHANGE";
 export const THEME_PREFERENCE_CHANGE = "THEME_PREFERENCE_CHANGE";
+export const TOGGLE_DRAWER = "TOGGLE_DRAWER";
 
 interface PollIntervalChangeAction {
   type: typeof POLL_INTERVAL_CHANGE;
   value: number; // new poll interval value in seconds
 }
 
-interface ToggleDarkThemeAction {
+interface ThemePreferenceChangeAction {
   type: typeof THEME_PREFERENCE_CHANGE;
   value: ThemePreference;
 }
 
+interface ToggleDrawerAction {
+  type: typeof TOGGLE_DRAWER;
+}
+
 // Union of all settings related action types.
 export type SettingsActionTypes =
   | PollIntervalChangeAction
-  | ToggleDarkThemeAction;
+  | ThemePreferenceChangeAction
+  | ToggleDrawerAction;
 
 export function pollIntervalChange(value: number) {
   return {
@@ -31,3 +37,7 @@ export function selectTheme(value: ThemePreference) {
     value,
   };
 }
+
+export function toggleDrawer() {
+  return { type: TOGGLE_DRAWER };
+}

ui/src/reducers/settingsReducer.ts

@@ -2,6 +2,7 @@ import {
   POLL_INTERVAL_CHANGE,
   SettingsActionTypes,
   THEME_PREFERENCE_CHANGE,
+  TOGGLE_DRAWER,
 } from "../actions/settingsActions";
 
 export enum ThemePreference {
@@ -13,11 +14,13 @@ export enum ThemePreference {
 export interface SettingsState {
   pollInterval: number;
   themePreference: ThemePreference;
+  isDrawerOpen: boolean;
 }
 
 const initialState: SettingsState = {
   pollInterval: 8,
   themePreference: ThemePreference.SystemDefault,
+  isDrawerOpen: true,
 };
 
 function settingsReducer(
@@ -26,12 +29,23 @@ function settingsReducer(
 ): SettingsState {
   switch (action.type) {
     case POLL_INTERVAL_CHANGE:
-      return { ...state, pollInterval: action.value };
+      return {
+        ...state,
+        pollInterval: action.value,
+      };
+
     case THEME_PREFERENCE_CHANGE:
       return {
         ...state,
         themePreference: action.value,
       };
+
+    case TOGGLE_DRAWER:
+      return {
+        ...state,
+        isDrawerOpen: !state.isDrawerOpen,
+      };
+
     default:
       return state;
   }