feat: add product category support

Author: VariableVic

src/app/(main)/categories/[handle]/loading.tsx

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

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

@@ -0,0 +1,31 @@
+import { getCategoryByHandle } from "@lib/data"
+import CategoryTemplate from "@modules/categories/templates"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: { handle: string }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { product_categories } = await getCategoryByHandle(params.handle)
+
+  const category = product_categories[0]
+
+  if (!category) {
+    notFound()
+  }
+
+  return {
+    title: `${category.title} | Acme Store`,
+    description: `${category.title} collection`,
+  }
+}
+
+export default async function CategoryPage({ params }: Props) {
+  const { product_categories } = await getCategoryByHandle(params.handle)
+
+  const category = product_categories[0]
+
+  return <CategoryTemplate category={category} />
+}

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

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { ProductCategoryDTO, ProductDTO } from "@medusajs/types/dist/product"
+import { notFound } from "next/navigation"
+import getPrices from "@lib/util/get-product-prices"
+import filterProductsByStatus from "@lib/util/filter-products-by-status"
+
+type ProductCategoryResponse = ProductCategoryDTO & {
+  products: ProductDTO[]
+}
+
+/**
+ * This endpoint uses the serverless Product Module to retrieve a category and its products by handle.
+ * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
+ */
+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 { offset, limit, cart_id } = searchParams
+
+  const {
+    [0]: { products, ...categoryMeta },
+  } = (await productService
+    .listCategories(
+      {
+        handle,
+      },
+      {
+        relations: [
+          "products",
+          "products.variants",
+          "products.variants.options",
+          "products.tags",
+          "products.options",
+          "products.status",
+        ],
+        select: ["id", "handle", "name", "description"],
+        take: 1,
+      }
+    )
+    .catch((e) => {
+      return notFound()
+    })) as ProductCategoryResponse[]
+
+  const publishedProducts = filterProductsByStatus(products, "published")
+
+  const count = publishedProducts.length || 0
+
+  const offsetInt = parseInt(offset) || 0
+  const limitInt = parseFloat(limit) || 12
+
+  const productsSlice = publishedProducts.slice(offsetInt, offsetInt + limitInt)
+
+  const productsWithPrices = await getPrices(productsSlice, cart_id)
+
+  const nextPage = offsetInt + limitInt
+
+  return NextResponse.json({
+    product_categories: [categoryMeta],
+    response: {
+      products: productsWithPrices,
+      count,
+    },
+    nextPage: count > nextPage ? nextPage : null,
+  })
+}

src/app/api/categories/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { notFound } from "next/navigation"
+
+/**
+ * This endpoint uses the serverless Product Module to list and count all product categories.
+ * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
+ */
+export async function GET(request: NextRequest) {
+  const productService = await initializeProductModule()
+
+  const { offset } = Object.fromEntries(request.nextUrl.searchParams)
+
+  const [categories, count] = await productService
+    .listAndCountCategories(
+      {},
+      {
+        select: ["id", "handle", "name", "description"],
+        skip: parseInt(offset) || 0,
+        take: 100,
+      }
+    )
+    .catch((e) => {
+      return notFound()
+    })
+
+  return NextResponse.json({
+    categories,
+    count,
+  })
+}

src/app/api/products/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse, NextRequest } from "next/server"
 import getPrices from "@lib/util/get-product-prices"
+import filterProductsByStatus from "@lib/util/filter-products-by-status"
 
 import { initialize as initializeProductModule } from "@medusajs/product"
 import {
@@ -59,7 +60,7 @@ async function getProductsByCollectionId(queryParams: Record<string, any>) {
 
   const products = data.map((c) => c.products).flat() as ProductDTO[]
 
-  const publishedProducts = filterPublishedProducts(products)
+  const publishedProducts = filterProductsByStatus(products, "published")
 
   const count = publishedProducts.length
 
@@ -97,7 +98,7 @@ async function getProducts(params: Record<string, any>) {
     withDeleted: false,
   })
 
-  const publishedProducts = filterPublishedProducts(data)
+  const publishedProducts = filterProductsByStatus(data, "published")
 
   const productsWithPrices = await getPrices(publishedProducts, cart_id)
 
@@ -109,7 +110,3 @@ async function getProducts(params: Record<string, any>) {
     nextPage: count > nextPage ? nextPage : null,
   }
 }
-
-function filterPublishedProducts(products: ProductDTO[]) {
-  return products.filter((product) => product.status === "published")
-}

src/lib/data/index.ts

