feat: add pagination to the products page

pooriaset · pooriaset · commit ca40c26a5228 · 2024-12-30T17:47:07.000+03:30
diff --git a/.env.sample b/.env.sample
@@ -1,2 +1,2 @@
-NEXT_PUBLIC_BACKEND_URL=https://api.nextwoo.ir/graphql
+NEXT_PUBLIC_BACKEND_URL=https://nextwoo.ir/graphql
 NEXTAUTH_SECRET=jg3I65KxxWvmLWwbI8Zp9DbJsgyVJ+vHRAARmhF68+A=
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "stylis": "^4.3.1",
     "stylis-plugin-rtl": "^2.1.1",
     "swiper": "^11.1.1",
+    "usehooks-ts": "^3.1.0",
     "yarn": "^1.22.22",
     "yup": "^1.4.0"
   },
diff --git a/src/app/[locale]/(main)/(container)/search/page.tsx b/src/app/[locale]/(main)/(container)/search/page.tsx
@@ -1,39 +1,18 @@
 import { ColumnFilters } from '@/components/ColumnFilters';
 import { InlineFilters } from '@/components/InlineFilters';
-import ProductsCount from '@/components/ProductsCount/ProductsCount';
 import ProductsList from '@/components/ProductsList/ProductsList';
 import DesktopView from '@/components/ResponsiveDesign/components/DesktopView';
 import MobileView from '@/components/ResponsiveDesign/components/MobileView';
-import { getClient } from '@/graphql/clients/serverSideClient';
-import { GET_VARIABLE_PRODUCTS_QUERY } from '@/graphql/queries/products';
-import { GetAllProductsQuery, StockStatusEnum } from '@/graphql/types/graphql';
-import { sortOptions } from '@/static/sortOptions';
-import { getSearchPageParams } from '@/utils/params';
 import { Box } from '@mui/material';
-import SortWrapper from './components/SortWrapper';
 import SortRow from './components/SortRow';
