persisting selected theme to localStorage

.vscode/settings.json

@@ -25,5 +25,8 @@
       "language": "typescriptreact",
       "autoFix": true
     }
-  ]
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

src/components/layout/Header.tsx

@@ -78,7 +78,7 @@ const ThemeSwitcherButton = styled('button')`
     background-color: transparent;
     color: ${props => props.theme.colors.white};
   }
-`
+` 
 
 const Header: React.SFC<HeaderProps> = ({ title }) => (
   <Wrapper>

src/configureStore.ts

@@ -22,7 +22,7 @@ export default function configureStore(history: History, initialState: Applicati
   // we'll be passing from our entry point.
   const store = createStore(
     createRootReducer(history),
-    initialState,
+    // initialState,
     composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
   )
 

src/containers/LayoutContainer.tsx

@@ -32,7 +32,7 @@ const LayoutContainer: React.FC<LayoutContainerRenderProps> = ({ render, childre
 
   // Create the `setTheme` handler. We use the `dispatch` we got from `useDispatch()` to create said selector.
   const setTheme = (color: ThemeColors) => dispatch(layoutActions.setTheme(color))
-
+  console.log(localStorage.getItem('theme'))
   // Create a render/children props wrapper with the above variables set as a callback.
   if (render) {
     return render({ theme, setTheme })

src/store/layout/actions.ts

@@ -9,4 +9,7 @@ import { LayoutActionTypes, ThemeColors } from './types'
 // Remember, you can also pass parameters into an action creator. Make sure to
 // type them properly as well.
 
-export const setTheme = (theme: ThemeColors) => action(LayoutActionTypes.SET_THEME, theme)
+export const setTheme = (theme: ThemeColors) => {
+  localStorage.setItem('theme', JSON.stringify(theme)) // setting the theme to localState
+  return action(LayoutActionTypes.SET_THEME, theme)
+}

src/store/layout/reducer.ts

@@ -1,11 +1,12 @@
 import { Reducer } from 'redux'
 import { LayoutState, LayoutActionTypes } from './types'
 
+// checking if localStorage is !null
+const persistTheme = localStorage.getItem('theme') !== null ? JSON.parse(localStorage.getItem('theme') || '{}') : 'light'
 // Type-safe initialState!
 export const initialState: LayoutState = {
-  theme: 'light'
+  theme: persistTheme
 }
-
 // Thanks to Redux 4's much simpler typings, we can take away a lot of typings on the reducer side,
 // everything will remain type-safe.
 const reducer: Reducer<LayoutState> = (state = initialState, action) => {

src/store/layout/types.ts

@@ -14,5 +14,5 @@ export enum LayoutActionTypes {
 // Declare state types with `readonly` modifier to get compile time immutability.
 // https://github.com/piotrwitek/react-redux-typescript-guide#state-with-type-level-immutability
 export interface LayoutState {
-  readonly theme: ThemeColors
+   theme: ThemeColors
 }