Fixed the persistent issue and cart items for particular users

client/package.json

@@ -25,6 +25,7 @@
     "react-router-dom": "^6.8.0",
     "react-scroll": "^1.8.9",
     "react-spinners": "^0.13.8",
+    "redux-persist": "^6.0.0",
     "verb": "^0.8.10"
   },
   "devDependencies": {

client/src/Components/Cart.jsx

@@ -9,7 +9,12 @@ const Cart = () => {
     const dispatch = useDispatch();
     const cart = useSelector((state) => state.cart.cartItems);
     const cartTotal = useSelector((state) => state.cart);
-    // console.log(cart[0].cartQuantity);
+    const user = useSelector((state) => state.auth);
+    const cartItemUser =JSON.parse(user.token)
+    console.log(user.user.user._id);
+    console.log(cart);
+    console.log(cart.filter((el) => el.userId === user.user.user._id));
+    // console.log(cart.);
 
     const handleRemove = (product) => {
         dispatch(removeFromCart(product));
@@ -33,7 +38,7 @@ const Cart = () => {
 
             <div className="flex lg:justify-between lg:flex-row flex-col lg:my-0 my-10">
                 <div className="lg:flex-[3] ">
-                    {cart.map((item) => (
+                    {cart.filter((el) => el.userId === user.user.user._id).map((item) => (
                         <>
                             <div className="flex justify-between lg:flex-row flex-col px-10 py-8 lg:py-0">
                                 <img src={item.image} className='lg:w-[200px] w-[420px] object-contain mx-auto' alt="Hello" />

client/src/Components/Navbar.jsx

@@ -22,7 +22,7 @@ const Navbar = () => {
         if (logoutUser) {
             dispatch(reset())
             //TODO: below line should be removed after finding the solution for storing particular user's products in their own cart
-            dispatch(resetCart())
+            // dispatch(resetCart())
         }
     }
 

client/src/main.jsx

@@ -1,15 +1,21 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-import { BrowserRouter } from "react-router-dom"
-import store from './redux/store'
-import { Provider } from 'react-redux'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { BrowserRouter } from "react-router-dom";
+import store from "./redux/store";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+import { persistStore } from "redux-persist";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+let persistor = persistStore(store);
+
+ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <BrowserRouter>
-      <App />
+      <PersistGate persistor={persistor}>
+        <App />
+      </PersistGate>
     </BrowserRouter>
-  </Provider>,
-)
+  </Provider>
+);

client/src/redux/store.js

@@ -1,13 +1,37 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
 import cartReducer from "./Slices/cartSlice";
 import authReducer from "./Slices/authSlice";
 import wishlistReducer from "./Slices/wishlistSlice";
+import storage from "redux-persist/lib/storage";
+import { persistReducer } from "redux-persist";
 
+const cartPersistConfig = {
+  key: "cart",
+  storage,
+};
+
+const wishlistPersistConfig = {
+  key: "wishlist",
+  storage,
+};
+
+const authReducerPersistConfig = {
+  key: "auth",
+  storage: storage, // Do not use storage for authReducer
+  blacklist: ["user"], // Exclude 'user' field from being persisted
+};
+
+const reducer = combineReducers({
+  cart: persistReducer(cartPersistConfig, cartReducer),
+  auth: persistReducer(authReducerPersistConfig, authReducer),
+  wishlist: persistReducer(wishlistPersistConfig, wishlistReducer),
+});
+
+const persistendReducer = persistReducer(
+  { key: "root", version: 1, storage },
+  reducer
+);
 
 export default configureStore({
-    reducer: {
-        cart: cartReducer,
-        auth:authReducer,
-        wishlist:wishlistReducer
-    },
-})
+  reducer: persistendReducer,
+});