fix: preserve chosen theme when navigating

davidballester · Apr 18, 2020 · 88b4bd1 · 88b4bd1
1 parent abf57b8
commit 88b4bd1
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/src/components/theme-toggler/theme-toggler.component.js b/src/components/theme-toggler/theme-toggler.component.js
@@ -6,11 +6,13 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 import DarkModeIcon from '@material-ui/icons/Brightness3';
 import LightModeIcon from '@material-ui/icons/Brightness7';
 
-export default function ThemeToggler({ isDarkMode, toggleTheme, initializeTheme }) {
+export default function ThemeToggler({ isDarkMode, isInitialized, toggleTheme, initializeTheme }) {
   const darkModeBySystemPreferences = useMediaQuery('(prefers-color-scheme: dark)');
   useEffect(() => {
-    initializeTheme(darkModeBySystemPreferences);
-  }, [initializeTheme, darkModeBySystemPreferences]);
+    if (!isInitialized) {
+      initializeTheme(darkModeBySystemPreferences);
+    }
+  }, [isInitialized, initializeTheme, darkModeBySystemPreferences]);
   return (
     <IconButton onClick={toggleTheme} color="inherit" aria-label="Dark mode toggler">
       {isDarkMode && <LightModeIcon />}

diff --git a/src/components/theme-toggler/theme-toggler.container.js b/src/components/theme-toggler/theme-toggler.container.js
@@ -1,11 +1,12 @@
 import { connect } from 'react-redux';
 
 import ThemeToggler from './theme-toggler.component';
-import { toggleTheme, initializeTheme, isDarkMode } from '../../ducks/theme-toggler.duck';
+import { toggleTheme, initializeTheme, isDarkMode, isInitialized } from '../../ducks/theme-toggler.duck';
 
 function mapStateToProps(state) {
   return {
     isDarkMode: isDarkMode(state),
+    isInitialized: isInitialized(state),
   };
 }
 

diff --git a/src/ducks/theme-toggler.duck.js b/src/ducks/theme-toggler.duck.js
@@ -3,6 +3,7 @@ export const THEME_INITIALIZE = 'grapher/Theme/INITIALIZE';
 
 const initialState = {
   darkMode: undefined,
+  initialized: false,
 };
 
 export default function reducer(state = initialState, action) {
@@ -11,6 +12,7 @@ export default function reducer(state = initialState, action) {
       return {
         ...state,
         darkMode: action.payload,
+        initialized: true,
       };
     }
     case THEME_TOGGLE: {
@@ -41,3 +43,7 @@ export function initializeTheme(darkMode) {
 export function isDarkMode(state) {
   return state.theme.darkMode;
 }
+
+export function isInitialized(state) {
+  return state.theme.initialized;
+}