cart page done

ethanniser · Oct 18, 2024 · f20d8b7 · f20d8b7
1 parent 2af107c
commit f20d8b7
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 22 deletions.
diff --git a/src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx b/src/app/(category-sidebar)/products/[category]/[subcategory]/[product]/page.tsx
@@ -16,7 +16,6 @@ export default async function Page(props: {
   const urlDecodedProduct = decodeURIComponent(product);
   const urlDecodedSubcategory = decodeURIComponent(subcategory);
   const urlDecodedCategory = decodeURIComponent(category);
-  console.log(urlDecodedProduct);
   const productData = await db.query.products.findFirst({
     where: (products, { eq }) => eq(products.slug, urlDecodedProduct),
   });

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -30,7 +30,6 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   const cart = await getCart();
-  console.log(cart);
 
   return (
     <html lang="en" className="h-full">

diff --git a/src/app/order/page.tsx b/src/app/order/page.tsx
@@ -4,9 +4,31 @@ import { X } from "lucide-react";
 import type { CartItem } from "@/lib/cart";
 import Image from "next/image";
 import { db } from "@/db";
+import { removeFromCart } from "@/lib/actions";
+import { products } from "@/db/schema";
+import { inArray } from "drizzle-orm";
+import Link from "next/link";
 
 export default async function Page() {
   const cart = await getCart();
+  const dbProducts = await db
+    .select()
+    .from(products)
+    .where(
+      inArray(
+        products.slug,
+        cart.map((item) => item.productSlug),
+      ),
+    );
+
+  const totalCost = cart.reduce(
+    (acc, item) =>
+      acc +
+      item.quantity *
+        (Number(dbProducts.find((p) => p.slug === item.productSlug)?.price) ??
+          0),
+    0,
+  );
   return (
     <main className="min-h-screen p-4">
       <div className="container mx-auto p-3">
@@ -25,7 +47,7 @@ export default async function Page() {
               </div>
             )}
             {cart.length > 0 ? (
-              <div className="flex items-start space-x-4 border-t border-gray-200 pt-4">
+              <div className="flex flex-col space-y-10">
                 {cart.map((item) => (
                   <CartItem key={item.productSlug} item={item} />
                 ))}
@@ -37,13 +59,7 @@ export default async function Page() {
 
           <div className="space-y-4">
             <div className="rounded bg-gray-100 p-4">
-              <p className="font-semibold">
-                Merchandise $
-                {/* {cart.reduce(
-                  (acc, item) => acc + item.quantity * item.price,
-                  0,
-                )} */}
-              </p>
+              <p className="font-semibold">Merchandise ${totalCost}</p>
               <p className="text-sm text-gray-500">
                 Applicable shipping and tax will be added.
               </p>
@@ -62,30 +78,54 @@ export default async function Page() {
 async function CartItem({ item }: { item: CartItem }) {
   const product = await db.query.products.findFirst({
     where: (products, { eq }) => eq(products.slug, item.productSlug),
+    with: {
+      subcategory: {
+        with: {
+          subcollection: true,
+        },
+      },
+    },
   });
   if (!product) {
     return null;
   }
   return (
     <div className="flex flex-row items-center space-x-4 border-t border-gray-200 pt-4">
-      <div className="flex h-24 w-24 items-center justify-center bg-gray-100">
-        <Image src="/placeholder.svg" alt="Product" width={80} height={80} />
-      </div>
-      <div className="flex-grow">
-        <h2 className="font-semibold">{product.name}</h2>
-        <p>{product.description}</p>
-      </div>
-      <div className="flex items-center justify-center space-x-4">
-        <input type="number" defaultValue={3} className="w-16" />
-        <div className="text-right">
+      <Link
+        href={`/products/${product.subcategory.subcollection.category_slug}/${product.subcategory.slug}/${product.slug}`}
+      >
+        <div className="flex flex-row space-x-4">
+          <div className="flex h-24 w-24 items-center justify-center bg-gray-100">
+            <Image
+              src="/placeholder.svg"
+              alt="Product"
+              width={80}
+              height={80}
+            />
+          </div>
+          <div className="flex-grow">
+            <h2 className="font-semibold">{product.name}</h2>
+            <p>{product.description}</p>
+          </div>
+        </div>
+      </Link>
+      <div className="px-10" />
+      <div className="flex items-center justify-center space-x-10">
+        <p>{item.quantity}</p>
+        <div className="min-w-24">
           <p>${product.price} each</p>
         </div>
-        <div className="text-right">
+        <div className="min-w-24">
           <p className="font-semibold">
             ${Number(product.price) * item.quantity}
           </p>
-          <X className="h-4 w-4" />
         </div>
+        <form action={removeFromCart}>
+          <button type="submit">
+            <input type="hidden" name="productSlug" value={product.slug} />
+            <X className="h-6 w-6" />
+          </button>
+        </form>
       </div>
     </div>
   );

diff --git a/src/lib/actions.ts b/src/lib/actions.ts
@@ -44,6 +44,22 @@ export async function addToCart(prevState: unknown, formData: FormData) {
   return "Item added to cart";
 }
 
+export async function removeFromCart(formData: FormData) {
+  const prevCart = await getCart();
+  const productSlug = formData.get("productSlug");
+  if (typeof productSlug !== "string") {
+    return;
+  }
+  const itemAlreadyExists = prevCart.find(
+    (item) => item.productSlug === productSlug,
+  );
+  if (!itemAlreadyExists) {
+    return;
+  }
+  const newCart = prevCart.filter((item) => item.productSlug !== productSlug);
+  await updateCart(newCart);
+}
+
 export async function searchProducts(searchTerm: string) {
   const results = await db
     .select()

diff --git a/todo.md b/todo.md
@@ -14,4 +14,5 @@
   - [ ] link to v0 chats
 - [ ] Profile against real site?
 - [x] search (postgress fts)
+  - [ ] partial matches
 - [ ] Ensure responsive