✨ fix: subtract price from deleted product

aliine98 · Dec 27, 2023 · 968533f · 968533f
1 parent e0f8428
commit 968533f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 33 deletions.
diff --git a/src/components/CartItem.tsx b/src/components/CartItem.tsx
@@ -93,12 +93,17 @@ export default function CartItem({product}:{product: productData}) {
     const {dispatch} = useContext(StoreContext);
     const [productQty, setProductQty] = useState(1);
 
-    useEffect(() => dispatch({type:'updateProductsQty',newQty:{id:product.id,price:Number(product.price) * productQty}}),[productQty]);
+    useEffect(() => dispatch({type:'updateProductsPrices',newPrice:{id:product.id,price:Number(product.price) * productQty}}),[productQty,dispatch,product]);
+
+    function deleteProduct() {
+        dispatch({type: 'deleteProduct', product: product});
+        dispatch({type:'deleteProductPrice', product: product});
+    }
 
     return (
         <>
             <CartProduct>
-                <DeleteButton onClick={() => dispatch({ type: 'deleteProduct', product: product })}>X</DeleteButton>
+                <DeleteButton onClick={() => deleteProduct()}>X</DeleteButton>
                 <img src={product.photo} width='90' height='90' alt={product.name} />
                 <Title>
                     {product.brand} {product.name}
@@ -108,7 +113,7 @@ export default function CartItem({product}:{product: productData}) {
                         <QuantityButton
                             className='minus'
                             onClick={() => {
-                                setProductQty((productQty) => productQty - 1);
+                                if(productQty > 1) setProductQty((productQty) => productQty - 1);
                             }}>
                             -
                         </QuantityButton>

diff --git a/src/components/Checkout.tsx b/src/components/Checkout.tsx
@@ -74,8 +74,8 @@ export default function Checkout() {
     const [totalPrice,setTotalPrice] = useState(0);
 
     useEffect(() => {
-        setTotalPrice(state.productsQty.reduce((acc:number,item:{id:number,price:number}) => acc + item?.price,0));
-    },[state.selectedProducts, state.productsQty,totalPrice]);
+        setTotalPrice(state.productsPrices.reduce((acc:number,item:{id:number,price:number}) => acc + item?.price,0));
+    },[state.selectedProducts, state.productsPrices]);
 
     return (
         <>

diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
@@ -37,7 +37,7 @@ export default function ProductCard({product}:{product:productData}) {
                 onClick={() => {
                     if (state.selectedProducts.includes(product)) return;
                     dispatch({type:'addProduct',product:product});
-                    dispatch({type:'updateProductsQty',newQty: {id:product.id,price: Number(product.price)}});
+                    dispatch({type:'updateProductsPrices',newPrice: {id: product.id, price: Number(product.price)}});
                 }}>
                     <img src='./shopping-bag.svg' alt='shopping bag' />
                     Comprar

diff --git a/src/components/Store.tsx b/src/components/Store.tsx
@@ -23,69 +23,75 @@ const CartButton = styled.button`
     z-index: 2;
 `;
 
-const StoreInitialState = {
-    selectedProducts: [],
-    isOpen: false,
-    productsQty: [],
-};
-
 type StoreCtx = {
     selectedProducts: productData[];
     isOpen: boolean;
-    productsQty: {id:number;price:number}[];
+    productsPrices: {id: number; price: number}[];
 }
 
+const StoreInitialState: StoreCtx = {
+    selectedProducts: [],
+    isOpen: false,
+    productsPrices: [],
+};
+
 type Action =
- | { type: 'addProduct',product: productData }
- | { type: 'openCloseCheckout'}
+ | {type: 'addProduct', product: productData}
+ | {type: 'openCloseCheckout'}
  | {type: 'deleteProduct', product: productData}
- | {type: 'updateProductsQty',newQty: {id:number;price:number}};
+ | {type: 'updateProductsPrices', newPrice: {id: number; price: number}}
+ | {type: 'deleteProductPrice', product: productData};
 
 export const StoreContext = createContext<{state:StoreCtx,dispatch: React.Dispatch<Action>}>({state:StoreInitialState, dispatch: () => {}});
 
-function reducer(state: StoreCtx, action: Action) {
+function reducer(state: StoreCtx, action: Action): StoreCtx {
     switch (action.type) {
-        case 'addProduct':
+        case 'addProduct': {
             return {...state,
                 selectedProducts: state.selectedProducts.concat(action.product)
             };
-        case 'openCloseCheckout':
+        }
+        case 'openCloseCheckout': {
             return {...state,
                 isOpen: !state.isOpen
             };
-        case 'deleteProduct':
+        }
+        case 'deleteProduct': {
             return {...state,
                 selectedProducts: state.selectedProducts.filter((p: productData) => p != action.product)
             };
-        case 'updateProductsQty':
-            if(state.productsQty.every(p => p.id !== action.newQty.id)) {
-                return {...state,productsQty: [...state.productsQty,action.newQty]};
+        }
+        case 'updateProductsPrices': {
+            if(state.productsPrices.every(p => p.id !== action.newPrice.id)) {
+                return {...state,productsPrices: [...state.productsPrices,action.newPrice]};
             }
-            state.productsQty.map((product:{id:number,price:number}) => {
-                if(product.id === action.newQty.id) {
-                    // Object.defineProperty(product,'price',{value:action.newQty.price});
-                    product.price = action.newQty.price;
+            state.productsPrices.map((product:{id:number,price:number}) => {
+                if(product.id === action.newPrice.id) {
+                    // Object.defineProperty(product,'price',{value:action.newPrice.price});
+                    product.price = action.newPrice.price;
                 }
             });
-            return {...state,productsQty: [...state.productsQty]};
+            return {...state, productsPrices: [...state.productsPrices]};
+        }
+        case 'deleteProductPrice': {
+            return {...state,
+                productsPrices: state.productsPrices.filter((price) => price.id != action.product.id)
+            };
+        }
     }
 }
 
 export default function Store() {
     const [state,dispatch] = useReducer(reducer,StoreInitialState);
     const productsInCart = state.selectedProducts?.length;
 
-    function openCheckoutMenu() {
-        dispatch({type: 'openCloseCheckout'});
-    }
-
     const fetchProducts = GetProducts();
     if (fetchProducts.isPending) return <Loading />;
     if (fetchProducts.error) return 'Error';
 
     return (
         <>
-            <CartButton onClick={openCheckoutMenu}>
+            <CartButton onClick={() => dispatch({type: 'openCloseCheckout'})}>
                 <img src='./cart.svg' alt='cart' />
                 {productsInCart}
             </CartButton>