Merge pull request #202 from iamabhishek2828/fix-multiple-issues

Fix multiple issues related to Next.js module resolution, CartItemPro…
Indie-Kart · Jul 4, 2024 · 237bdb0 · 237bdb0
2 parents e7bfffa + 0e2b3f5
commit 237bdb0
Show file tree

Hide file tree

Showing 8 changed files with 232 additions and 124 deletions.
diff --git a/app/(routes)/cart/components/cart-item-info.tsx b/app/(routes)/cart/components/cart-item-info.tsx
@@ -1,12 +1,28 @@
+import React from "react";
+
+interface Product {
+  name: string;
+  color: string;
+  size: string;
+  price: string;
+  // Add more properties as needed
+}
+
 interface CartItemInfoProps {
-  product: Record<string, any>;
+  product: Product;
 }
+export interface QuantityDetail {
+  id: string;
+  quantity: number;
+  // Add more properties as needed
+}
+
 
 const CartItemInfo: React.FC<CartItemInfoProps> = ({ product }) => {
   return (
     <div>
       <div className="flex justify-between">
-        <p className=" text-sm font-semibold text-black">{product.name}</p>
+        <p className="text-sm font-semibold text-black">{product.name}</p>
       </div>
 
       <div className="mt-1 flex text-sm">
@@ -21,3 +37,4 @@ const CartItemInfo: React.FC<CartItemInfoProps> = ({ product }) => {
 };
 
 export default CartItemInfo;
+
diff --git a/app/(routes)/cart/components/cart-item.tsx b/app/(routes)/cart/components/cart-item.tsx
@@ -1,20 +1,28 @@
-import Image from "next/image";
-import { toast } from "react-hot-toast";
-import { X } from "lucide-react"; 
+import React from "react";
+import { Product } from "@/types";
+import {QuantityDetail} from "./cart-item-info"; // Adjusted import
 import IconButton from "@/components/ui/icon-button";
 import Currency from "@/components/ui/currency";
 import useCart from "@/hooks/use-cart";
-import { Product } from "@/types";
-
+import { X } from "lucide-react";
+import Image from "next/image";
 interface CartItemProps {
   data: Product;
+  quantity: QuantityDetail[]; // This should match the interface definition
+  handleAdd: (data: Product) => void;
+  handleDec: (data: Product) => void;
 }
-
-const CartItem: React.FC<CartItemProps> = ({ data,quantity ,handleAdd,handleDec}) => { 
+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">
@@ -43,14 +51,37 @@ const CartItem: React.FC<CartItemProps> = ({ data,quantity ,handleAdd,handleDec}
           </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>
+            {quantity
+              .filter((item) => item.id === data.id)
+              .map((item) => (
+                <div className="flex items-center justify-center gap-4" key={item.id}>
+                  <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>{item.quantity}</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">
+                Price :{" "}
+                <Currency
+                  value={
+                    Number(
+                      quantity.find((item) => item.id === data.id)?.quantity ?? 0
+                    ) * Number(data.price)
+                  }
+                />
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -59,3 +90,7 @@ const CartItem: React.FC<CartItemProps> = ({ data,quantity ,handleAdd,handleDec}
 };
 
 export default CartItem;
+
+
+
+
diff --git a/app/(routes)/cart/components/summary.tsx b/app/(routes)/cart/components/summary.tsx
@@ -9,10 +9,15 @@ import Currency from "@/components/ui/currency";
 import useCart from "@/hooks/use-cart";
 import { toast } from "react-hot-toast";
 
-const Summary = ({quantity}) => { 
+interface SummaryProps {
+  quantity: { id: string; price: number }[]; // Adjust type according to your data structure
+}
+
+const Summary: React.FC<SummaryProps> = ({ 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.");
@@ -23,22 +28,29 @@ const Summary = ({quantity}) => {
       toast.error("Something went wrong.");
     }
   }, [searchParams, removeAll]);
-  const totalquantityPrice=quantity.reduce((total,item)=>{
-     return total+Number(item.price)
-  },0)
+
+  const totalQuantityPrice = quantity.reduce((total, item) => {
+    return total + Number(item.price);
+  }, 0);
+
   const totalPrice = items.reduce((total, item) => {
     return total + Number(item.price);
   }, 0);
 
   const onCheckout = async () => {
-    const response = await axios.post(
-      `${process.env.NEXT_PUBLIC_API_URL}/checkout`,
-      {
-        productIds: items.map((item) => item.id),
-      }
-    );
+    try {
+      const response = await axios.post(
+        `${process.env.NEXT_PUBLIC_API_URL}/checkout`,
+        {
+          productIds: items.map((item) => item.id),
+        }
+      );
 
-    window.location = response.data.url;
+      window.location = response.data.url; // Redirect to the checkout URL
+    } catch (error) {
+      console.error("Checkout failed:", error);
+      toast.error("Checkout failed. Please try again later.");
+    }
   };
 
   return (
@@ -47,7 +59,7 @@ const Summary = ({quantity}) => {
       <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={totalquantityPrice} />
+          <Currency value={totalQuantityPrice} />
         </div>
       </div>
       <Button
@@ -62,3 +74,4 @@ const Summary = ({quantity}) => {
 };
 
 export default Summary;
+
diff --git a/app/(routes)/cart/page.tsx b/app/(routes)/cart/page.tsx
@@ -4,50 +4,81 @@ import { useEffect, useState } from "react";
 
 import Container from "@/components/ui/container";
 import useCart from "@/hooks/use-cart";
-
 import Summary from "./components/summary";
 import CartItem from "./components/cart-item";
+import { Product } from "@/types";
+
+interface QuantityDetail {
+  id: string;
+  quantity: number;
+  price: number; // Ensure price is of type number
+}
 
 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 cartItems = useCart((state) => state.items);
+  const initialQuantities: QuantityDetail[] = cartItems.map((item) => ({
+    id: item.id,
+    quantity: 1,
+    price: Number(item.price), // Convert 'item.price' to number
+  }));
+
+  const [quantity, setQuantity] = useState<QuantityDetail[]>(initialQuantities);
   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);    
-  }
+
+  const handleAddQuantity = (data: Product) => {
+    let updatedQuantity = [...quantity];
+    const alreadyInCart = updatedQuantity.find((item) => item.id === data.id);
+
+    if (alreadyInCart) {
+      const updatedItem = {
+        ...alreadyInCart,
+        quantity: alreadyInCart.quantity + 1,
+        price: Number(data.price) * (alreadyInCart.quantity + 1),
+      };
+      updatedQuantity = updatedQuantity.map((item) =>
+        item.id === data.id ? updatedItem : item
+      );
+    } else {
+      updatedQuantity.push({
+        id: data.id,
+        quantity: 1,
+        price: Number(data.price),
+      });
+    }
+
+    setQuantity(updatedQuantity);
+  };
+
+  const handleDecQuantity = (data: Product) => {
+    let updatedQuantity = [...quantity];
+    const alreadyInCart = updatedQuantity.find((item) => item.id === data.id);
+
+    if (alreadyInCart) {
+      const updatedItem = {
+        ...alreadyInCart,
+        quantity: alreadyInCart.quantity === 0 ? 0 : alreadyInCart.quantity - 1,
+        price:
+          Number(data.price) *
+          (alreadyInCart.quantity === 0 ? 0 : alreadyInCart.quantity - 1),
+      };
+      updatedQuantity = updatedQuantity.map((item) =>
+        item.id === data.id ? updatedItem : item
+      );
+    } else {
+      updatedQuantity.push({
+        id: data.id,
+        quantity: 0,
+        price: 0,
+      });
+    }
+
+    setQuantity(updatedQuantity);
+  };
+
   if (!isMounted) {
     return null;
   }
@@ -60,8 +91,14 @@ const CartPage = () => {
           <div className="mt-12 lg:grid lg:grid-cols-12 lg:items-start gap-x-12">
             <div className="lg:col-span-7">
               <ul>
-                {cart.items.map((item) => (
-                  <CartItem key={item.id} data={item} quantity={quantity} handleAdd={handleAddQuantity} handleDec={handleDecQuantity}  />
+                {cartItems.map((item) => (
+                  <CartItem
+                    key={item.id}
+                    data={item}
+                    quantity={quantity}
+                    handleAdd={handleAddQuantity}
+                    handleDec={handleDecQuantity}
+                  />
                 ))}
               </ul>
             </div>

diff --git a/app/[...not_found]/page.tsx b/app/[...not_found]/page.tsx
@@ -2,4 +2,4 @@ import { notFound } from 'next/navigation';
 
 export default function NotFoundCatchAll() {
   notFound();
-} 
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,4 @@ import { notFound } from 'next/navigation'; @@
     export default function NotFoundCatchAll() {
       notFound();
-    }
+    }