'cartcount'

src/components/Cart/Cart.tsx

@@ -26,7 +26,7 @@ const Cart = memo(() => {
         }
     }
 
-    const handleDontSave=()=>{
+    const handleDontSave = () => {
         if (user) {
             if (Object.keys(user).length === 0) {
                 navigate('/login')
@@ -45,10 +45,14 @@ const Cart = memo(() => {
     return (
         <div>
             <div>
-                <button type="button" className="btn btn-primary mx-2" data-bs-toggle="modal" data-bs-target="#cartModal">
+                <button type="button" className="btn btn-primary mx-2 position-relative" data-bs-toggle="modal" data-bs-target="#cartModal">
                     <span className='bi bi-cart'></span> Cart
+                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+                        {cartItems!=null?<span>{cartItems.length}</span>:0}
+                        <span className="visually-hidden">Cart Items Count</span>
+                    </span>
                 </button>
-                <div className="modal fade"  data-bs-backdrop="static"  id="cartModal" tabIndex={-1} aria-labelledby="cartModalLabel" aria-hidden="true">
+                <div className="modal fade" data-bs-backdrop="static" id="cartModal" tabIndex={-1} aria-labelledby="cartModalLabel" aria-hidden="true">
                     <div className="modal-dialog">
                         <div className="modal-content">
                             <div className="modal-header">

src/components/Home.tsx

@@ -2,14 +2,26 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 // import axios from 'axios';
 // import { fetchProducts,ProductsStateType } from '../reduxstore/productsSlice';
 // import { fetchUsers,UsersStateType } from '../reduxstore/usersSlice';
-// import {useDispatch,useSelector } from 'react-redux';
-// import { RootState } from '../reduxstore/store';
+import {useDispatch,useSelector } from 'react-redux';
+import { RootState } from '../reduxstore/store';
+import { useNavigate } from 'react-router-dom';
 // import { fetchCartItems } from '../reduxstore/cartSlice';
 // import { updateCartItems ,UpdateCartStateType} from '../reduxstore/updatecartSlice';
 import Hero from './Banner/Hero';
 
 
 const Home = memo(() => {
+  const navigate=useNavigate()
+  const user = useSelector((state: RootState) => state.userDetails.userDetails)
+    
+  useEffect(() => {
+      if (user) {
+          navigate('/products')
+        } else {
+          navigate('/login')
+        }
+
+  }, [user])
   // const dispatch=useDispatch()
   // const users=useSelector((state:RootState)=> state.cart.cartItems)
   // const Items=[{"_id":"65cc84a4a897e49b4c752f23","id":1,"title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops","price":109.95,"description":"Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday","category":"men's clothing","image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg","rating":{"rate":3.9,"count":120}},{"_id":"65cc84a4a897e49b4c752f24","id":2,"title":"Mens Casual Premium Slim Fit T-Shirts ","price":22.3,"description":"Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.","category":"men's clothing","image":"https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg","rating":{"rate":4.1,"count":259}},{"_id":"65cc84a4a897e49b4c752f25","id":3,"title":"Mens Cotton Jacket","price":55.99,"description":"great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.","category":"men's clothing","image":"https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg","rating":{"rate":4.7,"count":500}}]

src/components/Login/Login.tsx

-import React, { memo, useState,useEffect,useCallback } from 'react';
+import React, { memo, useState, useEffect, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import "./Login.css"
 import { useNavigate } from 'react-router-dom';
-import {useSelector, useDispatch} from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import { fetchUsers } from '../../reduxstore/usersSlice';
 import { RootState } from '../../reduxstore/store';
 import { loginUser } from '../../reduxstore/userDetailsslice';
 
- 
+
 const Login: React.FC = memo(() => {
-    const navigate=useNavigate()
-    const dispatch=useDispatch()
-    const users=useSelector((state:RootState)=> state.users.users)
+    const navigate = useNavigate()
+    const dispatch = useDispatch()
+    const users = useSelector((state: RootState) => state.users.users)
+    const user = useSelector((state: RootState) => state.userDetails.userDetails)
 
     const [error, setError] = useState<string>('');
-    
+
     const [values, setValues] = useState<any>({
         userId: "",
         password: ""
-        })
- 
-  useEffect(() => {
+    })
+
+    useEffect(() => {
         dispatch(fetchUsers());
-  }, []);
-   
- 
+    }, []);
+    useEffect(() => {
+        if (user) {
+            navigate('/products')
+        } else {
+            navigate('/login')
+        }
+
+    }, [user])
+
+
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        users.map((user)=>{
-            if(user.userId==values.userId.trim()){
-                if(user.password==values.password.trim()){
+        users.map((user) => {
+            if (user.userId == values.userId.trim()) {
+                if (user.password == values.password.trim()) {
                     // console.log(user)  
-                   dispatch(loginUser(user))              
-                   navigate("/products")
+                    dispatch(loginUser(user))
+                    navigate("/products")
 
                 }
-                else{
+                else {
                     setError(("UserId/Password is incorrect"))
                 }
             }
-            else{
+            else {
                 setError(("UserId/Password is incorrect"))
             }
         })
-       
-        
+
+
     };
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const { name, value } = e.target;
-        setValues({ ...values, [name]: value })     
-      };
- 
+        setValues({ ...values, [name]: value })
+    };
+
     return (
         <div className='loginsignup py-5'>
             <div className='loginsignup-container'>
@@ -61,11 +70,11 @@ const Login: React.FC = memo(() => {
                         <input
                             type="text"
                             placeholder='User Id'
-                            value={values.userId} 
+                            value={values.userId}
                             name='userId'
                             onChange={handleChange}
                         />
-                        
+
                         <input
                             type="password"
                             placeholder='Password'
@@ -74,16 +83,16 @@ const Login: React.FC = memo(() => {
                             onChange={handleChange}
                         />
                     </div>
-                    {error!="" && <span style={{textAlign:"center",color:"red"}}>{error}</span>}
+                    {error != "" && <span style={{ textAlign: "center", color: "red" }}>{error}</span>}
                     <button type="submit" >Login</button>
                 </form>
                 <p className='loginsignup-login'>
                     <span>New user <Link to="/register">Register</Link></span>
                 </p>
-               
+
             </div>
         </div>
     );
 });
- 
+
 export default Login;
\ No newline at end of file