@@ -66,7 +66,7 @@ export async function getProductsList({
   const limit = queryParams.limit || 12
 
   if (PRODUCT_MODULE_ENABLED) {
-    console.log("PRODUCT_MODULE_ENABLED")
+    DEBUG && console.log("PRODUCT_MODULE_ENABLED")
     const params = new URLSearchParams(queryParams as Record<string, string>)
 
     const { products, count, nextPage } = await fetch(
@@ -237,3 +237,89 @@ export async function getProductsByCollectionHandle({
     nextPage,
   }
 }
+
+/**
+ * Fetches a category by handle, using the Medusa API or the Medusa Product Module, depending on the feature flag.
+ * @param handle  (string) - The handle of the category to retrieve
+ * @returns collections (array) - An array of categories (should only be one)
+ * @returns response (object) - An object containing the products and the number of products in the category
+ * @returns nextPage (number) - The offset of the next page of products
+ */
+export async function getCategoryByHandle(handle: string) {
+  if (PRODUCT_MODULE_ENABLED) {
+    DEBUG && console.log("PRODUCT_MODULE_ENABLED")
+    const data = await fetch(`${API_BASE_URL}/api/categories/${handle}`)
+      .then((res) => res.json())
+      .catch((err) => {
+        throw err
+      })
+
+    return data
+  }
+
+  DEBUG && console.log("PRODUCT_MODULE_DISABLED")
+  const data = await medusaRequest("GET", "/product-categories", {
+    query: {
+      handle: handle,
+    },
+  })
+    .then((res) => res.body)
+    .catch((err) => {
+      throw err
+    })
+
+  return data
+}
+
+/**
+ * Fetches a list of products in a collection, using the Medusa API or the Medusa Product Module, depending on the feature flag.
+ * @param pageParam (number) - The offset of the products to retrieve
+ * @param handle (string) - The handle of the collection to retrieve
+ * @param cartId (string) - The ID of the cart
+ * @returns response (object) - An object containing the products and the number of products in the collection
+ * @returns nextPage (number) - The offset of the next page of products
+ */
+export async function getProductsByCategoryHandle({
+  pageParam = 0,
+  handle,
+  cartId,
+}: {
+  pageParam?: number
+  handle: string
+  cartId?: string
+}) {
+  if (PRODUCT_MODULE_ENABLED) {
+    DEBUG && console.log("PRODUCT_MODULE_ENABLED")
+    const { response, nextPage } = await fetch(
+      `${API_BASE_URL}/api/categories/${handle}?cart_id=${cartId}&page=${pageParam.toString()}`
+    )
+      .then((res) => res.json())
+      .catch((err) => {
+        throw err
+      })
+
+    return {
+      response,
+      nextPage,
+    }
+  }
+
+  DEBUG && console.log("PRODUCT_MODULE_DISABLED")
+  const { id } = await getCategoryByHandle(handle).then(
+    (res) => res.product_categories[0]
+  )
+
+  const { response, nextPage } = await getProductsList({
+    pageParam,
+    queryParams: { category_id: [id], cart_id: cartId },
+  })
+    .then((res) => res)
+    .catch((err) => {
+      throw err
+    })
+
+  return {
+    response,
+    nextPage,
+  }
+}

src/lib/util/filter-products-by-status.ts

@@ -0,0 +1,8 @@
+import { ProductDTO } from "@medusajs/types/dist/product/common"
+
+export default function filterProductsByStatus(
+  products: ProductDTO[],
+  status: string
+) {
+  return products.filter((product) => product.status === status)
+}

src/modules/categories/templates/index.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import usePreviews from "@lib/hooks/use-previews"
+import { getProductsByCategoryHandle } from "@lib/data"
+import getNumberOfSkeletons from "@lib/util/get-number-of-skeletons"
+import repeat from "@lib/util/repeat"
+import ProductPreview from "@modules/products/components/product-preview"
+import SkeletonProductPreview from "@modules/skeletons/components/skeleton-product-preview"
+import { useInfiniteQuery } from "@tanstack/react-query"
+import { useCart } from "medusa-react"
+import React, { useEffect } from "react"
+import { useInView } from "react-intersection-observer"
+
+type CategoryTemplateProps = {
+  category: {
+    handle: string
+    name: string
+    id: string
+  }
+}
+
+const CategoryTemplate: React.FC<CategoryTemplateProps> = ({ category }) => {
+  const { cart } = useCart()
+  const { ref, inView } = useInView()
+
+  const {
+    data: infiniteData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery(
+    [`get_category_products`, category.handle, cart?.id],
+    ({ pageParam }) =>
+      getProductsByCategoryHandle({
+        pageParam,
+        handle: category.handle,
+        cartId: cart?.id,
+      }),
+    {
+      getNextPageParam: (lastPage) => lastPage.nextPage,
+    }
+  )
+
+  useEffect(() => {
+    if (cart?.region_id) {
+      refetch()
+    }
+  }, [cart?.region_id, refetch])
+
+  const previews = usePreviews({
+    pages: infiniteData?.pages,
+    region: cart?.region,
+  })
+
+  useEffect(() => {
+    if (inView && hasNextPage) {
+      fetchNextPage()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inView, hasNextPage])
+
+  return (
+    <div className="content-container py-6">
+      <div className="mb-8 text-2xl-semi">
+        <h1>{category.name}</h1>
+      </div>
+      <ul className="grid grid-cols-2 small:grid-cols-3 medium:grid-cols-4 gap-x-4 gap-y-8">
+        {previews.map((p) => (
+          <li key={p.id}>
+            <ProductPreview {...p} />
+          </li>
+        ))}
+        {isFetchingNextPage &&
+          repeat(getNumberOfSkeletons(infiniteData?.pages)).map((index) => (
+            <li key={index}>
+              <SkeletonProductPreview />
+            </li>
+          ))}
+      </ul>
+      <div
+        className="py-16 flex justify-center items-center text-small-regular text-gray-700"
+        ref={ref}
+      >
+        <span ref={ref}></span>
+      </div>
+    </div>
+  )
+}
+
+export default CategoryTemplate