From 7ec3c0f9d79f9b79f4c7348155678850d8b8982d Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Tue, 24 Nov 2020 11:21:42 +0200
Subject: [PATCH] feat: Redux store persist gate.

---
 client/package.json             |  2 +-
 client/src/index.js             | 29 ++++++++++++------------
 client/src/services/axios.js    |  2 +-
 client/src/store/createStore.js | 40 ++++++++++++++++++---------------
 4 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/client/package.json b/client/package.json
index b992af0d1..56d99a20e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -89,7 +89,7 @@
     "react-use": "^13.26.1",
     "react-window": "^1.8.5",
     "redux": "^4.0.5",
-    "redux-localstorage": "^0.4.1",
+    "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
diff --git a/client/src/index.js b/client/src/index.js
index c884ec6b9..259b6683a 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -2,39 +2,40 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
+import { PersistGate } from 'redux-persist/integration/react';
 import 'services/yup';
 import App from 'components/App';
 import * as serviceWorker from 'serviceWorker';
-import createStore from 'store/createStore';
+import { store, persistor } from 'store/createStore';
 import AppProgress from 'components/NProgress/AppProgress';
 
-import {locale} from 'lang/en/locale';
-import whyDidYouRender from "@welldone-software/why-did-you-render";
+import whyDidYouRender from '@welldone-software/why-did-you-render';
 
 whyDidYouRender(React, {
   onlyLogs: true,
-  titleColor: "green",
-  diffNameColor: "aqua"
+  titleColor: 'green',
+  diffNameColor: 'aqua',
 });
 
-
 ReactDOM.render(
-  <Provider store={createStore}>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </PersistGate>
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 ReactDOM.render(
-  <Provider store={createStore}>
+  <Provider store={store}>
     <AppProgress />
   </Provider>,
-  document.getElementById('nprogress')
+  document.getElementById('nprogress'),
 );
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
\ No newline at end of file
+serviceWorker.unregister();
diff --git a/client/src/services/axios.js b/client/src/services/axios.js
index e24f81c53..604ce052b 100644
--- a/client/src/services/axios.js
+++ b/client/src/services/axios.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import React from 'react';
 import { Intent } from '@blueprintjs/core';
-import store from 'store/createStore';
+import { store } from 'store/createStore';
 import { logout } from 'store/authentication/authentication.actions';
 import AppToaster from 'components/AppToaster';
 import { FormattedMessage as T, useIntl } from 'react-intl';
diff --git a/client/src/store/createStore.js b/client/src/store/createStore.js
index da8009c5e..b9f3acd25 100644
--- a/client/src/store/createStore.js
+++ b/client/src/store/createStore.js
@@ -1,34 +1,35 @@
-import { createStore as createReduxStore, applyMiddleware, compose } from 'redux';
+import {
+  createStore as createReduxStore,
+  applyMiddleware,
+  compose,
+} from 'redux';
 import thunkMiddleware from 'redux-thunk';
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 import monitorReducerEnhancer from 'store/enhancers/monitorReducer';
-import loggerMiddleware from 'middleware/logger'
+import loggerMiddleware from 'middleware/logger';
 import rootReducer from 'store/reducers';
-import persistState from 'redux-localstorage'
 
-const persistPaths = ['dashboard', 'authentication'];
+const persistConfig = {
+  key: 'bigcapital:root',
+  blacklist: ['dashboard'],
+  storage,
+};
 
-const createStore = (initialState = {
-  // ...loadState(),
-}) => {
+const createStoreFactory = (initialState = {}) => {
   /**
   |--------------------------------------------------
   | Middleware Configuration
   |--------------------------------------------------
   */
-  const middleware = [
-    thunkMiddleware,
-    loggerMiddleware,
-  ];
+  const middleware = [thunkMiddleware, loggerMiddleware];
 
   /**
   |--------------------------------------------------
   | Store Enhancers
   |--------------------------------------------------
   */
-  const enhancers = [
-    monitorReducerEnhancer,
-    persistState(persistPaths, { key: 'bigcapital' }),
-  ];
+  const enhancers = [monitorReducerEnhancer];
   let composeEnhancers = compose;
 
   if (process.env.NODE_ENV === 'development') {
@@ -43,11 +44,14 @@ const createStore = (initialState = {
   |--------------------------------------------------
   */
   const store = createReduxStore(
-    rootReducer,
+    persistReducer(persistConfig, rootReducer),
     initialState,
-    composeEnhancers(applyMiddleware(...middleware), ...enhancers)
+    composeEnhancers(applyMiddleware(...middleware), ...enhancers),
   );
   store.asyncReducers = {};
   return store;
 };
-export default createStore();
+
+export const createStore = createStoreFactory;
+export const store = createStoreFactory();
+export const persistor = persistStore(store);