feat: add subcategory support

VariableVic · VariableVic · commit 01d32b201f13 · 2023-09-11T16:10:12.000+02:00
diff --git a/src/app/(main)/[category]/[subcategory]/loading.tsx b/src/app/(main)/[category]/[subcategory]/loading.tsx
diff --git a/src/app/(main)/[category]/[subcategory]/page.tsx b/src/app/(main)/[category]/[subcategory]/page.tsx
@@ -0,0 +1,38 @@
+import { getCategoryByHandle } from "@lib/data"
+import CategoryTemplate from "@modules/categories/templates"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: {
+    category: string
+    subcategory: string
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { product_categories } = await getCategoryByHandle(
+    `${params.category}/${params.subcategory}`
+  ).catch((err) => {
+    notFound()
+  })
+
+  const category = product_categories[0]
+
+  return {
+    title: `${category.name} | Acme Store`,
+    description: `${category.name} collection`,
+  }
+}
+
+export default async function CategoryPage({ params }: Props) {
+  const { product_categories, parent } = await getCategoryByHandle(
+    `${params.category}/${params.subcategory}`
+  ).catch((err) => {
+    notFound()
+  })
+
+  const category = product_categories[0]
+
+  return <CategoryTemplate category={category} parent={parent} />
+}
diff --git a/src/app/(main)/[category]/loading.tsx b/src/app/(main)/[category]/loading.tsx
@@ -0,0 +1,5 @@
+import SkeletonCollectionPage from "@modules/skeletons/templates/skeleton-collection-page"
+
+export default function Loading() {
+  return <SkeletonCollectionPage />
+}
diff --git a/src/app/(main)/[category]/page.tsx b/src/app/(main)/[category]/page.tsx
@@ -4,26 +4,30 @@ import { Metadata } from "next"
 import { notFound } from "next/navigation"
 
 type Props = {
-  params: { handle: string }
+  params: { category: string }
 }
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { product_categories } = await getCategoryByHandle(params.handle)
+  const { product_categories } = await getCategoryByHandle(
+    params.category
+  ).catch((err) => {
+    notFound()
+  })
 
   const category = product_categories[0]
 
