feat(darkMode): store darkMode in Redux store

src/app/App.tsx

@@ -1,7 +1,7 @@
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { LocalizationProvider } from '@mui/lab';
 import DateAdapter from '@mui/lab/AdapterDateFns';
-import { Container, IconButton, PaletteMode, Paper, useMediaQuery } from '@mui/material';
+import { Container, IconButton, Paper } from '@mui/material';
 import {
   StyledEngineProvider,
   ThemeProvider,
@@ -11,13 +11,17 @@ import {
 } from '@mui/material/styles';
 import frLocale from 'date-fns/locale/fr';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
-import { createRef, useEffect, useMemo, useState } from 'react';
+import { createRef, useMemo, useState } from 'react';
 
 import { DRAWER_MENU_WIDTH } from '../config/Constants';
 import { components, getPalette, typography } from '../config/CustomTheme';
+import ThemeMode from '../models/ThemeMode';
+import { selectThemeMode } from '../store/theme/theme.selectors';
+import { toggleThemeMode } from '../store/theme/themeSlice';
 import AppBar from './AppBar';
 import DrawerMenu from './DrawerMenu';
 import Router from './Router';
+import { useAppDispatch, useAppSelector } from './hooks';
 
 const MainContent = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(2)
@@ -31,15 +35,13 @@ const MainContainer = styled(Container)(({ theme }) => ({
 // Main component
 function App() {
   // Theme configuration
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const [themeMode, setThemeMode] = useState<PaletteMode>(prefersDarkMode ? 'dark' : 'light');
-  useEffect(() => {
-    setThemeMode(prefersDarkMode ? 'dark' : 'light');
-  }, [prefersDarkMode]);
+  const themeMode = useAppSelector(selectThemeMode);
+  const dispatch = useAppDispatch();
+
   let theme = useMemo(() => {
     return createTheme({
       components,
-      palette: getPalette(themeMode),
+      palette: getPalette(themeMode === ThemeMode.LIGHT ? 'light' : 'dark'),
       typography: typography
     });
   }, [themeMode]);
@@ -56,10 +58,6 @@ function App() {
     setIsMenuOpen(!isMenuOpen);
   };
 
-  const toggleThemeMode = () => {
-    setThemeMode(themeMode === 'light' ? 'dark' : 'light');
-  };
-
   return (
     <LocalizationProvider dateAdapter={DateAdapter} locale={frLocale}>
       <StyledEngineProvider injectFirst>
@@ -79,7 +77,7 @@ function App() {
                 width={DRAWER_MENU_WIDTH}
                 open={isMenuOpen}
                 toggleDrawerMenu={toggleDrawerMenu}
-                toggleThemeMode={toggleThemeMode}
+                toggleThemeMode={() => dispatch(toggleThemeMode())}
               />
               <MainContent>
                 <Router />

src/app/DrawerMenu.tsx

@@ -18,7 +18,8 @@ import {
 import { FC } from 'react';
 import { Link } from 'react-router-dom';
 
-import { useThemeMode } from './hooks';
+import { selectThemeMode } from '../store/theme/theme.selectors';
+import { useAppSelector } from './hooks';
 
 interface MenuItemProps {
   icon: React.ReactNode;
@@ -41,7 +42,7 @@ interface Props {
 }
 
 const DrawerMenu: FC<Props> = ({ open, toggleDrawerMenu, toggleThemeMode, width }) => {
-  const themeMode = useThemeMode();
+  const themeMode = useAppSelector(selectThemeMode);
   return (
     <SwipeableDrawer
       anchor="left"

src/app/hooks.ts

@@ -1,18 +1,7 @@
-import { useTheme } from '@mui/material';
-import { useEffect, useState } from 'react';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 
 import type { AppDispatch, RootState } from '../store/store';
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch = () => useDispatch<AppDispatch>();
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
-
-export const useThemeMode = () => {
-  const [themeMode, setThemeMode] = useState('light');
-  const theme = useTheme();
-  useEffect(() => {
-    setThemeMode(theme.palette.mode);
-  }, [theme]);
-  return themeMode;
-};

src/components/TrackerList/AddTrackerCard.tsx

@@ -3,17 +3,19 @@ import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import { Box, Card, CardActionArea, CardContent, CardProps } from '@mui/material';
 import { FC, useState } from 'react';
 
-import { useThemeMode } from '../../app/hooks';
+import { useAppSelector } from '../../app/hooks';
+import ThemeMode from '../../models/ThemeMode';
+import { selectThemeMode } from '../../store/theme/theme.selectors';
 import TrackerForm from '../forms/TrackerForm/TrackerForm';
 
 interface Props {
   cardProps?: CardProps;
 }
 const AddTrackerCard: FC<Props> = ({ cardProps }) => {
   const [displayCreateForm, setDisplayCreateForm] = useState(false);
-  const themeMode = useThemeMode();
+  const themeMode = useAppSelector(selectThemeMode);
 
-  const hoverColor = themeMode === 'light' ? 'accent.main' : 'secondary.main';
+  const hoverColor = themeMode === ThemeMode.LIGHT ? 'accent.main' : 'secondary.main';
   const cardActionSx = {
     '&:hover': {
       backgroundColor: displayCreateForm ? '' : hoverColor

src/components/forms/RequiredCompletionsForm/RequiredCompletionsForm.tsx

@@ -11,7 +11,9 @@ import {
   UseFieldArrayRemove
 } from 'react-hook-form';
 
-import { useThemeMode } from '../../../app/hooks';
+import { useAppSelector } from '../../../app/hooks';
+import ThemeMode from '../../../models/ThemeMode';
+import { selectThemeMode } from '../../../store/theme/theme.selectors';
 import { FormValues } from '../TrackerForm/types';
 import CompletionQuantityTextField from '../completions/CompletionQuantityTextField';
 import CompletionUnitTextField from '../completions/CompletionUnitTextField';
@@ -37,11 +39,11 @@ interface Props {
  * @return {*}
  */
 const RequiredCompletionsForm: FC<Props> = ({ append, control, fields, gridProps, remove }) => {
-  const themeMode = useThemeMode();
+  const themeMode = useAppSelector(selectThemeMode);
   const theme = useTheme();
 
   const fieldsetSx = {
-    bgcolor: themeMode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900],
+    bgcolor: themeMode === ThemeMode.LIGHT ? theme.palette.grey[100] : theme.palette.grey[900],
     mb: 1
   };
 

src/config/CustomTheme.ts

@@ -2,6 +2,8 @@
 import { PaletteMode, PaletteOptions } from '@mui/material';
 import { grey } from '@mui/material/colors';
 
+import ThemeMode from '../models/ThemeMode';
+
 const CHARCOAL = {
   main: '#2E4057'
 };
@@ -53,7 +55,7 @@ const commonTheme = {
 
 export const getPalette = (mode: PaletteMode): PaletteOptions => ({
   mode,
-  ...(mode === 'light'
+  ...(mode === ThemeMode.LIGHT
     ? {
         // palette values for light mode
         ...commonTheme

src/models/ThemeMode.ts

@@ -0,0 +1,6 @@
+enum ThemeMode {
+  DARK = 'dark',
+  LIGHT = 'light'
+}
+
+export default ThemeMode;

src/pages/Trackers.tsx

@@ -4,11 +4,13 @@ import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { Alert, Box, Tab, Tabs, Typography, useTheme } from '@mui/material';
 import { useState } from 'react';
 
-import { useAppSelector, useThemeMode } from '../app/hooks';
+import { useAppSelector } from '../app/hooks';
 import TabPanel from '../components/TabPanel/TabPanel';
 import AddTrackerCard from '../components/TrackerList/AddTrackerCard';
 import DateSelector from '../components/TrackerList/DateSelector';
 import TrackerList from '../components/TrackerList/TrackerList';
+import ThemeMode from '../models/ThemeMode';
+import { selectThemeMode } from '../store/theme/theme.selectors';
 import {
   selectHiddenTrackers,
   selectTodoTrackers,
@@ -24,11 +26,11 @@ function Trackers() {
     setSelectedTab(newTab);
   };
   const theme = useTheme();
-  const themeMode = useThemeMode();
+  const themeMode = useAppSelector(selectThemeMode);
 
   const cardSxProp = {
     mb: 2,
-    bgcolor: themeMode === 'light' ? 'secondary.main' : theme.palette.grey[900]
+    bgcolor: themeMode === ThemeMode.LIGHT ? 'secondary.main' : theme.palette.grey[900]
   };
 
   return (

src/store/rootReducer.ts

@@ -1,9 +1,11 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
+import themeReducer from './theme/themeSlice';
 import trackersReducer from './trackers/trackersSlice';
 
 const rootReducer = combineReducers({
-  trackers: trackersReducer
+  trackers: trackersReducer,
+  theme: themeReducer
 });
 
 export default rootReducer;

src/store/store.ts

@@ -9,9 +9,9 @@ import {
   persistReducer,
   persistStore
 } from 'redux-persist';
+// defaults to localStorage for web
 import storage from 'redux-persist/lib/storage';
 
-// defaults to localStorage for web
 import rootReducer from './rootReducer';
 
 const persistConfig = {

src/store/theme/theme.selectors.ts

@@ -0,0 +1,7 @@
+import { RootState } from '../store';
+
+const selectThemeMode = (state: RootState) => {
+  return state.theme.themeMode;
+};
+
+export { selectThemeMode };

src/store/theme/themeSlice.ts

@@ -0,0 +1,29 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+
+import ThemeMode from '../../models/ThemeMode';
+
+export interface ThemeState {
+  themeMode: ThemeMode;
+}
+
+const initialState: ThemeState = {
+  themeMode: ThemeMode.LIGHT
+};
+
+export const themeSlice = createSlice({
+  name: 'theme',
+  initialState,
+  reducers: {
+    setThemeMode: (state, action: PayloadAction<ThemeMode>) => {
+      state.themeMode = action.payload;
+    },
+    toggleThemeMode: (state) => {
+      const { themeMode } = state;
+      state.themeMode = themeMode === ThemeMode.LIGHT ? ThemeMode.DARK : ThemeMode.LIGHT;
+    }
+  }
+});
+
+export const { setThemeMode, toggleThemeMode } = themeSlice.actions;
+
+export default themeSlice.reducer;