add

Preetiraj3697 · Nov 13, 2022 · d711fd0 · d711fd0
1 parent e4690ed
commit d711fd0
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 26 deletions.
diff --git a/src/Reducer/cartReducer.js b/src/Reducer/cartReducer.js
@@ -58,6 +58,40 @@ const cartReducer = (state, action) => {
         cart:[],
       }
     }
+    if(action.type === "SET_DECREMENT"){
+       let updatedProduct = state.cart.map((curElem) => {
+        if(curElem.id === action.payload){
+          let decAmount = curElem.amount - 1;
+          if(decAmount <= 1){
+            decAmount = 1;
+          }
+          return {
+            ...curElem,
+            amount:decAmount,
+          }
+        }else{
+          return curElem;
+        }
+       })
+       return {...state,cart:updatedProduct}
+    }
+    if(action.type === "SET_INCREMENT"){
+      let updatedProduct = state.cart.map((curElem) => {
+        if(curElem.id === action.payload){
+          let inAmount = curElem.amount + 1;
+          if(inAmount >= curElem.max){
+            inAmount = curElem.max;
+          }
+          return {
+            ...curElem,
+            amount:inAmount,
+          }
+        }else{
+          return curElem;
+        }
+       })
+       return {...state,cart:updatedProduct}
+    }
     return state;
   };
 

diff --git a/src/components/CartAmountToggle.js b/src/components/CartAmountToggle.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import { FaMinus, FaPlus } from 'react-icons/fa';
 
-const CartAmountToggle = ({amount,setDecrese, setIncrease}) => {
+const CartAmountToggle = ({amount,setDecrease, setIncrease}) => {
   return (
     <div className='cart-button'>
       <div className='amount-toggle'>
-        <button onClick={()=>setDecrese()}>
+        <button onClick={()=>setDecrease()}>
             <FaMinus />
         </button>
         <div className='amount-style'>{amount}</div>

diff --git a/src/components/CartItem.js b/src/components/CartItem.js
@@ -5,14 +5,14 @@ import { FaTrash } from "react-icons/fa";
 import { useCartContext } from "../context/cart_context";
 
 const CartItem = ({ id, name, image, color, price, amount }) => {
-  const { removeItem } = useCartContext();
-  const setDecrease = () => {
-    // amount > 1 ? setAmount(amount - 1) : setAmount(1);
-  };
+  const { removeItem,setDecrease,setIncrease } = useCartContext();
+  // const setDecrease = () => {
+  //   amount > 1 ? setAmount(amount - 1) : setAmount(1);
+  // };
 
-  const setIncrease = () => {
-    // amount < stock ? setAmount(amount + 1) : setAmount(stock);
-  };
+  // const setIncrease = () => {
+  //   amount < stock ? setAmount(amount + 1) : setAmount(stock);
+  // };
 
   return (
     <div className="cart_heading grid grid-five-column">
@@ -42,8 +42,8 @@ const CartItem = ({ id, name, image, color, price, amount }) => {
       {/* Quantity  */}
       <CartAmountToggle
         amount={amount}
-        setDecrease={setDecrease}
-        setIncrease={setIncrease}
+        setDecrease={() =>setDecrease(id)}
+        setIncrease={() =>setIncrease(id)}
       />
 
       {/* //Subtotal */}

diff --git a/src/context/cart_context.js b/src/context/cart_context.js
@@ -3,17 +3,17 @@ import { createContext, useContext, useReducer } from "react";
 import reducer from "../Reducer/cartReducer";
 
 const CartContext = createContext();
-const getLocalCartData = () =>{
+const getLocalCartData = () => {
   let newCartData = localStorage.getItem("SheelaCart");
-  if(newCartData === []){
+  if (newCartData === []) {
     return [];
-  }else{
+  } else {
     return JSON.parse(newCartData);
   }
-}
+};
 const initialState = {
   // cart: [],
-  cart:getLocalCartData(),
+  cart: getLocalCartData(),
   total_item: "",
   total_amount: "",
   shipping_fee: 50000,
@@ -29,16 +29,32 @@ const CartProvider = ({ children }) => {
   const removeItem = (id) => {
     dispatch({ type: "REMOVE_ITEM", payload: id });
   };
- const clearCart = () =>{
-  dispatch({type:"CLEAR_CART"})
- }
- // to add the data in localStorage
- //get vs set
- useEffect(()=>{
-  localStorage.setItem("SheelaCart",JSON.stringify(state.cart))
- },[state.cart])
+  //increment and decrement items
+  const setDecrease = (id) => {
+    dispatch({ type: "SET_DECREMENT", payload: id });
+  };
+  const setIncrease = (id) => {
+    dispatch({ type: "SET_INCREMENT", payload: id });
+  };
+  const clearCart = () => {
+    dispatch({ type: "CLEAR_CART" });
+  };
+  // to add the data in localStorage
+  //get vs set
+  useEffect(() => {
+    localStorage.setItem("SheelaCart", JSON.stringify(state.cart));
+  }, [state.cart]);
   return (
-    <CartContext.Provider value={{ ...state, addToCart, removeItem,clearCart }}>
+    <CartContext.Provider
+      value={{
+        ...state,
+        addToCart,
+        removeItem,
+        clearCart,
+        setDecrease,
+        setIncrease,
+      }}
+    >
       {children}
     </CartContext.Provider>
   );
@@ -48,4 +64,4 @@ const useCartContext = () => {
   return useContext(CartContext);
 };
 
-export { CartProvider, useCartContext };
+export { CartProvider, useCartContext };