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 { products, filters, pageInfo } = await getProductsInCollection({
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+    searchParams
-
-  const filtersInput = constructFilterInput(rest);
-  const { products, filters } = await getCollectionProducts({
-    collection: params.collection,
-    sortKey,
-    reverse,
-    ...(filtersInput.length ? { filters: filtersInput } : {})
   });
 
   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 ProductsList from 'components/layout/products-list';
-import { defaultSort, sorting } from 'lib/constants';
+import { searchProducts } from 'components/layout/products-list/actions';
-import { getProducts } from 'lib/shopify';
+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 { q: searchValue } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const { products, pageInfo } = await searchProducts({ searchParams });
-
-  const products = await getProducts({ sortKey, reverse, query: searchValue });
   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}
     </>

components/grid/index.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { forwardRef } from 'react';
 
 function Grid(props: React.ComponentProps<'ul'>) {
   return (
@@ -8,14 +9,15 @@ function Grid(props: React.ComponentProps<'ul'>) {
   );
 }
 
-function GridItem(props: React.ComponentProps<'li'>) {
+const GridItem = forwardRef<HTMLLIElement, React.ComponentProps<'li'>>((props, ref) => {
   return (
-    <li {...props} className={clsx('aspect-square transition-opacity', props.className)}>
+    <li {...props} className={clsx('aspect-square transition-opacity', props.className)} ref={ref}>
       {props.children}
     </li>
   );
-}
+});
 
+GridItem.displayName = 'GridItem';
 Grid.Item = GridItem;
 
 export default Grid;

components/layout/product-grid-items.tsx

@@ -1,28 +0,0 @@
-import Grid from 'components/grid';
-import { GridTileImage } from 'components/grid/tile';
-import { Product } from 'lib/shopify/types';
-import Link from 'next/link';
-
-export default function ProductGridItems({ products }: { products: Product[] }) {
-  return (
-    <>
-      {products.map((product) => (
-        <Grid.Item key={product.handle} className="animate-fadeIn rounded-lg">
-          <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
-            <GridTileImage
-              alt={product.title}
-              label={{
-                title: product.title,
-                amount: product.priceRange.maxVariantPrice.amount,
-                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-              }}
-              src={product.featuredImage?.url}
-              fill
-              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
-            />
-          </Link>
-        </Grid.Item>
-      ))}
-    </>
-  );
-}

components/layout/products-list/actions.ts

@@ -0,0 +1,109 @@
+'use server';
+
+import {
+  AVAILABILITY_FILTER_ID,
+  PRICE_FILTER_ID,
+  PRODUCT_METAFIELD_PREFIX,
+  VARIANT_METAFIELD_PREFIX,
+  defaultSort,
+  sorting
+} from 'lib/constants';
+import { getCollectionProducts, getProducts } from 'lib/shopify';
+
+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;
+};
+
+export const getProductsInCollection = async ({
+  searchParams,
+  afterCursor
+}: {
+  searchParams?: {
+    [key: string]: string | string[] | undefined;
+  };
+  afterCursor?: string;
+}) => {
+  const { sort, q, collection, ...rest } = searchParams as { [key: string]: string };
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+  const filtersInput = constructFilterInput(rest);
+
+  const response = await getCollectionProducts({
+    collection: collection as string,
+    sortKey,
+    reverse,
+    ...(filtersInput.length ? { filters: filtersInput } : {}),
+    ...(afterCursor ? { after: afterCursor } : {})
+  });
+
+  return response;
+};
+
+export const searchProducts = async ({
+  searchParams,
+  afterCursor
+}: {
+  searchParams?: {
+    [key: string]: string | string[] | undefined;
+  };
+  afterCursor?: string;
+}) => {
+  const { sort, q: searchValue } = searchParams as { [key: string]: string };
+  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
+
+  const response = await getProducts({
+    sortKey,
+    reverse,
+    query: searchValue,
+    ...(afterCursor ? { after: afterCursor } : {})
+  });
+
+  return response;
+};

components/layout/products-list/index.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import Grid from 'components/grid';
+import { GridTileImage } from 'components/grid/tile';
+import { Product } from 'lib/shopify/types';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { getProductsInCollection, searchProducts } from './actions';
+
+const ProductsList = ({
+  initialProducts,
+  pageInfo,
+  searchParams,
+  page
+}: {
+  initialProducts: Product[];
+  pageInfo: {
+    endCursor: string;
+    hasNextPage: boolean;
+  };
+  searchParams?: { [key: string]: string | string[] | undefined };
+  page: 'search' | 'collection';
+}) => {
+  const [products, setProducts] = useState(initialProducts);
+  const [_pageInfo, setPageInfo] = useState(pageInfo);
+  const lastElement = useRef(null);
+
+  useEffect(() => {
+    const lastElementRef = lastElement.current;
+
+    const loadMoreProducts = async () => {
+      const params = {
+        searchParams,
+        afterCursor: _pageInfo.endCursor
+      };
+      const { products, pageInfo } =
+        page === 'collection'
+          ? await getProductsInCollection(params)
+          : await searchProducts(params);
+
+      setProducts((prev) => [...prev, ...products]);
+      setPageInfo({
+        hasNextPage: pageInfo.hasNextPage,
+        endCursor: pageInfo.endCursor
+      });
+    };
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          loadMoreProducts();
+        }
+      },
+      { threshold: 1 }
+    );
+    lastElementRef && observer.observe(lastElementRef);
+
+    return () => {
+      if (lastElementRef) {
+        observer.unobserve(lastElementRef);
+      }
+    };
+  }, [_pageInfo.endCursor, page, searchParams]);
+
+  return (
+    <>
+      {products.map((product, index) => (
+        <Grid.Item
+          key={product.handle}
+          className="animate-fadeIn rounded-lg"
+          ref={index === products.length - 1 && _pageInfo.hasNextPage ? lastElement : undefined}
+        >
+          <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
+            <GridTileImage
+              alt={product.title}
+              label={{
+                title: product.title,
+                amount: product.priceRange.maxVariantPrice.amount,
+                currencyCode: product.priceRange.maxVariantPrice.currencyCode
+              }}
+              src={product.featuredImage?.url}
+              fill
+              sizes="(min-width: 768px) 33vw, (min-width: 640px) 50vw, 100vw"
+            />
+          </Link>
+        </Grid.Item>
+      ))}
+    </>
+  );
+};
+
+export default ProductsList;

