feat: product page

Author: VariableVic

src/pages/_app.tsx renamed to src/__pages/_app.tsx

@@ -34,13 +34,13 @@ export async function GET(request: NextRequest) {
 }
 
 async function fetchCollection(handle: string) {
-  return await medusaRequest("GET", `/collections?handle[]=${handle}`).then(
-    ({ body }) => ({
-      id: body.collections[0].id,
-      handle: body.collections[0].handle,
-      title: body.collections[0].title,
-    })
-  )
+  return await medusaRequest("GET", "/collections", {
+    query: { "handle[]": handle },
+  }).then(({ body }) => ({
+    id: body.collections[0].id,
+    handle: body.collections[0].handle,
+    title: body.collections[0].title,
+  }))
 }
 
 async function fetchCollectionProducts({
@@ -54,16 +54,15 @@ async function fetchCollectionProducts({
   limit: string
   cart_id: string
 }) {
-  const { products, count, offset } = await medusaRequest(
-    "GET",
-    `/products?collection_id[]=${id}`,
-    {
+  const { products, count, offset } = await medusaRequest("GET", "/products", {
+    query: {
+      "collection_id[]": id,
       cart_id,
       limit,
       offset: pageParam,
       expand: "variants,variants.prices",
-    }
-  ).then((res) => res.body)
+    },
+  }).then((res) => res.body)
 
   return {
     products,

src/pages/_document.tsx renamed to src/__pages/_document.tsx

@@ -0,0 +1,9 @@
+import PageLayout from "app/page-layout"
+
+export default function ProductLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <PageLayout>{children}</PageLayout>
+}

src/app/_products/[handle]/layout.tsx

@@ -0,0 +1,5 @@
+import SkeletonProductPage from "@modules/skeletons/templates/skeleton-product-page"
+
+export default function Loading() {
+  return <SkeletonProductPage />
+}

src/app/_products/[handle]/loading.tsx

@@ -0,0 +1,39 @@
+import medusaRequest from "@lib/medusa-fetch"
+import ProductTemplate from "@modules/products/templates"
+import { Metadata } from "next"
+
+type Props = {
+  params: { handle: string }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { products } = await medusaRequest("GET", "/products", {
+    query: {
+      handle: params.handle,
+      //   expand: "variants,variants.prices,thumbnail",
+    },
+  }).then((res) => res.body)
+
+  const product = products[0]
+
+  return {
+    title: `${products.title} | Acme Store`,
+    description: `${product.title}`,
+    openGraph: {
+      title: `${product.title} | Acme Store`,
+      description: `${product.title}`,
+      images: product.thumbnail ? [product.thumbnail] : [],
+    },
+  }
+}
+
+export default async function CollectionPage({ params }: Props) {
+  const { products } = await medusaRequest("GET", "/products", {
+    query: {
+      handle: params.handle,
+      //   expand: "variants,variants.prices",
+    },
+  }).then((res) => res.body)
+
+  return <ProductTemplate product={products[0]} />
+}

src/app/_products/[handle]/page.tsx

@@ -6,7 +6,7 @@ const ENDPOINT =
 export default async function medusaRequest(
   method: string,
   path = "",
-  payload?: Record<string, string> | undefined
+  payload?: Record<string, any> | undefined
 ) {
   const options: RequestInit = {
     method,
@@ -18,15 +18,11 @@ export default async function medusaRequest(
   }
 
   if (payload) {
-    if (method === "POST") {
-      options.body = JSON.stringify(payload)
+    if ("body" in payload) {
+      options.body = JSON.stringify(payload.body)
     }
-    if (method === "GET") {
-      // if the path has a query string, append the payload to it. if not, create a new query string
-      const pathWithQuery = path.includes("?")
-        ? `${path}&${new URLSearchParams(payload).toString()}`
-        : `${path}?${new URLSearchParams(payload).toString()}`
-      path = pathWithQuery
+    if ("query" in payload) {
+      path = `${path}?${new URLSearchParams(payload.query).toString()}`
     }
   }