From 88b4bd1b870e3c66bc24a497b28b4824910d4c79 Mon Sep 17 00:00:00 2001
From: David Ballester Mena <david.ballester.mena@gmail.com>
Date: Sat, 18 Apr 2020 13:51:33 +0200
Subject: [PATCH] fix: preserve chosen theme when navigating

---
 src/components/theme-toggler/theme-toggler.component.js | 8 +++++---
 src/components/theme-toggler/theme-toggler.container.js | 3 ++-
 src/ducks/theme-toggler.duck.js                         | 6 ++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/theme-toggler/theme-toggler.component.js b/src/components/theme-toggler/theme-toggler.component.js
index 8e041f0..59aef70 100644
--- 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
index 2b200c6..bffe2ec 100644
--- 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
index d753710..d638201 100644
--- 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;
+}