components/layout/search/filters/mobile-filters.tsx

@@ -7,7 +7,7 @@ import { Filter } from 'lib/shopify/types';
 import { Fragment, ReactNode, useState } from 'react';
 import Filters from './filters-list';
 
-const MobileFilters = ({ filters, menu }: { filters: Filter[]; menu: ReactNode }) => {
+const MobileFilters = ({ filters, menu }: { filters: Filter[]; menu?: ReactNode }) => {
   const [openDialog, setOpenDialog] = useState(false);
 
   return (

lib/shopify/index.ts

@@ -361,12 +361,14 @@ export async function getCollectionProducts({
   collection,
   reverse,
   sortKey,
-  filters
+  filters,
+  after
 }: {
   collection: string;
   reverse?: boolean;
   sortKey?: string;
   filters?: Array<object>;
+  after?: string;
 }): Promise<{ products: Product[]; filters: Filter[]; pageInfo: PageInfo }> {
   const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
     query: getCollectionProductsQuery,
@@ -375,7 +377,8 @@ export async function getCollectionProducts({
       handle: collection,
       reverse,
       sortKey: sortKey === 'CREATED_AT' ? 'CREATED' : sortKey,
-      filters
+      filters,
+      after
     }
   });
 
@@ -501,25 +504,30 @@ export async function getProductRecommendations(productId: string): Promise<Prod
 export async function getProducts({
   query,
   reverse,
-  sortKey
+  sortKey,
+  after
 }: {
   query?: string;
   reverse?: boolean;
   sortKey?: string;
-}): Promise<Product[]> {
+  after?: string;
+}): Promise<{ products: Product[]; pageInfo: PageInfo }> {
   const res = await shopifyFetch<ShopifyProductsOperation>({
     query: getProductsQuery,
     tags: [TAGS.products],
     variables: {
       query,
       reverse,
-      sortKey
+      sortKey,
+      after
     }
   });
-
+  const pageInfo = res.body.data.products.pageInfo;
-  return reshapeProducts(removeEdgesAndNodes(res.body.data.products));
+  return {
+    products: reshapeProducts(removeEdgesAndNodes(res.body.data.products)),
+    pageInfo
+  };
 }
-
 // This is called from `app/api/revalidate.ts` so providers can control revalidation logic.
 export async function revalidate(req: NextRequest): Promise<NextResponse> {
   console.log(`Receiving revalidation request from Shopify.`);

lib/shopify/queries/collection.ts

@@ -42,14 +42,14 @@ export const getCollectionProductsQuery = /* GraphQL */ `
     $sortKey: ProductCollectionSortKeys
     $reverse: Boolean
     $filters: [ProductFilter!]
+    $after: String
   ) {
     collection(handle: $handle) {
-      products(sortKey: $sortKey, filters: $filters, reverse: $reverse, first: 100) {
+      products(sortKey: $sortKey, filters: $filters, reverse: $reverse, first: 50, after: $after) {
         edges {
           node {
             ...product
           }
-          cursor
         }
         filters {
           id

lib/shopify/queries/product.ts

@@ -10,13 +10,18 @@ export const getProductQuery = /* GraphQL */ `
 `;
 
 export const getProductsQuery = /* GraphQL */ `
-  query getProducts($sortKey: ProductSortKeys, $reverse: Boolean, $query: String) {
+  query getProducts($sortKey: ProductSortKeys, $reverse: Boolean, $query: String, $after: String) {
-    products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 100) {
+    products(sortKey: $sortKey, reverse: $reverse, query: $query, first: 50, after: $after) {
       edges {
         node {
           ...product
         }
       }
+      pageInfo {
+        endCursor
+        startCursor
+        hasNextPage
+      }
     }
   }
   ${productFragment}

lib/shopify/types.ts

@@ -240,6 +240,7 @@ export type ShopifyCollectionProductsOperation = {
     reverse?: boolean;
     sortKey?: string;
     filters?: Array<object>;
+    after?: string;
   };
 };
 
@@ -292,12 +293,15 @@ export type ShopifyProductRecommendationsOperation = {
 
 export type ShopifyProductsOperation = {
   data: {
-    products: Connection<ShopifyProduct>;
+    products: Connection<ShopifyProduct> & {
+      pageInfo: PageInfo;
+    };
   };
   variables: {
     query?: string;
     reverse?: boolean;
     sortKey?: string;
+    after?: string;
   };
 };