Merge pull request #186 from sivaprasath2004/sivaprasath-closes-issue…

…-107 [Feature] : Cart page Product Quantity
Indie-Kart · Jul 1, 2024 · c104a0a · c104a0a
2 parents 39112e9 + cc7320e
commit c104a0a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 13 deletions.
diff --git a/app/(routes)/cart/components/cart-item.tsx b/app/(routes)/cart/components/cart-item.tsx
@@ -1,7 +1,6 @@
 import Image from "next/image";
 import { toast } from "react-hot-toast";
-import { X } from "lucide-react";
-
+import { X } from "lucide-react"; 
 import IconButton from "@/components/ui/icon-button";
 import Currency from "@/components/ui/currency";
 import useCart from "@/hooks/use-cart";
@@ -11,12 +10,11 @@ interface CartItemProps {
   data: Product;
 }
 
-const CartItem: React.FC<CartItemProps> = ({ data }) => {
+const CartItem: React.FC<CartItemProps> = ({ data,quantity ,handleAdd,handleDec}) => { 
   const cart = useCart();
-
   const onRemove = () => {
     cart.removeItem(data.id);
-  };
+  }; 
 
   return (
     <li className="flex py-6 border-b">
@@ -44,6 +42,16 @@ const CartItem: React.FC<CartItemProps> = ({ data }) => {
             </p>
           </div>
           <Currency value={data.price} />
+          <div className="flex flex-col items-center justify-center gap-4">
+          <div className="flex items-center justify-center gap-4">
+            <button className="h-4 w-4 border border-gray-300 p-4 flex justify-center items-center rounded-full" onClick={()=>handleAdd(data)}><span>+</span></button>
+            <span>{quantity.find(ele=>ele.id===data.id)?quantity.find(ele=>ele.id===data.id).quantity:1}</span>
+            <button className="h-4 w-4 border border-gray-300 p-4 flex justify-center items-center rounded-full" onClick={()=>handleDec(data)}><span>-</span></button>
+          </div>
+          <div>
+            <p className="flex">prize : <Currency value={quantity.find(ele=>ele.id===data.id)?quantity.find(ele=>ele.id===data.id).price: data.price} /></p>
+          </div>
+          </div>
         </div>
       </div>
     </li>

diff --git a/app/(routes)/cart/components/summary.tsx b/app/(routes)/cart/components/summary.tsx
@@ -9,11 +9,10 @@ import Currency from "@/components/ui/currency";
 import useCart from "@/hooks/use-cart";
 import { toast } from "react-hot-toast";
 
-const Summary = () => {
+const Summary = ({quantity}) => { 
   const searchParams = useSearchParams();
   const items = useCart((state) => state.items);
-  const removeAll = useCart((state) => state.removeAll);
-
+  const removeAll = useCart((state) => state.removeAll); 
   useEffect(() => {
     if (searchParams.get("success")) {
       toast.success("Payment completed.");
@@ -24,7 +23,9 @@ const Summary = () => {
       toast.error("Something went wrong.");
     }
   }, [searchParams, removeAll]);
-
+  const totalquantityPrice=quantity.reduce((total,item)=>{
+     return total+Number(item.price)
+  },0)
   const totalPrice = items.reduce((total, item) => {
     return total + Number(item.price);
   }, 0);
@@ -46,7 +47,7 @@ const Summary = () => {
       <div className="mt-6 space-y-4">
         <div className="flex items-center justify-between border-t border-gray-200 pt-4">
           <div className="text-base font-medium text-gray-900">Order total</div>
-          <Currency value={totalPrice} />
+          <Currency value={totalquantityPrice} />
         </div>
       </div>
       <Button

diff --git a/app/(routes)/cart/page.tsx b/app/(routes)/cart/page.tsx
@@ -9,13 +9,45 @@ import Summary from "./components/summary";
 import CartItem from "./components/cart-item";
 
 const CartPage = () => {
+  const items = useCart((state) => state.items);
+  const item=items.map(item=> {
+    return {id:item.id,quantity:1,price:item.price}
+  })
+  const [quantity,setQuantity]=useState(item)
   const [isMounted, setIsMounted] = useState(false);
   const cart = useCart();
 
   useEffect(() => {
     setIsMounted(true);
   }, []);
-
+  function handleAddQuantity(data){ 
+    let AlreadyInTheCart=quantity.find((item)=> item.id===data.id)
+    if(AlreadyInTheCart){ 
+      let details={id:AlreadyInTheCart.id,quantity:AlreadyInTheCart.quantity+1,price:Number(data.price)*(AlreadyInTheCart.quantity+1)}
+      let filtering=quantity.filter(item=>item.id!==data.id)
+      filtering.push(details)
+      setQuantity(filtering);
+      return
+    }   
+         let details={id:data.id,quantity:1,price:data.price}
+         let filter=quantity
+         filter.push(details)
+         setQuantity(filter); 
+  }
+  function handleDecQuantity(data){
+    let AlreadyInTheCart=quantity.find((item)=> item.id===data.id)
+    if(AlreadyInTheCart){
+      let details={id:AlreadyInTheCart.id,quantity:AlreadyInTheCart.quantity===0?0:AlreadyInTheCart.quantity-1,price:Number(data.price)*(AlreadyInTheCart.quantity===0?0:AlreadyInTheCart.quantity-1)}
+      let filtering=quantity.filter(item=>item.id!==data.id)
+      filtering.push(details)
+      setQuantity(filtering);
+      return
+    }   
+    let details={id:data.id,quantity:0,price:0}
+      let filter=quantity
+      filter.push(details)
+      setQuantity(filter);    
+  }
   if (!isMounted) {
     return null;
   }
@@ -29,11 +61,11 @@ const CartPage = () => {
             <div className="lg:col-span-7">
               <ul>
                 {cart.items.map((item) => (
-                  <CartItem key={item.id} data={item} />
+                  <CartItem key={item.id} data={item} quantity={quantity} handleAdd={handleAddQuantity} handleDec={handleDecQuantity}  />
                 ))}
               </ul>
             </div>
-            <Summary />
+            <Summary quantity={quantity} />
           </div>
         </div>
       </Container>