feat: product module

Author: VariableVic

.env.template

@@ -17,4 +17,7 @@ NEXT_PUBLIC_PAYPAL_CLIENT_ID=
 NEXT_PUBLIC_SEARCH_APP_ID=
 NEXT_PUBLIC_SEARCH_ENDPOINT=http://127.0.0.1:7700
 NEXT_PUBLIC_SEARCH_API_KEY=
-NEXT_PUBLIC_SEARCH_INDEX_NAME=products
+NEXT_PUBLIC_SEARCH_INDEX_NAME=products
+
+# Your Next.js revalidation secret. See – https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation
+REVALIDATE_SECRET=supersecret

.gitignore

@@ -45,3 +45,4 @@ node_modules
 
 .yarn
 .swc
+dump.rdb

next.config.js

@@ -4,6 +4,7 @@ const store = require("./store.config.json")
 module.exports = withStoreConfig({
   experimental: {
     serverActions: true,
+    serverComponentsExternalPackages: ["@medusajs/product"],
   },
   features: store.features,
   reactStrictMode: true,

package.json

@@ -22,7 +22,8 @@
   "dependencies": {
     "@headlessui/react": "^1.6.1",
     "@hookform/error-message": "^2.0.0",
-    "@medusajs/medusa-js": "^6.0.0",
+    "@medusajs/medusa-js": "^6.0.3",
+    "@medusajs/product": "^0.1.7",
     "@meilisearch/instant-meilisearch": "^0.7.1",
     "@paypal/paypal-js": "^5.0.6",
     "@paypal/react-paypal-js": "^7.8.1",

src/app/(main)/collections/[handle]/page.tsx

@@ -9,7 +9,7 @@ type Props = {
 const BASEURL = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:8000"
 
 async function getCollection(handle: string) {
-  const res = await fetch(`${BASEURL}/collections?handle=${handle}`)
+  const res = await fetch(`${BASEURL}/api/collections/${handle}`)
 
   if (!res.ok) {
     notFound()

src/app/(main)/collections/route.ts

@@ -1,4 +1,3 @@
-import medusaRequest from "@lib/medusa-fetch"
 import ProductTemplate from "@modules/products/templates"
 import { Metadata } from "next"
 import { notFound } from "next/navigation"
@@ -8,27 +7,19 @@ type Props = {
 }
 
 async function getProducts(handle: string) {
-  const res = await medusaRequest("GET", "/products", {
-    query: {
-      handle,
-    },
-  })
-
-  if (!res.ok) {
-    notFound()
-  }
-
-  return res.body
+  const data = await fetch(
+    `${process.env.NEXT_PUBLIC_BASE_URL}/api/products/${handle}`
+  )
+    .then((res) => res.json())
+    .catch(() => {
+      notFound()
+    })
+
+  return data
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { products } = await getProducts(params.handle)
-
-  if (!products.length) {
-    notFound()
-  }
-
-  const product = products[0]
+  const { product } = await getProducts(params.handle)
 
   return {
     title: `${product.title} | Acme Store`,
@@ -42,7 +33,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function CollectionPage({ params }: Props) {
-  const { products } = await getProducts(params.handle)
+  const { product } = await getProducts(params.handle)
 
-  return <ProductTemplate product={products[0]} />
+  return <ProductTemplate product={product} />
 }

src/app/(main)/products/[handle]/page.tsx

@@ -0,0 +1,13 @@
+"use server"
+
+import { revalidateTag } from "next/cache"
+
+/**
+ * Revalidates each cache tag in the passed array
+ * @param {string[]} tags - array of tags to revalidate
+ */
+export async function revalidateTags(tags: string[]) {
+  tags.forEach((tag) => {
+    revalidateTag(tag)
+  })
+}

src/app/actions.ts

@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { ProductCollectionDTO } from "@medusajs/types/dist/product"
+import { notFound } from "next/navigation"
+import getPrices from "@lib/util/get-product-prices"
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Record<string, any> }
+) {
+  const productService = await initializeProductModule()
+
+  const { handle } = params
+
+  const searchParams = Object.fromEntries(request.nextUrl.searchParams)
+  const { page, limit, cart_id } = searchParams
+
+  const collections = await productService.listCollections()
+
+  const collectionsByHandle = new Map<string, ProductCollectionDTO>()
+
+  for (const collection of collections) {
+    collectionsByHandle.set(collection.handle, collection)
+  }
+
+  const collection = collectionsByHandle.get(handle)
+
+  if (!collection) {
+    return notFound()
+  }
+
+  const count = collection.products?.length || 0
+
+  const { products, ...collectionMeta } =
+    await productService.retrieveCollection(collection.id, {
+      relations: [
+        "products",
+        "products.variants",
+        "products.variants.options",
+        "products.tags",
+      ],
+      take: limit || 100,
+      skip: page || 0,
+    })
+
+  if (!products) {
+    return notFound()
+  }
+
+  const productsWithPrices = await getPrices(products, cart_id)
+
+  const nextPage = parseInt(page) + parseInt(limit)
+
+  return NextResponse.json({
+    collection: collectionMeta,
+    response: {
+      products: productsWithPrices,
+      count,
+    },
+    nextPage: count > nextPage ? nextPage : null,
+  })
+}

src/app/api/collections/[handle]/route.ts

@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { notFound } from "next/navigation"
+
+export async function GET(request: NextRequest) {
+  const productService = await initializeProductModule()
+
+  const { offset } = Object.fromEntries(request.nextUrl.searchParams)
+
+  const [collections, count] = await productService.listAndCountCollections(
+    {},
+    {
+      skip: offset || 0,
+      take: 100,
+    }
+  )
+
+  if (!collections) {
+    return notFound()
+  }
+
+  return NextResponse.json({
+    collections,
+    count,
+  })
+}