added redux-thunk

package-lock.json

@@ -28,6 +28,7 @@
         "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
         "redux-persist": "^6.0.0",
+        "redux-thunk": "^3.1.0",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }

package.json

@@ -23,6 +23,7 @@
     "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "redux-persist": "^6.0.0",
+    "redux-thunk": "^3.1.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/components/Cart/Cart.tsx

-import React, { memo,useMemo, useCallback, useEffect} from 'react';
+import React, { memo, useMemo, useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../reduxstore/store';
 import { fetchCartItems, updateCartItems, removeFromCart, clearCart, incrementQuantity, decrementQuantity } from '../../reduxstore/cartSlice';
@@ -12,20 +12,24 @@ const Cart = memo(() => {
     const capitalizedUserId = user && user.userId ? user.userId.charAt(0).toUpperCase() + user.userId.slice(1) : null;
 
     useEffect(() => {
+        if (user) {
             if (Object.keys(user).length === 0) {
                 navigate('/login')
             } else {
                 dispatch(fetchCartItems(user.userId))
             }
+        }
     }, [user])
     const handleCartChanges = () => {
+        if (user) {
             dispatch(updateCartItems({ userId: user.userId, updateCartItems: cartItems }))
         }
-    const totalPay=useMemo(()=>{
-        return cartItems.reduce((acc,curr)=>{
-          return acc=acc+ (parseInt(curr.price) * parseInt(curr.qty));
-    },0)
-},[cartItems])
+    }
+    const totalPay = useMemo(() => {
+        return cartItems.reduce((acc, curr) => {
+            return acc = acc + (parseInt(curr.price) * parseInt(curr.qty));
+        }, 0)
+    }, [cartItems])
 
 
     return (
@@ -59,9 +63,9 @@ const Cart = memo(() => {
                                                 <td>{item.price}</td>
                                                 <td>
                                                     <span className='d-flex justify-content-start align-items-center'>
-                                                    <button onClick={()=>{dispatch(decrementQuantity(item))}} className='btn btn-tranparent fw-bolder d-flex justify-content-center align-items-center' style={{ height: "15px", width: "15px" }}>-</button>
+                                                        <button onClick={() => { dispatch(decrementQuantity(item)) }} className='btn btn-tranparent fw-bolder d-flex justify-content-center align-items-center' style={{ height: "15px", width: "15px" }}>-</button>
                                                         <span> {item.qty} </span>
-                                                    <button onClick={()=>{dispatch(incrementQuantity(item))}} className='btn btn-tranparent fw-bolder d-flex justify-content-center align-items-center' style={{ height: "10px", width: "8px" }}>+</button>
+                                                        <button onClick={() => { dispatch(incrementQuantity(item)) }} className='btn btn-tranparent fw-bolder d-flex justify-content-center align-items-center' style={{ height: "10px", width: "8px" }}>+</button>
                                                     </span>
                                                 </td>
                                                 <td>$ {(item.price * item.qty).toFixed()}</td>

src/components/catelog/Product.tsx

@@ -26,11 +26,13 @@ const Product = memo((props: ProductPropsType) => {
     const {id,title,description,category,image,rating:{rate,count},qty,price}:ProductType= props.product!;
 
     const handleAddtoCart=()=>{
+        if(user){
         if(Object.keys(user).length!=0){
         // dispatch(updateCartItems({userId:user.userId,updateCartItems:props.product}))
         dispatch(addToCart(props.product))
         }  
     }  
+    }
 
 
 

src/components/catelog/Products.tsx

@@ -13,15 +13,20 @@ const Products = memo(() => {
     const user = useSelector((state: RootState) => state.userDetails.userDetails)
     
     useEffect(() => {
-        if (user !== null) {
-            const isEmpty = Object.keys(user).length === 0 && user.constructor === Object;
-            if (isEmpty) {
-                navigate('/login');
+        // if (user !== null) {
+        //     const isEmpty = Object.keys(user).length === 0 && user.constructor === Object;
+        //     if (isEmpty) {
+        //         navigate('/login');
+        //     } else {
+        //         dispatch(fetchProducts());
+        //     }
+        // } else {
+        //     navigate('/login');
+        // }
+        if (user) {
+            dispatch(fetchProducts())
           } else {
-                dispatch(fetchProducts());
-            }
-        } else {
-            navigate('/login');
+            navigate('/login')
           }
 
     }, [user])

src/reduxstore/cartSlice.ts

@@ -26,7 +26,7 @@ export const fetchCartItems: any = createAsyncThunk('cart/fetchCartItems', async
 export const updateCartItems: any = createAsyncThunk('updatecart/updateCartItems', async ({ userId, updateCartItems }: CartItemType) => {
     return await axios.patch(`http://localhost:4000/updateCartItems/${userId}`, updateCartItems)
         .then(response => {
-            console.log(response.data);
+            // console.log(response.data);
             return response.data
         });
 });
@@ -77,6 +77,8 @@ const cartSlice = createSlice({
                     prevCartItems[index] = updatedItem;
                     state.cartItems = [...prevCartItems];
                 }
+            }else{
+                alert("Use remove button")
             }
         }
     },

src/reduxstore/store.ts

-import { configureStore } from '@reduxjs/toolkit'
+import { configureStore ,Tuple} from '@reduxjs/toolkit'
 import cartReducer,{CartStateType} from './cartSlice'
 import productsReducer,{ProductsStateType} from './productsSlice'
 import usersReducer,{UsersStateType} from './usersSlice'
 import userDetailsslice,{UserDetailsType} from './userDetailsslice'
 import sessionStorage from 'redux-persist/es/storage/session'
 import { persistReducer, persistStore } from 'redux-persist';
+import { thunk } from 'redux-thunk'
 
 const persistConfig={
     key: "root", 
-    storage:sessionStorage
+    storage:sessionStorage,
 }
 export type RootState= {
     products:ProductsStateType;
@@ -24,6 +25,7 @@ const store=configureStore({
         users: usersReducer,
         userDetails:persistUserDetailsReducer
     },
+    middleware:()=>new Tuple(thunk)
 })
 
 export const  persistor = persistStore(store);

src/reduxstore/userDetailsslice.ts

 import { createSlice } from "@reduxjs/toolkit"
+
+type  User = {
+    userId: string;
+    fname: string;  lname: string;  email: string
+    mobile: string;
+    password: string;}|null;
+
 export type UserDetailsType={
-    userDetails:any|null
+    userDetails:User|null
 }
 const initialState:UserDetailsType={
-    userDetails:{},
+    userDetails:null
 }
 
 const userDetailsSlice=createSlice({
@@ -14,7 +21,7 @@ const userDetailsSlice=createSlice({
             state.userDetails=action.payload
         },
         logoutUser:(state)=>{
-            state.userDetails={}
+            state.userDetails=null
         },
     },
 })