feat: implement products infinite loading

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/search/[collection]/page.tsx

@@ -1,25 +1,18 @@
-import { getCollection, getCollectionProducts } from 'lib/shopify';
+import { getCollection } from 'lib/shopify';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import Breadcrumb from 'components/breadcrumb';
 import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
 import Grid from 'components/grid';
-import ProductGridItems from 'components/layout/product-grid-items';
+import ProductsList from 'components/layout/products-list';
+import { getProductsInCollection } from 'components/layout/products-list/actions';
 import FiltersList from 'components/layout/search/filters/filters-list';
 import MobileFilters from 'components/layout/search/filters/mobile-filters';
 import SubMenu from 'components/layout/search/filters/sub-menu';
 import Header, { HeaderPlaceholder } from 'components/layout/search/header';
 import ProductsGridPlaceholder from 'components/layout/search/placeholder';
 import SortingMenu from 'components/layout/search/sorting-menu';
-import {
-  AVAILABILITY_FILTER_ID,
-  PRICE_FILTER_ID,
-  PRODUCT_METAFIELD_PREFIX,
-  VARIANT_METAFIELD_PREFIX,
-  defaultSort,
-  sorting
-} from 'lib/constants';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
@@ -40,58 +33,6 @@ export async function generateMetadata({
   };
 }
 
-const constructFilterInput = (filters: {
-  [key: string]: string | string[] | undefined;
-}): Array<object> => {
-  const results = [] as Array<object>;
-  Object.entries(filters)
-    .filter(([key]) => !key.startsWith(PRICE_FILTER_ID))
-    .forEach(([key, value]) => {
-      const [namespace, metafieldKey] = key.split('.').slice(-2);
-      const values = Array.isArray(value) ? value : [value];
-
-      if (key === AVAILABILITY_FILTER_ID) {
-        results.push({
-          available: value === 'true'
-        });
-      } else if (key.startsWith(PRODUCT_METAFIELD_PREFIX)) {
-        results.push(
-          ...values.map((v) => ({
-            productMetafield: {
-              namespace,
-              key: metafieldKey,
-              value: v
-            }
-          }))
-        );
-      } else if (key.startsWith(VARIANT_METAFIELD_PREFIX)) {
-        results.push(
-          ...values.map((v) => ({
-            variantMetafield: {
-              namespace,
-              key: metafieldKey,
-              value: v
-            }
-          }))
-        );
-      }
-    });
-
-  const price = {} as { min?: number; max?: number };
-
-  if (filters[`${PRICE_FILTER_ID}.min`]) {
-    price.min = Number(filters[`${PRICE_FILTER_ID}.min`]);
-  }
-  if (filters[`${PRICE_FILTER_ID}.max`]) {
-    price.max = Number(filters[`${PRICE_FILTER_ID}.max`]);
-    !price.min && (price.min = 0);
-  }
-  if (price.max || price.min) {
-    results.push({ price });
-  }
-  return results;
-};
-
 async function CategoryPage({
   params,
   searchParams
@@ -99,15 +40,8 @@ async function CategoryPage({
   params: { collection: string };
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-  const { sort, q, collection: _collection, ...rest } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
-
-  const filtersInput = constructFilterInput(rest);
-  const { products, filters } = await getCollectionProducts({
-    collection: params.collection,
-    sortKey,
-    reverse,
-    ...(filtersInput.length ? { filters: filtersInput } : {})
+  const { products, filters, pageInfo } = await getProductsInCollection({
+    searchParams
   });
 
   return (
@@ -128,7 +62,13 @@ async function CategoryPage({
               {products.length === 0 ? (
                 <p className="py-3 text-lg">{`No products found in this collection`}</p>
               ) : (
-                <ProductGridItems products={products} />
+                <ProductsList
+                  initialProducts={products}
+                  pageInfo={pageInfo}
+                  page="collection"
+                  searchParams={searchParams}
+                  key={JSON.stringify(searchParams)}
+                />
               )}
             </Grid>
           </div>

app/search/page.tsx

@@ -1,8 +1,7 @@
 import Grid from 'components/grid';
-import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
-import { getProducts } from 'lib/shopify';
-
+import ProductsList from 'components/layout/products-list';
+import { searchProducts } from 'components/layout/products-list/actions';
+import SortingMenu from 'components/layout/search/sorting-menu';
 export const runtime = 'edge';
 
 export const metadata = {
@@ -15,25 +14,31 @@ export default async function SearchPage({
 }: {
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-  const { sort, q: searchValue } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
-
-  const products = await getProducts({ sortKey, reverse, query: searchValue });
+  const { q: searchValue } = searchParams as { [key: string]: string };
+  const { products, pageInfo } = await searchProducts({ searchParams });
   const resultsText = products.length > 1 ? 'results' : 'result';
 
   return (
     <>
+      <div className="flex w-full justify-end">
+        <SortingMenu />
+      </div>
       {searchValue ? (
         <p className="mb-4">
           {products.length === 0
             ? 'There are no products that match '
-            : `Showing ${products.length} ${resultsText} for `}
+            : `Showing ${resultsText} for `}
           <span className="font-bold">&quot;{searchValue}&quot;</span>
         </p>
       ) : null}
       {products.length > 0 ? (
         <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-          <ProductGridItems products={products} />
+          <ProductsList
+            initialProducts={products}
+            pageInfo={pageInfo}
+            searchParams={searchParams}
+            page="search"
+          />
         </Grid>
       ) : null}
     </>