fix: collection infinite scroll

Author: VariableVic

src/app/collections/route.ts

@@ -1,10 +1,15 @@
 import medusaRequest from "@lib/medusa-fetch"
 import { NextRequest, NextResponse } from "next/server"
 
+export const runtime = "edge"
+
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams
   const handle = searchParams.get("handle") ?? ""
   const pageParam = searchParams.get("pageParam") ?? "0"
+  const limit = searchParams.get("limit") ?? "12"
+
+  console.log({ handle, pageParam, limit })
 
   const collection = await fetchCollection(handle)
     .then((res) => res)
@@ -15,6 +20,7 @@ export async function GET(request: NextRequest) {
   const { products, count, nextPage } = await fetchCollectionProducts({
     pageParam,
     id: collection.id,
+    limit,
   }).then((res) => res)
 
   return NextResponse.json({
@@ -38,24 +44,30 @@ async function fetchCollection(handle: string) {
 }
 
 async function fetchCollectionProducts({
-  pageParam = "0",
+  pageParam,
   id,
+  limit,
 }: {
-  pageParam?: string
+  pageParam: string
   id: string
+  limit: string
 }) {
   const { products, count, offset } = await medusaRequest(
     "GET",
     `/products?collection_id[]=${id}`,
     {
-      limit: "12",
+      limit,
       offset: pageParam,
+      expand: "variants,variants.prices",
     }
   ).then((res) => res.body)
 
   return {
-    products: [...products, ...products, ...products, ...products],
-    count: 15,
-    nextPage: count > offset + 12 ? offset + 12 : null,
+    products,
+    count,
+    nextPage:
+      count > parseInt(offset) + parseInt(limit)
+        ? parseInt(offset) + parseInt(limit)
+        : null,
   }
 }

src/app/store/layout.tsx

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

src/app/store/page.tsx

@@ -1,16 +1,11 @@
 import { Metadata } from "next"
-import Store from "./store"
-import PageLayout from "app/page-layout"
+import StoreTemplate from "@modules/store/templates"
 
 export const metadata: Metadata = {
   title: "Store",
   description: "Explore all of our products.",
 }
 
 export default function StorePage() {
-  return (
-    <PageLayout>
-      <Store />
-    </PageLayout>
-  )
+  return <StoreTemplate />
 }

src/modules/collections/templates/index.tsx

@@ -20,16 +20,16 @@ type CollectionTemplateProps = {
 const BASEURL = process.env.NEXT_PUBLIC_BASE_URL
 
 const fetchCollectionProducts = async ({
-  pageParam,
+  pageParam = 0,
   handle,
   cartId,
 }: {
-  pageParam?: string
+  pageParam?: number
   handle: string
   cartId?: string
 }) => {
   const { response, nextPage } = await fetch(
-    `${BASEURL}/collections?handle=${handle}&cart_id=${cartId}&page=${pageParam}`
+    `${BASEURL}/collections?handle=${handle}&cart_id=${cartId}&page=${pageParam.toString()}`
   ).then((res) => res.json())
   return {
     response,

src/app/store/store.tsx renamed to src/modules/store/templates/index.tsx

@@ -5,7 +5,7 @@ import InfiniteProducts from "@modules/products/components/infinite-products"
 import RefinementList from "@modules/store/components/refinement-list"
 import { useState } from "react"
 
-const Store = () => {
+const StoreTemplate = () => {
   const [params, setParams] = useState<StoreGetProductsParams>({})
 
   return (
@@ -16,4 +16,4 @@ const Store = () => {
   )
 }
 
-export default Store
+export default StoreTemplate