-  if (!category) {
-    notFound()
-  }
-
   return {
-    title: `${category.title} | Acme Store`,
-    description: `${category.title} collection`,
+    title: `${category.name} | Acme Store`,
+    description: `${category.name} category`,
   }
 }
 
 export default async function CategoryPage({ params }: Props) {
-  const { product_categories } = await getCategoryByHandle(params.handle)
+  const { product_categories } = await getCategoryByHandle(
+    params.category
+  ).catch((err) => {
+    notFound()
+  })
 
   const category = product_categories[0]
 
diff --git a/src/app/api/categories/[category]/[subcategory]/route.ts b/src/app/api/categories/[category]/[subcategory]/route.ts
@@ -0,0 +1,78 @@
+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 { category, subcategory } = params
+
+  const searchParams = Object.fromEntries(request.nextUrl.searchParams)
+  const { offset, limit, cart_id } = searchParams
+
+  const {
+    [0]: { name: parent_name, handle: parent_handle },
+    [1]: { products, ...categoryMeta },
+  } = (await productService
+    .listCategories(
+      {
+        handle: [`${category}/${subcategory}`, category],
+      },
+      {
+        relations: [
+          "products",
+          "products.variants",
+          "products.variants.options",
+          "products.tags",
+          "products.options",
+          "products.status",
+        ],
+        select: ["id", "handle", "name", "description"],
+        take: 2,
+      }
+    )
+    .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({
+    parent: {
+      name: parent_name,
+      handle: parent_handle,
+    },
+    product_categories: [categoryMeta],
+    response: {
+      products: productsWithPrices,
+      count,
+    },
+    nextPage: count > nextPage ? nextPage : null,
+  })
+}
diff --git a/src/app/api/categories/[category]/route.ts b/src/app/api/categories/[category]/route.ts
@@ -20,7 +20,7 @@ export async function GET(
 ) {
   const productService = await initializeProductModule()
 
-  const { handle } = params
+  const { category } = params
 
   const searchParams = Object.fromEntries(request.nextUrl.searchParams)
   const { offset, limit, cart_id } = searchParams
@@ -30,7 +30,7 @@ export async function GET(
   } = (await productService
     .listCategories(
       {
-        handle,
+        handle: category,
       },
       {
         relations: [
@@ -40,6 +40,7 @@ export async function GET(
           "products.tags",
           "products.options",
           "products.status",
+          "category_children",
         ],
         select: ["id", "handle", "name", "description"],
         take: 1,
diff --git a/src/app/api/categories/route.ts b/src/app/api/categories/route.ts
@@ -16,7 +16,8 @@ export async function GET(request: NextRequest) {
     .listAndCountCategories(
       {},
       {
-        select: ["id", "handle", "name", "description"],
+        select: ["id", "handle", "name", "description", "parent_category"],
+        relations: ["category_children"],
         skip: parseInt(offset) || 0,
         take: 100,
       }
diff --git a/src/modules/categories/templates/index.tsx b/src/modules/categories/templates/index.tsx
@@ -10,16 +10,30 @@ import { useInfiniteQuery } from "@tanstack/react-query"
 import { useCart } from "medusa-react"
 import React, { useEffect } from "react"
 import { useInView } from "react-intersection-observer"
+import Link from "next/link"
+import UnderlineLink from "@modules/common/components/underline-link"
 
 type CategoryTemplateProps = {
   category: {
     handle: string
     name: string
     id: string
+    category_children?: {
+      name: string
+      handle: string
+      id: string
+    }[]
+  }
+  parent?: {
+    handle: string
+    name: string
   }
 }
 
-const CategoryTemplate: React.FC<CategoryTemplateProps> = ({ category }) => {
+const CategoryTemplate: React.FC<CategoryTemplateProps> = ({
+  category,
+  parent,
+}) => {
   const { cart } = useCart()
   const { ref, inView } = useInView()
 
@@ -62,9 +76,33 @@ const CategoryTemplate: React.FC<CategoryTemplateProps> = ({ category }) => {
 
   return (
     <div className="content-container py-6">
-      <div className="mb-8 text-2xl-semi">
+      <div className="flex flex-row mb-8 text-2xl-semi gap-4">
+        {parent && (
+          <>
+            <span className="text-gray-500">
+              <Link
+                className="mr-4 hover:text-black"
+                href={`/${parent.handle}`}
+              >
+                {parent.name}
+              </Link>
+              /
+            </span>
+          </>
+        )}
         <h1>{category.name}</h1>
       </div>
+      {category.category_children && (
+        <div className="mb-8 text-base-large">
+          <ul className="grid grid-cols-1 gap-2">
+            {category.category_children?.map((c) => (
+              <li key={c.id}>
+                <UnderlineLink href={`/${c.handle}`}>{c.name}</UnderlineLink>
+              </li>
+            ))}
+          </ul>
+        </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}>
diff --git a/src/modules/layout/components/footer-nav/index.tsx b/src/modules/layout/components/footer-nav/index.tsx
@@ -21,15 +21,39 @@ const FooterNav = () => {
           {product_categories && (
             <div className="flex flex-col gap-y-2">
               <span className="text-base-semi">Categories</span>
-              <ul
-                className={clsx("grid grid-cols-1 gap-2", {
-                  "grid-cols-2": (product_categories?.length || 0) > 3,
-                })}
-              >
+              <ul className="grid grid-cols-1 gap-2">
                 {product_categories?.slice(0, 6).map((c) => {
+                  if (c.parent_category) {
+                    return
+                  }
+
+                  const children =
+                    c.category_children?.map((child) => ({
+                      name: child.name,
+                      handle: child.handle,
+                      id: child.id,
+                    })) || null
+
                   return (
-                    <li key={c.id}>
-                      <Link href={`/categories/${c.handle}`}>{c.name}</Link>
+                    <li className="flex flex-col gap-2" key={c.id}>
+                      <Link
+                        className={clsx(children && "text-small-semi")}
+                        href={`/${c.handle}`}
+                      >
+                        {c.name}
+                      </Link>
+                      {children && (
+                        <ul className="grid grid-cols-1 ml-3 gap-2">
+                          {children &&
+                            children.map((child) => (
+                              <li key={child.id}>
+                                <Link href={`/${child.handle}`}>
+                                  {child.name}
+                                </Link>
+                              </li>
+                            ))}
+                        </ul>
+                      )}
                     </li>
                   )
                 })}

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,8 @@ export async function GET(request: NextRequest) {`
`16`	`16`	`.listAndCountCategories(`
`17`	`17`	`{},`
`18`	`18`	`{`
`19`		`- select: ["id", "handle", "name", "description"],`
	`19`	`+ select: ["id", "handle", "name", "description", "parent_category"],`
	`20`	`+ relations: ["category_children"],`
`20`	`21`	`skip: parseInt(offset) \|\| 0,`
`21`	`22`	`take: 100,`
`22`	`23`	`}`