Add 30 n123456884

webapp/package-lock.json

@@ -24,6 +24,7 @@
         "@types/bcrypt": "^5.0.0",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
+        "@types/redux-persist": "^4.0.0",
         "apexcharts": "^3.42.0",
         "autoprefixer": "10.4.14",
         "axios": "^1.4.0",
@@ -1665,6 +1666,27 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/redux-persist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/redux-persist/-/redux-persist-4.0.0.tgz",
+      "integrity": "sha512-VyDn75G7+Xkebp5Lxowk2t7HeT4VLSy92nyoQu1dZxk+ySBBdvV0yVR/upE4z24eVFxMp6Fo3CisQpkl4v1k3w==",
+      "license": "MIT",
+      "dependencies": {
+        "redux": "^3.6.0"
+      }
+    },
+    "node_modules/@types/redux-persist/node_modules/redux": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-3.7.2.tgz",
+      "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.2.1",
+        "lodash-es": "^4.2.1",
+        "loose-envify": "^1.1.0",
+        "symbol-observable": "^1.0.3"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.3",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
@@ -5919,6 +5941,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
       "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "license": "MIT",
       "peerDependencies": {
         "redux": ">4.0.0"
       }
@@ -6708,6 +6731,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/synckit": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.5.tgz",

webapp/package.json

@@ -25,6 +25,7 @@
     "@types/bcrypt": "^5.0.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/redux-persist": "^4.0.0",
     "apexcharts": "^3.42.0",
     "autoprefixer": "10.4.14",
     "axios": "^1.4.0",

webapp/src/redux/provider.tsx

@@ -7,10 +7,17 @@
  */
 
 import React from "react"
-import { store } from './store'
 import { Provider } from "react-redux"
+import { PersistGate } from 'redux-persist/integration/react';
+import { store, persistor } from './store';
 
 export function ReduxProvider({children} : {children  : React.ReactNode})
 {
-    return <Provider store={store}>{children}</Provider>
+    return (
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                {children}
+            </PersistGate>
+        </Provider>
+    )
 }

webapp/src/redux/store.ts

@@ -3,11 +3,14 @@
  * @description Redux store , all the app state goes right here
  * * source : https://www.youtube.com/watch?v=Yokjzp91A4o
  */
-import { TypedUseSelectorHook , useSelector } from 'react-redux';
-import { configureStore } from '@reduxjs/toolkit'
-import authReducer from './features/auth-slice'
-import themeTypeReducer from './features/theme-slice'
-import alertReducer from './features/alert-slice'
+import { TypedUseSelectorHook, useSelector } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { combineReducers } from 'redux';
+import authReducer from './features/auth-slice';
+import themeTypeReducer from './features/theme-slice';
+import alertReducer from './features/alert-slice';
 import settingsReducer from './features/settings-slice';
 import sidebarReducer from './features/sidebar-slice';
 import servicesReducer from './features/services-slice';
@@ -19,26 +22,49 @@ import equipmentsReducer from './features/equipments-slice';
 import expensesReducer from './features/expenses-slice';
 import incomesReducer from './features/incomes-slice';
 
-// init the store
+// Combine all reducers
+const rootReducer = combineReducers({
+  authReducer, // handle auth states
+  themeTypeReducer, // handle app theme
+  alertReducer, // handle app alert
+  settingsReducer, // handle the app settings
+  sidebarReducer, // handle dashboard sidebar state
+  servicesReducer, // handle the services page state
+  membersReducer, // handle the members page state
+  workersReducer, // handle the workers page state
+  productsReducer, // handle the products page state
+  statisticsReducer, // handle the statistics state
+  equipmentsReducer, // handle the equipments state
+  expensesReducer, // handle the expenses state
+  incomesReducer, // handle the incomes state
+});
+
+// Persist config
+const persistConfig = {
+  key: 'root',
+  version: 1,
+  storage,
+  whitelist: ['settingsReducer', 'authReducer', 'themeTypeReducer'], // Only persist these reducers
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+// Configure the store
 export const store = configureStore({
-    reducer: { // get state and do some work & update it after that
-        authReducer, // handle auth states
-        themeTypeReducer, // handle app theme
-        alertReducer, // handle app alert
-        settingsReducer, // handle the app settings
-        sidebarReducer, // handle dashboard sidebar state
-        servicesReducer, // handle the services page state
-        membersReducer, // handle the members page state
-        workersReducer, // handle the workers page state
-        productsReducer, // handle the products page state
-        statisticsReducer, // handle the statistics state
-        equipmentsReducer, // handle the equipments state
-        expensesReducer, // handle the expenses state
-        incomesReducer, // handle the incomes state
-    }
-})
-// export the needed types
-export type RootState = ReturnType<typeof store.getState>
-export type AppDispatch = typeof store.dispatch
-// export the store selector
-export const useAppSelector : TypedUseSelectorHook<RootState> = useSelector
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+});
+
+export const persistor = persistStore(store);
+
+// Export types
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+// Export the store selector
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

webapp/src/redux/types.d.ts

@@ -0,0 +1,19 @@
+import { RootState, AppDispatch } from './store';
+
+declare module 'react-redux' {
+  interface DefaultRootState extends RootState {}
+  function useDispatch(): AppDispatch;
+}
+
+declare module 'redux-persist' {
+  interface PersistState {
+    version: number;
+    rehydrated: boolean;
+  }
+}
+
+declare module 'redux-persist/integration/react' {
+  import { PersistGateProps } from 'redux-persist/es/integration/react';
+  export { PersistGate };
+  export const PersistGate: React.ComponentType<PersistGateProps>;
+}