+import SortWrapper from './components/SortWrapper';
 
 const Page = async (props: { searchParams: Record<string, string> }) => {
-  const { inStock, categoryId, sort, q } = getSearchPageParams(
-    new URLSearchParams(props.searchParams),
-  );
-
-  const { data } = await getClient().query<GetAllProductsQuery>({
-    query: GET_VARIABLE_PRODUCTS_QUERY,
-    variables: {
-      stockStatus: inStock ? StockStatusEnum.InStock : null,
-      categoryIdIn: categoryId ? [+categoryId] : null,
-      q,
-      orderBy: [sortOptions.find((item) => item.key === sort)?.props],
-      first: 10,
-    },
-  });
-
   return (
     <>
       <MobileView>
         <InlineFilters />
-        <ProductsList items={data.products?.nodes} />
+        <ProductsList />
       </MobileView>
 
       <DesktopView>
@@ -55,10 +34,10 @@ const Page = async (props: { searchParams: Record<string, string> }) => {
           <Box sx={{ flexGrow: 1 }}>
             <SortWrapper>
               <SortRow />
-              <ProductsCount value={data.products?.pageInfo.total} />
+              {/* <ProductsCount value={data.products?.pageInfo.total} /> */}
             </SortWrapper>
 
-            <ProductsList items={data.products?.nodes} />
+            <ProductsList />
           </Box>
         </Box>
       </DesktopView>
diff --git a/src/components/ProductsList/ProductsList.tsx b/src/components/ProductsList/ProductsList.tsx
@@ -1,17 +1,93 @@
-import { GetAllProductsQuery } from '@/graphql/types/graphql';
+'use client';
+
+import { GET_VARIABLE_PRODUCTS_QUERY } from '@/graphql/queries/products';
+import { GetAllProductsQuery, StockStatusEnum } from '@/graphql/types/graphql';
+import useCustomSearchParams from '@/hooks/useCustomSearchParams';
+import { sortOptions } from '@/static/sortOptions';
+import { useQuery, useSuspenseQuery } from '@apollo/client';
 import { Grid } from '@mui/material';
-import { FC } from 'react';
-import { VariableProductItem } from '../VariableProductItem';
+import { FC, useEffect } from 'react';
+import { useIntersectionObserver } from 'usehooks-ts';
+import {
+  VariableProductItem,
+  VariableProductItemSkeleton,
+} from '../VariableProductItem';
 import NotFoundItem from '../common/NotFoundItem';
 
-export interface ProductsListProps {
-  items?: NonNullable<GetAllProductsQuery['products']>['nodes'];
-}
-const ProductsList: FC<ProductsListProps> = ({ items }) => {
-  if (!items?.length) {
+export interface ProductsListProps {}
+const ProductsList: FC<ProductsListProps> = () => {
+  const { inStock, categoryId, sort, q } = useCustomSearchParams();
+
+  const variables = {
+    stockStatus: inStock ? StockStatusEnum.InStock : null,
+    categoryIdIn: categoryId ? [+categoryId] : null,
+    q,
+    orderBy: [sortOptions.find((item) => item.key === sort)?.props],
+    first: 15,
+  };
+
+  const initQuery = useSuspenseQuery<GetAllProductsQuery>(
+    GET_VARIABLE_PRODUCTS_QUERY,
+    {
+      variables,
+    },
+  );
+
+  const { isIntersecting, ref } = useIntersectionObserver({
+    threshold: 0.1,
+  });
+
+  const paginateQuery = useQuery<GetAllProductsQuery>(
+    GET_VARIABLE_PRODUCTS_QUERY,
+    {
+      variables,
+      skip: true,
+    },
+  );
+
+  useEffect(() => {
+    if (isIntersecting) {
+      paginateQuery.fetchMore({
+        variables: {
+          ...variables,
+          after:
+            paginateQuery.data?.products?.pageInfo.endCursor ||
+            initQuery.data?.products?.pageInfo.endCursor,
+        },
+        updateQuery: (previousQueryResult, { fetchMoreResult }) => {
+          const newNodes = fetchMoreResult.products?.nodes || [];
+          const pageInfo = fetchMoreResult.products?.pageInfo!;
+
+          return newNodes?.length!
+            ? {
+                ...previousQueryResult,
+
+                products: {
+                  ...previousQueryResult.products,
+
+                  nodes: [
+                    ...(previousQueryResult.products?.nodes || []),
+                    ...newNodes,
+                  ],
+
+                  pageInfo,
+                },
+              }
+            : previousQueryResult;
+        },
+      });
+    }
+  }, [isIntersecting]);
+
+  if (!initQuery.data?.products?.nodes?.length) {
     return <NotFoundItem />;
   }
 
+  const items = [
+    ...initQuery.data.products.nodes,
+    ...(paginateQuery.data?.products?.nodes || []),
+  ];
+
   return (
     <Grid container spacing={1}>
       {items?.map((item) => {
@@ -23,6 +99,27 @@ const ProductsList: FC<ProductsListProps> = ({ items }) => {
           );
         }
       })}
+
+      {(initQuery.data.products.pageInfo.hasNextPage ||
+        paginateQuery.data?.products?.pageInfo.hasNextPage) && (
+        <>
+          {new Array(4 - (items.length % 4)).fill(1).map((_, index) => {
+            return (
+              <Grid
+                ref={index === 0 ? ref : null}
+                key={index.toString()}
+                item
+                xs={12}
+                md={6}
+                lg={4}
+                xl={3}
+              >
+                <VariableProductItemSkeleton />
+              </Grid>
+            );
+          })}
+        </>
+      )}
     </Grid>
   );
 };
diff --git a/src/components/VariableProductItem/VariableProductItem.tsx b/src/components/VariableProductItem/VariableProductItem.tsx
@@ -81,7 +81,7 @@ const VariableProductItem: FC<ProductItemProps> = ({ data }) => {
                 WebkitBoxOrient: 'vertical',
               }}
             >
-              {data.name}as
+              {data.name}
             </Typography>
             <Box
               sx={{
diff --git a/src/graphql/queries/products.ts b/src/graphql/queries/products.ts
@@ -11,9 +11,11 @@ export const GET_VARIABLE_PRODUCTS_QUERY = gql`
     $categoryIdIn: [Int]
     $q: String
     $first: Int
+    $after: String
   ) {
     products(
       first: $first
+      after: $after
       where: {
         stockStatus: $stockStatus
         orderby: $orderBy
@@ -23,6 +25,8 @@ export const GET_VARIABLE_PRODUCTS_QUERY = gql`
     ) {
       pageInfo {
         total
+        endCursor
+        startCursor
         hasNextPage
         hasPreviousPage
       }
diff --git a/src/hooks/useCustomSearchParams.ts b/src/hooks/useCustomSearchParams.ts
@@ -1,6 +1,5 @@
 'use client';
 
-import { useRouter } from '@/navigation';
 import {
   SearchPageParamsKeys,
   SearchPagesParams,
@@ -19,7 +18,6 @@ export interface IUseCustomSearchParams {
 
 const useCustomSearchParams: IUseCustomSearchParams = () => {
   const params = useSearchParams();
-  const router = useRouter();
 
   const navigate: ReturnType<IUseCustomSearchParams>['navigate'] = (
     key,
@@ -31,7 +29,8 @@ const useCustomSearchParams: IUseCustomSearchParams = () => {
     } else {
       newParams.set(key, value.toString());
     }
-    router.push(`/search?${newParams}`);
+
+    window.history.pushState(null, '', `/search?${newParams}`);
   };
 
   return {
diff --git a/yarn.lock b/yarn.lock
@@ -7820,6 +7820,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.debounce@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "lodash.debounce@npm:4.0.8"
+  checksum: 10c0/762998a63e095412b6099b8290903e0a8ddcb353ac6e2e0f2d7e7d03abd4275fe3c689d88960eb90b0dde4f177554d51a690f22a343932ecbc50a5d111849987
+  languageName: node
+  linkType: hard
+
 "lodash.isplainobject@npm:^4.0.6":
   version: 4.0.6
   resolution: "lodash.isplainobject@npm:4.0.6"
@@ -8457,6 +8464,7 @@ __metadata:
     swiper: "npm:^11.1.1"
     ts-jest: "npm:^29.1.2"
     typescript: "npm:5.4"
+    usehooks-ts: "npm:^3.1.0"
     yarn: "npm:^1.22.22"
     yup: "npm:^1.4.0"
   languageName: unknown
@@ -11027,6 +11035,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"usehooks-ts@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "usehooks-ts@npm:3.1.0"
+  dependencies:
+    lodash.debounce: "npm:^4.0.8"
+  peerDependencies:
+    react: ^16.8.0  || ^17 || ^18
+  checksum: 10c0/2204d8c95109302bdaaa51a66bf216f3dba750f1d2795c20ecba75ba1c44a070a253935d537ef536514ab6e363bcc02ccc78b5ad63576ff8d880d577cf3fc48f
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-NEXT_PUBLIC_BACKEND_URL=https://api.nextwoo.ir/graphql`
	`1`	`+NEXT_PUBLIC_BACKEND_URL=https://nextwoo.ir/graphql`
`2`	`2`	`NEXTAUTH_SECRET=jg3I65KxxWvmLWwbI8Zp9DbJsgyVJ+vHRAARmhF68+A=`
Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ const VariableProductItem: FC<ProductItemProps> = ({ data }) => {`
`81`	`81`	`WebkitBoxOrient: 'vertical',`
`82`	`82`	`}}`
`83`	`83`	`>`
`84`		`- {data.name}as`
	`84`	`+ {data.name}`
`85`	`85`	`</Typography>`
`86`	`86`	`<Box`
`87`	`87`	`sx={{`