Dark mode should persist locally on browser #1

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "auto",
+  "jsxBracketSameLine": false
+}

package.json

@@ -41,6 +41,7 @@
     "eslint-plugin-import": "2.18.0",
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-react": "7.14.2",
-    "gatsby-plugin-eslint": "2.0.5"
+    "gatsby-plugin-eslint": "2.0.5",
+    "prettier": "^1.19.1"
   }
 }

src/components/header.jsx

@@ -18,4 +18,4 @@ const Header = ({ siteTitle, siteSubtitle }) => (
   </header>
 );
 
-export default Header;
+export default React.memo(Header);

src/components/toggle.jsx

@@ -10,16 +10,37 @@ class Toggle extends React.Component {
     this.toggleDarkTheme = this.toggleDarkTheme.bind(this);
   }
 
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      window.sessionStorage.getItem('darkTheme');
+      if (
+        window.sessionStorage.getItem('darkTheme')
+        && window.sessionStorage.getItem('darkTheme') !== null
+      ) {
+        this.toggleDarkTheme();
+      }
+    }
+  }
+
   toggleDarkTheme() {
     const { toggleDarkTheme, darkTheme } = this.props;
     toggleDarkTheme(!darkTheme);
+    if (typeof window !== 'undefined') {
+      window.sessionStorage.setItem('darkTheme', !darkTheme);
+    }
   }
 
   render() {
     const { darkTheme } = this.props;
     return (
       <div style={{ fontSize: '12px' }}>
-        <input className="tgl tgl-light" id="toggle" type="checkbox" onClick={this.toggleDarkTheme} checked={!darkTheme} />
+        <input
+          className="tgl tgl-light"
+          id="toggle"
+          type="checkbox"
+          onClick={this.toggleDarkTheme}
+          checked={!darkTheme}
+        />
         <label className="tgl-btn" htmlFor="toggle" />
       </div>
     );
@@ -28,5 +49,7 @@ class Toggle extends React.Component {
 
 export default connect(
   ({ darkTheme }) => ({ darkTheme }),
-  dispatch => ({ toggleDarkTheme: value => dispatch({ type: 'DARK_THEME', data: value }) }),
+  dispatch => ({
+    toggleDarkTheme: value => dispatch({ type: 'DARK_THEME', data: value }),
+  }),
 )(Toggle);

src/state/createStore.js

@@ -1,31 +1,21 @@
 import { createStore as reduxCreateStore } from 'redux';
 
 const reducer = (state, action) => {
-  if (action.type === 'UPDATE_SEARCH_TERM') {
-    const newState = Object.assign({}, state, {
-      search: action.data,
-    });
-    return newState;
+  switch (action.type) {
+    case 'UPDATE_SEARCH_TERM':
+      return { ...state, search: action.data };
+    case 'DARK_THEME': {
+      const body = document.body.classList;
+      if (action.data) body.add('dark-theme');
+      else body.remove('dark-theme');
+      return { ...state, darkTheme: action.data };
+    }
+    case 'UPDATE_SEARCHBAR_FIXED':
+      return { ...state, searchbarFixed: action.data };
+    default:
+      return state;
   }
-  if (action.type === 'DARK_THEME') {
-    const body = document.body.classList;
-
-    if (action.data) body.add('dark-theme');
-    else body.remove('dark-theme');
-
-    const newState = Object.assign({}, state, {
-      darkTheme: action.data,
-    });
-    return newState;
-  }
-  if (action.type === 'UPDATE_SEARCHBAR_FIXED') {
-    const newState = Object.assign({}, state, {
-      searchbarFixed: action.data,
-    });
-    return newState;
-  }
-  return state;
 };
 
-const createStore = () => reduxCreateStore(reducer, { });
+const createStore = () => reduxCreateStore(reducer, {});
 export default createStore;