Feature aadec : storing user interaction cart items in localstorage to fetch back

src/App.js

@@ -19,12 +19,16 @@ import Collections from "./Pages/Collections";
 import Offers from "./Pages/Offers";
 function App() {
   const { theme } = useContext(ShopContext);
+  const user = localStorage.getItem("signinemail")
   return (
     <div className={`${theme}_app`}>
       <BrowserRouter>
         <Navbar />
         <Routes>
-          <Route path="/" element={<Shop />} />
+          <Route path="/" element={
+              user !== ""?
+            <Shop /> : <LoginSignup/>
+          } />
           <Route
             path="/men"
             element={<ShopCategory banner={men_banner} category="men" />}

src/Components/Navbar/Navbar.jsx

@@ -5,7 +5,7 @@ import cart_icon from '../Assets/cart_icon.png';
 import cart_icon_dark from '../Assets/cart_icon_dark.png';
 import moonIcon from '../Assets/dark_mode.png';
 import sunIcon from '../Assets/light_mode.png';
-import { Link } from 'react-router-dom';
+import {Link, useNavigate} from 'react-router-dom';
 import { ShopContext } from '../../Context/ShopContext';
 
 const Navbar = () => {
@@ -26,6 +26,14 @@ const Navbar = () => {
             dnav.classList.remove("dark");
         }
     };
+    const navigate = useNavigate()
+
+    const credentials = localStorage.getItem("signinemail")
+
+    const LogOutClick = () => {
+        localStorage.setItem("signinemail","")
+        navigate("/login")
+    }
 
     return (
         <div className={`navbar`} id="nav">
@@ -54,7 +62,7 @@ const Navbar = () => {
                 </li>
             </ul>
             <div className="nav-login-cart">
-                <Link to='/login'><button className='log_btn'>Login</button></Link>
+                {credentials !== "" && <button onClick={LogOutClick} className='log_btn'>Log Out</button>}
                 <Link to='/cart'><img src={icon} alt="" className='cart' /></Link>
                 <div className="nav-cart-count">{getTotalCartItems()}</div>
                 <div className='dark_btn'>

src/Context/ShopContext.jsx

@@ -1,10 +1,12 @@
 import React, { createContext, useState } from "react";
 import all_product from "../Components/Assets/all_product";
+import {useLocalStorage} from "../Hooks/uselocalstorage";
 
 export const ShopContext = createContext(null);
 
 const ShopContextProvider = (props) => {
-  const [cartItems, setcartItems] = useState([]);
+  const [cartItems, setcartItems] = useLocalStorage("shopping cart",[]);
+
   const [theme,setTheme]=useState("dark");
   const addToCart = (itemId, size, quantity) => {
     const existingCartItemIndex = cartItems.findIndex(item => item.id === itemId && item.size === size);
@@ -19,27 +21,30 @@ const ShopContextProvider = (props) => {
         }
         return item;
       });
+
       setcartItems(updatedCartItems);
     } else {
       const cartProduct = all_product.find((product) => product.id === itemId);
       cartProduct.size = size;
       cartProduct.quantity = quantity;
       setcartItems([...cartItems, cartProduct]);
     }
+
+
   };
 
   const removeFromCart = (itemId) => {
     setcartItems(cartItems.filter((product) => product.id !== itemId));
   };
 
   const getTotalCartAmount = () => {
-    return cartItems.reduce((total, product) => total + (product.new_price * product.quantity), 0);
+    return  cartItems.reduce((total, product) => total + (product.new_price * product.quantity), 0);
   };
 
 
 
   const getTotalCartItems = () => {
-    return cartItems.length;
+    return cartItems.length
   };
 
   const contextValue = {

src/Hooks/uselocalstorage.jsx

@@ -0,0 +1,18 @@
+import {useEffect, useState} from "react";
+
+export function useLocalStorage(key, initialValue ) {
+    const [value, setValue] = useState(() =>{
+        const jsonValue = localStorage.getItem(key)
+        if(jsonValue != null) return JSON.parse(jsonValue)
+
+        // if(typeof initialValue === "function") return initialValue()
+         return initialValue
+    })
+
+
+    useEffect(()=>{
+        localStorage.setItem(key, JSON.stringify(value))
+    }, [key, value])
+
+    return [value, setValue]
+}

src/Pages/LoginSignup.jsx

@@ -1,31 +1,81 @@
-import React from 'react'
+import React, {useState} from 'react'
 import * as Components from './Components';
+import {useNavigate} from "react-router-dom";
 
 
 const LoginSignup = () => {
   const [signIn, toggle] = React.useState(true);
+  const [formData, setFormData] = useState({
+      name : "",
+      email : "",
+      password: ""
+  })
+    const navigate = useNavigate()
+
+    const handleOnChange = (e) => {
+      setFormData({
+          ...formData,
+          [e.target.name]: e.target.value
+      })
+    }
+
+    const SignUp = (e) => {
+      e.preventDefault()
+        const email = localStorage.getItem("email")
+        if(formData.email === email){
+            alert("already signed In with this account")
+        }
+        else{
+            localStorage.setItem("name",formData.name)
+            localStorage.setItem("email",formData.email)
+            localStorage.setItem("password",formData.password)
+            localStorage.setItem("signinemail",formData.email )
+            navigate("/")
+        }
+
+    }
+  function SignIn(e){
+      e.preventDefault()
+      const email = localStorage.getItem("email")
+      const password = localStorage.getItem("password")
+
+      if (password !== formData.password || email !== formData.email){
+          alert("Wrong credentials")
+      }
+      else {
+          localStorage.setItem("signinemail",formData.email )
+          navigate("/")
+      }
+  }
+
   return(
     <Components.div>
         <Components.Container>
-          <Components.SignUpContainer signinIn={signIn}>
-              <Components.Form>
-                  <Components.Title>Create Account</Components.Title>
-                  <Components.Input type='text' placeholder='Name' />
-                  <Components.Input type='email' placeholder='Email' />
-                  <Components.Input type='password' placeholder='Password' />
-                  <Components.Button>Sign Up</Components.Button>
-              </Components.Form>
-          </Components.SignUpContainer>
-
-          <Components.SignInContainer signinIn={signIn}>
-               <Components.Form>
-                   <Components.Title>Sign in</Components.Title>
-                   <Components.Input type='email' placeholder='Email' />
-                   <Components.Input type='password' placeholder='Password' />
-                   <Components.Anchor href='#'>Forgot your password?</Components.Anchor>
-                   <Components.Button>Sigin In</Components.Button>
-               </Components.Form>
-          </Components.SignInContainer>
+
+              <Components.SignUpContainer signinIn={signIn}>
+                  <Components.Form onSubmit={SignUp}>
+                      <Components.Title>Create Account</Components.Title>
+                      <Components.Input required onChange={handleOnChange} value={formData.name} name="name" type='text' placeholder='Name' />
+                      <Components.Input required onChange={handleOnChange} value={formData.email} type='email' name="email" placeholder='Email' />
+                      <Components.Input required onChange={handleOnChange} value={formData.password} type='password' name="password" placeholder='Password' />
+                      <Components.Button type="submit">Sign Up</Components.Button>
+                  </Components.Form>
+              </Components.SignUpContainer>
+
+
+
+              <Components.SignInContainer signinIn={signIn}>
+                       <Components.Form onSubmit={SignIn}>
+
+                           <Components.Title>Sign in</Components.Title>
+                           <Components.Input required onChange={handleOnChange} value={formData.email} name="email" type='email' placeholder='Email' />
+                           <Components.Input required onChange={handleOnChange} value={formData.password} name="password" type='password' placeholder='Password' />
+                           <Components.Anchor href='#'>Forgot your password?</Components.Anchor>
+                           <Components.Button>Sign In</Components.Button>
+
+                       </Components.Form>
+              </Components.SignInContainer>
+
 
           <Components.OverlayContainer signinIn={signIn}>
               <Components.Overlay signinIn={signIn}>