From 8b16a37c1b2ab850ecb3002a62b213f573abc320 Mon Sep 17 00:00:00 2001 From: nickolasBenakis Date: Wed, 18 Mar 2020 01:52:52 +0200 Subject: [PATCH 1/4] Add prettier rules in the project --- .prettierrc | 7 +++++++ package-lock.json | 6 ++++++ package.json | 3 ++- 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..0bb20dd --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "useTabs": false, + "singleQuote": true, + "trailingComma": "all", + "endOfLine": "auto", + "jsxBracketSameLine": false +} diff --git a/package-lock.json b/package-lock.json index 01b299f..180ab37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11245,6 +11245,12 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "1.19.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", + "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", + "dev": true + }, "pretty-bytes": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz", diff --git a/package.json b/package.json index ae4fdee..2fa03e3 100644 --- a/package.json +++ b/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" } } From 60ec17dac7308ff09d7c1eb8fe89c0d9ae3bedd7 Mon Sep 17 00:00:00 2001 From: nickolasBenakis Date: Wed, 18 Mar 2020 01:53:30 +0200 Subject: [PATCH 2/4] Cleaner structure es6 in reducer --- src/state/createStore.js | 38 ++++++++++++++------------------------ 1 file changed, 14 insertions(+), 24 deletions(-) diff --git a/src/state/createStore.js b/src/state/createStore.js index 0ee24bd..c54fbb8 100644 --- a/src/state/createStore.js +++ b/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; From eab0842bbf7d5ef9f61087196b2fab6ce8c00023 Mon Sep 17 00:00:00 2001 From: nickolasBenakis Date: Wed, 18 Mar 2020 01:53:51 +0200 Subject: [PATCH 3/4] Persist state on theme --- src/components/toggle.jsx | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/components/toggle.jsx b/src/components/toggle.jsx index a16d14b..f502296 100644 --- a/src/components/toggle.jsx +++ b/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 (
- +
); @@ -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); From b1ef97da6e9ae95bc7f2cd4595eb2f656e020205 Mon Sep 17 00:00:00 2001 From: nickolasBenakis Date: Wed, 18 Mar 2020 01:54:14 +0200 Subject: [PATCH 4/4] Memo Header for unssr renderings --- src/components/header.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header.jsx b/src/components/header.jsx index aaf3781..61b464b 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -18,4 +18,4 @@ const Header = ({ siteTitle, siteSubtitle }) => ( ); -export default Header; +export default React.memo(Header);