feat: migrate collections

Author: VariableVic

src/app/checkout/layout.tsx

@@ -1,30 +1,9 @@
-"use client"
-
-import { MEDUSA_BACKEND_URL, queryClient } from "@lib/config"
-import { AccountProvider } from "@lib/context/account-context"
-import { StoreProvider } from "@lib/context/store-context"
-import { CartProvider, MedusaProvider } from "medusa-react"
-import "styles/globals.css"
+import Providers from "@modules/providers"
 
 export default function CheckoutLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return (
-    <MedusaProvider
-      baseUrl={MEDUSA_BACKEND_URL}
-      queryClientProviderProps={{
-        client: queryClient,
-      }}
-    >
-      <CartProvider>
-        <StoreProvider>
-          <AccountProvider>
-            <main className="relative">{children}</main>
-          </AccountProvider>
-        </StoreProvider>
-      </CartProvider>
-    </MedusaProvider>
-  )
+  return <Providers>{children}</Providers>
 }

src/app/checkout/page.tsx

@@ -6,9 +6,5 @@ export const metadata: Metadata = {
 }
 
 export default function Checkout() {
-  return (
-    <>
-      <CheckoutTemplate />
-    </>
-  )
+  return <CheckoutTemplate />
 }

src/app/collections/[handle]/collection.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import usePreviews from "@lib/hooks/use-previews"
+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 CollectionTemplateProps = {
+  collection: {
+    handle: string
+    title: string
+  }
+}
+
+const BASEURL = process.env.NEXT_PUBLIC_BASE_URL
+
+const fetchCollectionProducts = async ({
+  pageParam,
+  handle,
+  cartId,
+}: {
+  pageParam?: string
+  handle: string
+  cartId?: string
+}) => {
+  const { products, count, nextPage } = await fetch(
+    `${BASEURL}/collections?handle=${handle}&cart_id=${cartId}&page=${pageParam}`
+  ).then((res) => res.json())
+  return {
+    response: { products, count },
+    nextPage,
+  }
+}
+
+const Collection: React.FC<CollectionTemplateProps> = ({ collection }) => {
+  const { cart } = useCart()
+  const { ref, inView } = useInView()
+
+  const {
+    data: infiniteData,
+    hasNextPage,
+    fetchNextPage,
+    isFetchingNextPage,
+    isLoading,
+    refetch,
+  } = useInfiniteQuery(
+    [`get_collection_products`, collection.handle, cart?.id],
+    ({ pageParam }) =>
+      fetchCollectionProducts({
+        pageParam,
+        handle: collection.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>{collection.title}</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>
+        ))}
+        {isLoading &&
+          !previews.length &&
+          repeat(8).map((index) => (
+            <li key={index}>
+              <SkeletonProductPreview />
+            </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 Collection

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

@@ -0,0 +1,9 @@
+import Providers from "@modules/providers"
+
+export default function CollectionLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <Providers>{children}</Providers>
+}

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

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

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

@@ -0,0 +1,33 @@
+import Collection from "./collection"
+
+import { Metadata } from "next"
+
+type Props = {
+  params: { handle: string }
+  searchParams: { [key: string]: string | string[] | undefined }
+}
+
+const BASEURL = process.env.NEXT_PUBLIC_BASE_URL ?? "https://localhost:3000"
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { collection } = await fetch(
+    `${BASEURL}/collections?handle=${params.handle}`
+  ).then((res) => res.json())
+
+  return {
+    title: `${collection.title} | Acme Store`,
+    description: `${collection.title} collection`,
+  }
+}
+
+export default async function CollectionPage({ params }: Props) {
+  const { collection } = await fetch(
+    `${BASEURL}/collections?handle=${params.handle}`
+  ).then((res) => res.json())
+
+  return (
+    <>
+      <Collection collection={collection} />
+    </>
+  )
+}

src/app/collections/route.ts

@@ -0,0 +1,58 @@
+import medusaRequest from "@lib/medusa-fetch"
+import { NextRequest, NextResponse } from "next/server"
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const handle = searchParams.get("handle") ?? ""
+  const pageParam = searchParams.get("pageParam") ?? "0"
+
+  const collection = await fetchCollection(handle)
+    .then((res) => res)
+    .catch((error) => {
+      throw new Error(JSON.stringify(error.error))
+    })
+
+  const { response, nextPage } = await fetchCollectionProducts({
+    pageParam,
+    id: collection.id,
+  }).then((res) => res)
+
+  return NextResponse.json({
+    collection,
+    products: response.products,
+    count: response.count,
+    nextPage,
+  })
+}
+
+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,
+    })
+  )
+}
+
+async function fetchCollectionProducts({
+  pageParam = "0",
+  id,
+}: {
+  pageParam?: string
+  id: string
+}) {
+  const { products, count, offset } = await medusaRequest(
+    "GET",
+    `/products?collection_id[]=${id}`,
+    {
+      limit: "12",
+      offset: pageParam,
+    }
+  ).then((res) => res.body)
+
+  return {
+    response: { products, count },
+    nextPage: count > offset + 12 ? offset + 12 : null,
+  }
+}

src/app/layout.tsx

@@ -1,13 +1,3 @@
-"use client"
-
-import { MEDUSA_BACKEND_URL, queryClient } from "@lib/config"
-import { AccountProvider } from "@lib/context/account-context"
-import { CartDropdownProvider } from "@lib/context/cart-dropdown-context"
-import { MobileMenuProvider } from "@lib/context/mobile-menu-context"
-import { StoreProvider } from "@lib/context/store-context"
-import { CartProvider, MedusaProvider } from "medusa-react"
-import Footer from "@modules/layout/templates/footer"
-import Nav from "@modules/layout/templates/nav"
 import "styles/globals.css"
 
 export default function RootLayout({
@@ -18,26 +8,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <MedusaProvider
-          baseUrl={MEDUSA_BACKEND_URL}
-          queryClientProviderProps={{
-            client: queryClient,
-          }}
-        >
-          <CartDropdownProvider>
-            <MobileMenuProvider>
-              <CartProvider>
-                <StoreProvider>
-                  <AccountProvider>
-                    <Nav />
-                    <main className="relative">{children}</main>
-                    <Footer />
-                  </AccountProvider>
-                </StoreProvider>
-              </CartProvider>
-            </MobileMenuProvider>
-          </CartDropdownProvider>
-        </MedusaProvider>
+        <main className="relative">{children}</main>
       </body>
     </html>
   )

src/app/page.tsx

@@ -1,5 +1,8 @@
 import FeaturedProducts from "@modules/home/components/featured-products"
 import Hero from "@modules/home/components/hero"
+import Footer from "@modules/layout/templates/footer"
+import Nav from "@modules/layout/templates/nav"
+import Providers from "@modules/providers"
 import { Metadata } from "next"
 
 export const metadata: Metadata = {
@@ -10,10 +13,12 @@ export const metadata: Metadata = {
 
 const Home = () => {
   return (
-    <>
+    <Providers>
+      <Nav />
       <Hero />
       <FeaturedProducts />
-    </>
+      <Footer />
+    </Providers>
   )
 }
 

src/lib/context/account-context.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { medusaClient } from "@lib/config"
 import { Customer } from "@medusajs/medusa"
 import { useMutation } from "@tanstack/react-query"