navbar updated'

server.js

@@ -119,12 +119,13 @@ app.get('/cartItems/:userid', (req, res) => {
  
 app.post('/updateCartItems/:userid', (req, res) => {
     const userid=req.params.userid
-    const newCartItems = req.body
-    if(isNaN(userid)){
-        db.collection('cartitems').updateOne({userId: userid},{$set:{cartItems:newCartItems}})
-        .then(result => { res.send(result).status(200) })
-        .catch(error => res.status(500).send(error))
-    } else {
-        res.status(500).json({ error: 'Invalid UserId' })
-    }
+    const newCartItems = req.body.ObjectId
+    console.log(req.body,userid)
+    // if(isNaN(userid)){
+    //     db.collection('cartitems').updateOne({userId: userid},{$set:{cartItems:[newCartItems]}})
+    //     .then(result => { res.send(result).status(200) })
+    //     .catch(error => res.status(500).send(error))
+    // } else {
+    //     res.status(500).json({ error: 'Invalid UserId' })
+    // }
 })
\ No newline at end of file

src/components/Banner/Hero.tsx

@@ -11,7 +11,7 @@ const Hero = () => {
              <h2>NEW ARRIVALS ONLY</h2>
         <div>
          <div className='hand-hand-icon'>
-               <p>new</p>
+               <p>New</p>
                <img src={hand_icon} alt=''/>
          </div>
           <p>Collections</p>
@@ -24,7 +24,7 @@ const Hero = () => {
          </div>  
  
          <div className='hero-right'>
-         <img src={hero_image} alt=""/>
+         <img src={hero_image} alt="" className='h-100'/>
          </div>
  
          

src/components/Login/Login.tsx

@@ -78,7 +78,7 @@ const Login: React.FC = memo(() => {
                     <button type="submit" >Login</button>
                 </form>
                 <p className='loginsignup-login'>
-                    <span>If new user please  <Link to="/register">Register</Link></span>
+                    <span>New user <Link to="/register">Register</Link></span>
                 </p>
                
             </div>

src/components/Navbar/NavButtons.tsx

+import React, { memo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../reduxstore/store';
+import { Link } from 'react-router-dom';
+
+
+type NavButtonsProps = {
+    handleLogout: () => void;
+}
+
+const NavButtons = memo((props:NavButtonsProps) => {
+    const user = useSelector((state: RootState) => state.userDetails.userDetails);
+    return (
+        <div>
+            { user && (Object.keys(user).length===0 && user.constructor === Object) ?(
+                <div className='nav-login-cart'>
+                    <Link to="/login"><button>Login</button></Link>
+                    <Link to="/register">
+                        <button>Register</button></Link>
+                </div>
+            ): (
+                <Link to="/">
+                    <button className='btn btn-danger' onClick={props.handleLogout}>Logout</button>
+                </Link>
+            ) }
+        </div>
+    );
+});
+
+export default NavButtons;
\ No newline at end of file

src/components/Navbar/Navbar.tsx

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './Navbar.css'
 import logo from './logo.png'
 import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../reduxstore/store';
+import { loginUser, logoutUser } from '../../reduxstore/userDetailsslice';
+import NavButtons from './NavButtons';
+
  
 const Navbar = () => {
-    //  const [menu,setMenu]=useState("Shop")
+    const user=useSelector((state:RootState)=>state.userDetails.userDetails)
+    const dispatch=useDispatch()
+    const handleLogout=()=>{
+        dispatch(logoutUser());
+    }
  
     return (
-        <div className='navbar'>
+        <div className='navbar' >
             <div className='nav-logo'>
                 <img src={logo} alt=""/>
                 <p>SHOPPER</p>
             </div>
-           
-            {/* <ul className="nav-menu">
-                <li onClick={()=>setMenu("Shop")} ><Link style={{textDecoration:"none"}} to="/">Shop</Link> {menu==="Shop"?<hr/>:<></>}</li>
-                <li onClick={()=>setMenu("mens")} ><Link style={{textDecoration:"none"}} to="/mens">Men</Link> {menu==="mens"?<hr/>:<></>}</li>
-                <li  onClick={()=>setMenu("Womens")}><Link style={{textDecoration:"none"}} to="/Womens">Women</Link> {menu==="Womens"?<hr/>:<></>}</li>
-                <li  onClick={()=>setMenu("kids")}><Link style={{textDecoration:"none"}}  to="/Kids">Kids</Link> {menu==="kids"?<hr/>:<></>}</li>
-            </ul> */}
-           
-            <div className='nav-login-cart'>
-                <Link to="/login"><button >Login</button> </Link>
-                <Link to="/register"><button >Register</button> </Link>
-            </div>
+            <NavButtons handleLogout={handleLogout}/>
         </div>
        
     );

src/components/catelog/Product.tsx

 import React, { memo } from 'react';
+import { useDispatch,useSelector } from 'react-redux';
+import { updateCartItems } from '../../reduxstore/updatecartSlice';
+import { RootState } from '../../reduxstore/store';
 
 type ProductType = {
     _id:string
@@ -15,9 +18,21 @@ type ProductType = {
 type ProductPropsType = {
     product: ProductType  | null
 }
+
 const Product = memo((props: ProductPropsType) => {
-    console.log(props.product)
+    const user= useSelector((state: RootState) => state.userDetails.userDetails)
+    const dispatch=useDispatch()
+  
     const {id,title,description,category,image,rating:{rate,count},qty,price}:ProductType= props.product!;
+
+    const handleAddtoCart=()=>{
+        if(Object.keys(user).length!=0){
+        dispatch(updateCartItems({userId:user.userId,updateCartItems:props.product}))
+        }    
+    }
+
+
+
     return (<div className='col-lg-4 col-md-2 col-sm-1 my-2' style={{width: "300px"}}>
         <div className="card" >
             <img src={image} className="img-fluid" style={{width:"100%",height:"200px"}} alt="..."/>
@@ -31,7 +46,7 @@ const Product = memo((props: ProductPropsType) => {
                     <li className="list-group-item">Price :{price}</li>
                 </ul>
                 <div className="card-body">
-                    <button className='btn btn-danger w-100'>Add To Cart</button>
+                    <button className='btn btn-danger w-100' onClick={handleAddtoCart}>Add To Cart</button>
                 </div>
         </div>
     </div>

src/components/catelog/Products.tsx

@@ -11,7 +11,7 @@ const Products = memo(() => {
     const dispatch=useDispatch()
     const products = useSelector((state: RootState) => state.products);
     const user = useSelector((state: RootState) => state.userDetails.userDetails)
-    console.log(products)
+    
     useEffect(() => {
         if (user !== null) {
             const isEmpty = Object.keys(user).length === 0 && user.constructor === Object;
@@ -19,6 +19,7 @@ const Products = memo(() => {
                 navigate('/login');
             } else {
                 dispatch(fetchProducts());
+                console.log(user)
             }
         } else {
             navigate('/login');

src/reduxstore/updatecartSlice.ts

@@ -9,7 +9,7 @@ type updateCartStateType = {
 
 type  CartItemType = {
     userId:string,
-    updateCartlist:any[]
+    updateCartlist:any
 }
 
 const initialState: updateCartStateType = {
@@ -19,6 +19,7 @@ const initialState: updateCartStateType = {
 };
 
 export const updateCartItems:any= createAsyncThunk('updatecart/updateCartItems', async ({userId,updateCartlist}:CartItemType) => {
+    console.log(updateCartlist)
     return await axios.post(`http://localhost:4000/updateCartItems/${userId}`,updateCartlist)
         .then(response => response.data);
 });

src/reduxstore/userDetailsslice.ts

 import { createSlice } from "@reduxjs/toolkit"
 export type UserDetailsType={
-    userDetails:{}|null
+    userDetails:any|null
 }
 const initialState:UserDetailsType={
     userDetails:{},
@@ -14,7 +14,7 @@ const userDetailsSlice=createSlice({
             state.userDetails=action.payload
         },
         logoutUser:(state)=>{
-            state.userDetails=[]
+            state.userDetails={}
         },
     },
 })