feat: replace redux-localstorage with redux-persist

- Update store configuration to use redux-persist instead of redux-localstorage
- Add PersistGate wrapper component for state rehydration
- Configure whitelist-based persistence for better control over persisted state

Author: jorilindell

package-lock.json

@@ -42,7 +42,7 @@
     "react-router-dom": "^6.23.1",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.0",
-    "redux-localstorage": "^0.4.1",
+    "redux-persist": "^6.0.0",
     "redux-promise": "^0.6.0",
     "sass": "^1.77.4",
     "sass-loader": "^14.2.1",

package.json

@@ -6,7 +6,9 @@ import { createMemoryHistory } from 'history';
 import { compose, applyMiddleware, legacy_createStore as createStore } from 'redux';
 import { Provider } from 'react-redux';
 import promiseMiddleware from 'redux-promise';
-import persistState from 'redux-localstorage';
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage'; // localStorage
+import { PersistGate } from 'redux-persist/integration/react';
 import 'bootstrap-sass';
 
 import queueHandler from './actions/queueHandler';
@@ -36,15 +38,38 @@ import isomorphicFetch from 'isomorphic-fetch';
 isomorphicFetch;
 moment.locale('fi');
 
-const stateToPersist = ['data', 'auth', 'updateQueue', 'unitsByUpdateTime', 'unitsByUpdateCount', 'serviceGroup'];
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: ['auth', 'updateQueue', 'unitsByUpdateTime', 'unitsByUpdateCount', 'serviceGroup'], // Only persist these
+  transforms: [
+    // Transform to exclude loading from data if we include data
+    {
+      in: (state, key) => {
+        if (key === 'data' && state) {
+          // eslint-disable-next-line no-unused-vars
+          const { loading, ...stateWithoutLoading } = state;
+          return stateWithoutLoading;
+        }
+        return state;
+      },
+      // eslint-disable-next-line no-unused-vars
+      out: (state, key) => state
+    }
+  ]
+};
 
-const finalCreateStore = compose(
-  applyMiddleware(promiseMiddleware),
-  persistState(stateToPersist))(createStore);
+const persistedReducer = persistReducer(persistConfig, rootReducer);
 
-const enableReduxDevTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
+const store = createStore(
+  persistedReducer,
+  compose(
+    applyMiddleware(promiseMiddleware),
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  )
+);
 
-const store = finalCreateStore(rootReducer, enableReduxDevTools);
+const persistor = persistStore(store);
 window.store = store;
 
 const rootElement = document.getElementById('app');
@@ -53,24 +78,26 @@ const root = createRoot(rootElement);
 // Render the main component into the dom
 root.render(
   <Provider store={store}>
-    <BrowserRouter history={createMemoryHistory()}>
-      <Routes>
-        <Route path="/login" element={<LoginScreen />} />
-        <Route path="/" element={<App />}>
-            <Route exact path="/" element={<DashBoard />} />
-            <Route path="/group" element={<GroupList />} />
-            <Route path="/group/:groupId" element={<UnitList />} />
-            <Route path="/group/:groupId/mass-edit" element={<UnitMassEditPropertySelect />} />
-            <Route path="/group/:groupId/mass-edit/:propertyId" element={<UnitMassEdit />} />
-            <Route path="/unit/:unitId" element={<UnitDetails />} />
-            <Route path="/unit/:unitId/history" element={<UnitHistory />} />
-            <Route path="/unit/:unitId/update/:propertyId/:valueId" element={<UpdateConfirmation />} />
-            <Route path="/unit/:unitId/delete/:propertyId" element={<DeleteConfirmation />} />
-            <Route path="/queue" element={<UpdateQueue />} />
-            <Route path="*" element={<NotFound />} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
+    <PersistGate loading={<div>Ladataan...</div>} persistor={persistor}>
+      <BrowserRouter history={createMemoryHistory()}>
+        <Routes>
+          <Route path="/login" element={<LoginScreen />} />
+          <Route path="/" element={<App />}>
+              <Route exact path="/" element={<DashBoard />} />
+              <Route path="/group" element={<GroupList />} />
+              <Route path="/group/:groupId" element={<UnitList />} />
+              <Route path="/group/:groupId/mass-edit" element={<UnitMassEditPropertySelect />} />
+              <Route path="/group/:groupId/mass-edit/:propertyId" element={<UnitMassEdit />} />
+              <Route path="/unit/:unitId" element={<UnitDetails />} />
+              <Route path="/unit/:unitId/history" element={<UnitHistory />} />
+              <Route path="/unit/:unitId/update/:propertyId/:valueId" element={<UpdateConfirmation />} />
+              <Route path="/unit/:unitId/delete/:propertyId" element={<DeleteConfirmation />} />
+              <Route path="/queue" element={<UpdateQueue />} />
+              <Route path="*" element={<NotFound />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </PersistGate>
   </Provider>
 );