move products under new url, handle multi segment slug (#107)

jekabolt · Jul 10, 2024 · 917dadf · 917dadf
1 parent 549a1eb
commit 917dadf
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/src/app/catalog/[slug]/page.tsx → src/app/product/[...productParams]/page.tsx b/src/app/catalog/[slug]/page.tsx → src/app/product/[...productParams]/page.tsx
@@ -5,11 +5,12 @@ import CoreLayout from "@/components/layouts/CoreLayout";
 import AddToCartButton from "@/components/productPage/AddToCartButton";
 import { CURRENCY_MAP, MAX_LIMIT } from "@/constants";
 import { serviceClient } from "@/lib/api";
+import { notFound } from "next/navigation";
 import { Suspense } from "react";
 
 interface ProductPageProps {
   params: {
-    slug: string;
+    productParams: string[];
   };
 }
 
@@ -24,7 +25,7 @@ export async function generateStaticParams() {
 
   return (
     response.products?.map((product) => ({
-      slug: product.slug!,
+      slug: product.slug?.replace("product/", "").split("/") || [],
     })) || []
   );
 }
@@ -35,10 +36,19 @@ const catalogData = [
 ];
 
 export default async function ProductPage({ params }: ProductPageProps) {
-  const { slug } = params;
+  const { productParams } = params;
+
+  if (productParams.length !== 4) {
+    return notFound();
+  }
+
+  const [gender, brand, name, id] = productParams;
 
   const { product } = await serviceClient.GetProduct({
-    slug,
+    gender,
+    brand,
+    name,
+    id: parseInt(id),
   });
 
   return (
@@ -73,8 +83,8 @@ export default async function ProductPage({ params }: ProductPageProps) {
             <Suspense>
               {/* TO-DO pass size from form */}
               <AddToCartButton
-                slug={slug}
-                size="size2"
+                slug={productParams.join("/")}
+                size={"size2"}
                 addItemToCookie={addItemToCookie}
               />
             </Suspense>

diff --git a/src/components/cart/CartItemRow.tsx b/src/components/cart/CartItemRow.tsx
@@ -26,7 +26,7 @@ export default function CartItemRow({
       <div className="flex w-1/2 gap-6">
         <div className="h-full w-28 flex-none">
           <ImageComponent
-            src={p?.productDisplay?.thumbnail?.thumbnail?.mediaUrl || ""}
+            src={p?.productDisplay?.thumbnail?.media?.thumbnail?.mediaUrl || ""}
             alt="product"
             fit="cover"
             aspectRatio="2/3"

diff --git a/src/components/cart/CartProductsList.tsx b/src/components/cart/CartProductsList.tsx
@@ -17,7 +17,13 @@ export default async function CartProductsList() {
   }[];
 
   const productsPromises = cartItems.map(async (item) => {
-    const response = await serviceClient.GetProduct({ slug: item.slug });
+    const [gender, brand, name, id] = item.slug.split("/");
+    const response = await serviceClient.GetProduct({
+      gender,
+      brand,
+      name,
+      id: parseInt(id),
+    });
     const product = response.product;
 
     return {
@@ -36,7 +42,7 @@ export default async function CartProductsList() {
 
   return products.map((p) => (
     <Button key={p?.product?.product?.id as number} asChild>
-      <Link href={`/catalog/${p?.product?.product?.slug}`}>
+      <Link href={p?.product?.product?.slug || ""}>
         <CartItemRow
           product={p?.product}
           quantity={p?.quantity}

diff --git a/src/components/productPage/ProductItem.tsx b/src/components/productPage/ProductItem.tsx
@@ -26,10 +26,13 @@ export default function ProductItem({
   return (
     <div className={cn("relative", className)}>
       <Button asChild>
-        <Link href={`/catalog/${product.slug}`}>
+        <Link href={product?.slug || ""}>
           <div className="relative h-80">
             <Image
-              src={product.productDisplay?.thumbnail?.thumbnail?.mediaUrl || ""}
+              src={
+                product.productDisplay?.thumbnail?.media?.thumbnail?.mediaUrl ||
+                ""
+              }
               alt={product.productDisplay?.productBody?.name || ""}
               aspectRatio="4/3" // take from BE values
               fit="cover"