From 1e136d394200ae0b00bebeb8a71189266a7cedb7 Mon Sep 17 00:00:00 2001
From: Meruert <mika.amantaikuzu@gmail.com>
Date: Wed, 11 Jun 2025 19:32:27 +0500
Subject: [PATCH 1/4] feat: ECOM-80 add pagination to catalog page

---
 app/components/ui/Pagination.tsx              | 133 ++++++++++++++++++
 app/pages/catalog/FilterForm/Categories.tsx   |  13 +-
 .../catalog/FilterForm/FilterFormBody.tsx     |  11 +-
 app/pages/catalog/NoProductsFound.tsx         |  13 ++
 app/pages/catalog/PaginationControls.tsx      |  58 ++++++++
 app/pages/catalog/ProductList.tsx             |  20 +--
 .../catalog/SearchForm/SearchFomBody.tsx      |   4 +-
 app/pages/catalog/hooks/useCatalogData.ts     |   5 +-
 .../catalog/hooks/useCatalogProductsData.ts   |   9 +-
 app/pages/catalog/index.tsx                   |  39 +++--
 10 files changed, 264 insertions(+), 41 deletions(-)
 create mode 100644 app/components/ui/Pagination.tsx
 create mode 100644 app/pages/catalog/NoProductsFound.tsx
 create mode 100644 app/pages/catalog/PaginationControls.tsx

diff --git a/app/components/ui/Pagination.tsx b/app/components/ui/Pagination.tsx
new file mode 100644
index 0000000..d3282a7
--- /dev/null
+++ b/app/components/ui/Pagination.tsx
@@ -0,0 +1,133 @@
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeft, ChevronsRight, MoreHorizontalIcon } from 'lucide-react'
+
+import { cn } from '~/utils/ui'
+import type { Button } from '~/components/ui/Button'
+import { buttonVariants } from '~/components/ui/Button'
+import type { ComponentProps, ReactElement } from 'react'
+
+function Pagination({ className, ...properties }: ComponentProps<'nav'>): ReactElement {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn('mx-auto flex w-full justify-center my-4', className)}
+      {...properties}
+    />
+  )
+}
+
+function PaginationContent({ className, ...properties }: ComponentProps<'ul'>): ReactElement {
+  return (
+    <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...properties} />
+  )
+}
+
+function PaginationItem({ ...properties }: ComponentProps<'li'>): ReactElement {
+  return <li data-slot="pagination-item" {...properties} />
+}
+
+type PaginationLinkProperties = {
+  isActive?: boolean
+} & Pick<ComponentProps<typeof Button>, 'size'> &
+  ComponentProps<'a'>
+
+function PaginationLink({ className, isActive, size = 'icon', ...properties }: PaginationLinkProperties): ReactElement {
+  return (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? 'outline' : 'ghost',
+          size
+        }),
+        className
+      )}
+      {...properties}
+    />
+  )
+}
+
+function PaginationPrevious({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...properties}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...properties}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  )
+}
+
+function PaginationStart({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to first page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
+      {...properties}
+    >
+      <ChevronsLeft />
+      <span className="hidden sm:block">Start</span>
+    </PaginationLink>
+  )
+}
+
+function PaginationEnd({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+  return (
+    <PaginationLink
+      aria-label="Go to last page"
+      size="default"
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
+      {...properties}
+    >
+      <span className="hidden sm:block">End</span>
+      <ChevronsRight />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({ className, ...properties }: ComponentProps<'span'>): ReactElement {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...properties}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  PaginationStart,
+  PaginationEnd
+}
diff --git a/app/pages/catalog/FilterForm/Categories.tsx b/app/pages/catalog/FilterForm/Categories.tsx
index 23584f6..5636b61 100644
--- a/app/pages/catalog/FilterForm/Categories.tsx
+++ b/app/pages/catalog/FilterForm/Categories.tsx
@@ -9,18 +9,21 @@ import { ROUTES } from '~/routes'
 
 type LinkProperties = {
   category: ProductListCategory
+  onClick: () => void
 }
 
 type CategoriesProperties = {
   categories: ProductListCategory[]
+  onClick: () => void
 }
 
-function Link({ category }: LinkProperties): ReactElement {
+function Link({ category, onClick }: LinkProperties): ReactElement {
   const navigate = useNavigate()
   const { categoryId } = useParams()
 
   const handleClick = async (event: MouseEvent, categoryId: string): Promise<void> => {
     event.preventDefault()
+    onClick()
     return navigate(generatePath(ROUTES.CATEGORY, { categoryId }))
   }
 
@@ -35,7 +38,7 @@ function Link({ category }: LinkProperties): ReactElement {
   )
 }
 
-export function Categories({ categories }: CategoriesProperties): ReactElement {
+export function Categories({ categories, onClick }: CategoriesProperties): ReactElement {
   const [open, setOpen] = useState<Record<string, boolean>>(() =>
     Object.fromEntries(categories.map((category) => [category.id, true]))
   )
@@ -52,7 +55,7 @@ export function Categories({ categories }: CategoriesProperties): ReactElement {
                 onOpenChange={() => setOpen((previous) => ({ ...previous, [category.id]: !previous[category.id] }))}
               >
                 <div className="flex justify-between items-center cursor-pointer">
-                  <Link category={category} />
+                  <Link category={category} onClick={onClick} />
                   <CollapsibleTrigger asChild>
                     <Button type="button" variant="ghost" size="icon" className="size-8 cursor-pointer">
                       <ChevronsUpDown />
@@ -61,12 +64,12 @@ export function Categories({ categories }: CategoriesProperties): ReactElement {
                 </div>
                 <CollapsibleContent>
                   <div className="pl-3">
-                    <Categories categories={category.subCategories} />
+                    <Categories categories={category.subCategories} onClick={onClick} />
                   </div>
                 </CollapsibleContent>
               </Collapsible>
             ) : (
-              <Link category={category} />
+              <Link category={category} onClick={onClick} />
             )}
           </li>
         ))}
diff --git a/app/pages/catalog/FilterForm/FilterFormBody.tsx b/app/pages/catalog/FilterForm/FilterFormBody.tsx
index a56d2a0..7ba345b 100644
--- a/app/pages/catalog/FilterForm/FilterFormBody.tsx
+++ b/app/pages/catalog/FilterForm/FilterFormBody.tsx
@@ -34,6 +34,7 @@ type FilterFormBodyProperties = {
   filters: ProductListFilter[]
   categories: ProductListCategory[]
   fetch: UseCatalogDataResult['fetchProducts']
+  onApply: () => void
 }
 
 const SORT_KEY_PREFIX = 'sort_'
@@ -161,16 +162,18 @@ function FilterFormFields({
   )
 }
 
-export function FilterFormBody({ filters, categories, fetch }: FilterFormBodyProperties): ReactElement {
+export function FilterFormBody({ filters, categories, fetch, onApply }: FilterFormBodyProperties): ReactElement {
   const defaultValues = getDefaultFormValues(filters, sorts)
   const form = useForm<FormValues>({ defaultValues })
 
-  const handleApply = (data: FormValues): Promise<void> =>
-    fetch(
+  const handleApply = (data: FormValues): Promise<void> => {
+    onApply()
+    return fetch(
       { limit: PRODUCTS_LIMIT },
       convertFormValuesToAppliedFilters(data, filters),
       convertFormValuesToSort(data, sorts)
     )
+  }
 
   const handleReset = (): Promise<void> => {
     form.reset(defaultValues)
@@ -182,7 +185,7 @@ export function FilterFormBody({ filters, categories, fetch }: FilterFormBodyPro
       <Sidebar>
         <SidebarContent className="p-4">
           <form onSubmit={(event) => void form.handleSubmit(handleApply)(event)} className="space-y-4">
-            <Categories categories={categories} />
+            <Categories categories={categories} onClick={onApply} />
             <FilterFormFields filters={filters} form={form} />
             <SidebarGroup>
               <div className="flex justify-between">
diff --git a/app/pages/catalog/NoProductsFound.tsx b/app/pages/catalog/NoProductsFound.tsx
new file mode 100644
index 0000000..6b6eade
--- /dev/null
+++ b/app/pages/catalog/NoProductsFound.tsx
@@ -0,0 +1,13 @@
+import { Sparkles } from 'lucide-react'
+import type { ReactElement } from 'react'
+
+export function NoProductsFound(): ReactElement {
+  return (
+    <div className="w-full h-full flex items-center justify-center">
+      <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
+        <Sparkles size={60} className="text-sky-200" />
+        <p className="text-sm">We couldn’t find any products matching your search.</p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/pages/catalog/PaginationControls.tsx b/app/pages/catalog/PaginationControls.tsx
new file mode 100644
index 0000000..e382c41
--- /dev/null
+++ b/app/pages/catalog/PaginationControls.tsx
@@ -0,0 +1,58 @@
+import type { ReactElement } from 'react'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEnd,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationStart
+} from '~/components/ui/Pagination'
+
+export const ITEMS_PER_PAGE = 12
+
+type PaginationControlsProperties = {
+  page: number
+  totalPage: number
+  onPageChange: (page: number) => void
+}
+
+export function PaginationControls({ page, totalPage, onPageChange }: PaginationControlsProperties): ReactElement {
+  const isFirstPage = page === 1
+  const isLastPage = page === totalPage
+  const disabledState = 'pointer-events-none opacity-50'
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationStart
+            onClick={() => !isFirstPage && onPageChange(1)}
+            className={isFirstPage ? disabledState : ''}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => !isFirstPage && onPageChange(page - 1)}
+            className={isFirstPage ? disabledState : ''}
+          />
+        </PaginationItem>
+        <PaginationItem className="px-2.5 sm:pl-2.5 border rounded-sm">
+          {page} / {totalPage}
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext
+            onClick={() => !isLastPage && onPageChange(page + 1)}
+            className={isLastPage ? disabledState : ''}
+          />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEnd
+            onClick={() => !isLastPage && onPageChange(totalPage)}
+            className={isLastPage ? disabledState : ''}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
diff --git a/app/pages/catalog/ProductList.tsx b/app/pages/catalog/ProductList.tsx
index a221454..fcc1e43 100644
--- a/app/pages/catalog/ProductList.tsx
+++ b/app/pages/catalog/ProductList.tsx
@@ -3,10 +3,7 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { Skeleton } from '~/components/ui/Skeleton'
 import { ProductItem } from './ProductItem'
 import { CATALOG_STATUS } from './hooks/useCatalogData'
-import { Sparkles } from 'lucide-react'
-
-// TODO: items per page
-const SKELETON_COUNT = 8
+import { ITEMS_PER_PAGE } from './PaginationControls'
 
 type ProductListProperties = {
   products: ProductProjection[]
@@ -15,25 +12,12 @@ type ProductListProperties = {
 
 export function ProductList({ products, status }: ProductListProperties): ReactElement {
   const isNotReady = status !== CATALOG_STATUS.READY
-  const isEmpty = !isNotReady && products.length === 0
-
-  if (isEmpty) {
-    // TODO: move to separate component
-    return (
-      <div className="w-full h-full flex items-center justify-center">
-        <div className="max-w-xs flex flex-col items-center justify-center gap-4 text-center">
-          <Sparkles size={60} className="text-sky-200" />
-          <p className="text-sm">We couldn’t find any products matching your search.</p>
-        </div>
-      </div>
-    )
-  }
 
   return (
     <div className="flex gap-3 flex-wrap px-2 pt-1 pb-3">
       {isNotReady
         ? // TODO: move to separate component
-          Array.from({ length: SKELETON_COUNT }).map((_, index) => (
+          Array.from({ length: ITEMS_PER_PAGE }).map((_, index) => (
             <Skeleton className="w-2xs aspect-[3/4] mx-auto" key={index} />
           ))
         : products.map((product) => <ProductItem product={product} key={product.id} />)}
diff --git a/app/pages/catalog/SearchForm/SearchFomBody.tsx b/app/pages/catalog/SearchForm/SearchFomBody.tsx
index 7a86ec1..649ab49 100644
--- a/app/pages/catalog/SearchForm/SearchFomBody.tsx
+++ b/app/pages/catalog/SearchForm/SearchFomBody.tsx
@@ -8,13 +8,15 @@ import { type UseCatalogDataResult } from '../hooks/useCatalogData'
 
 type SearchFormBodyProperties = {
   fetch: UseCatalogDataResult['fetchProducts']
+  setSearch: (search: string) => void
 }
 
-export function SearchFormBody({ fetch }: SearchFormBodyProperties): ReactElement {
+export function SearchFormBody({ fetch, setSearch }: SearchFormBodyProperties): ReactElement {
   const { register, handleSubmit, getValues } = useForm<{ search: string }>()
 
   function onSubmit(): void {
     const { search } = getValues()
+    setSearch(search)
     void fetch({ limit: PRODUCTS_LIMIT }, [], [], search)
   }
 
diff --git a/app/pages/catalog/hooks/useCatalogData.ts b/app/pages/catalog/hooks/useCatalogData.ts
index 1a16112..b344dec 100644
--- a/app/pages/catalog/hooks/useCatalogData.ts
+++ b/app/pages/catalog/hooks/useCatalogData.ts
@@ -16,6 +16,7 @@ export type UseCatalogDataResult = {
   products: UseCatalogProductsDataResult['products']
   categories: UseCatalogCategoriesDataResult['categories']
   status: CATALOG_STATUS
+  total: number
 }
 
 export function useCatalogData(): UseCatalogDataResult {
@@ -24,12 +25,12 @@ export function useCatalogData(): UseCatalogDataResult {
   const { categoryId = '' } = useParams()
 
   const { categories, fetchCategories } = useCatalogCategoriesData({ setStatus })
-  const { products, fetchProducts } = useCatalogProductsData({ setStatus })
+  const { products, fetchProducts, total } = useCatalogProductsData({ setStatus })
   const { filters, fetchFilters } = useCatalogFiltersData({ setStatus })
 
   useEffect(() => void Promise.all([fetchFilters(), fetchProducts(), fetchCategories()]), [])
 
   useEffect(() => void fetchProducts(), [categoryId])
 
-  return { products, filters, categories, status, fetchProducts }
+  return { products, filters, categories, status, total, fetchProducts }
 }
diff --git a/app/pages/catalog/hooks/useCatalogProductsData.ts b/app/pages/catalog/hooks/useCatalogProductsData.ts
index e10aa84..db1b6d1 100644
--- a/app/pages/catalog/hooks/useCatalogProductsData.ts
+++ b/app/pages/catalog/hooks/useCatalogProductsData.ts
@@ -11,6 +11,7 @@ import {
   type ProductListQueryParameters
 } from '~/api/namespaces/product'
 import { CATALOG_STATUS } from './useCatalogData'
+import { ITEMS_PER_PAGE } from '../PaginationControls'
 
 export type UseCatalogProductsDataResult = {
   products: ProductProjection[]
@@ -20,6 +21,7 @@ export type UseCatalogProductsDataResult = {
     sort?: ProductListAppliedSort,
     searchText?: string
   ) => Promise<void>
+  total: number
 }
 
 export type ProductListAppliedPayload = {
@@ -46,6 +48,7 @@ export function useCatalogProductsData({
   setStatus: Dispatch<SetStateAction<CATALOG_STATUS>>
 }): UseCatalogProductsDataResult {
   const [products, setProducts] = useState<ProductProjection[]>([])
+  const [total, setTotal] = useState<number>(0)
   const { categoryId = '' } = useParams()
 
   const fetchProducts = async (
@@ -60,14 +63,14 @@ export function useCatalogProductsData({
 
     try {
       const response = await productApi.getProducts(
-        { ...parameters, limit: 100 },
+        { ...parameters, limit: ITEMS_PER_PAGE },
         cache.filters,
         cache.sort,
         searchText,
         categoryId
       )
-
       setProducts(response.body.results)
+      setTotal(response.body.total ?? 0)
       setStatus(CATALOG_STATUS.READY)
     } catch (error) {
       setStatus(CATALOG_STATUS.ERROR)
@@ -76,5 +79,5 @@ export function useCatalogProductsData({
     }
   }
 
-  return { products, fetchProducts }
+  return { products, fetchProducts, total }
 }
diff --git a/app/pages/catalog/index.tsx b/app/pages/catalog/index.tsx
index 14573e0..fcd6d9c 100644
--- a/app/pages/catalog/index.tsx
+++ b/app/pages/catalog/index.tsx
@@ -1,26 +1,49 @@
-import { type ReactElement } from 'react'
+import { useState, type ReactElement } from 'react'
 import { useTitle } from '~/hooks/useTitle'
 import { Loading } from '~/components/Loading'
 import { ProductList } from './ProductList'
 import { FilterFormBody } from './FilterForm/FilterFormBody'
-import { useCatalogData } from './hooks/useCatalogData'
+import { CATALOG_STATUS, useCatalogData } from './hooks/useCatalogData'
 import { SearchFormBody } from './SearchForm/SearchFomBody'
+import { NoProductsFound } from './NoProductsFound'
+import { ITEMS_PER_PAGE, PaginationControls } from './PaginationControls'
 
 export default function Catalog(): ReactElement {
   useTitle('Catalog')
+  const { products, filters, status, categories, fetchProducts, total } = useCatalogData()
+  const noProductsFound = status === CATALOG_STATUS.READY && products.length === 0
+  const [currentPage, setCurrentPage] = useState<number>(1)
+  const [searchText, setSearchText] = useState<string>('')
+  const pagesCount = Math.ceil(total / ITEMS_PER_PAGE)
 
-  const { products, filters, status, categories, fetchProducts } = useCatalogData()
-
+  const handlePageChange = (page: number): void => {
+    setCurrentPage(page)
+    void fetchProducts({ limit: ITEMS_PER_PAGE, offset: (page - 1) * ITEMS_PER_PAGE }, [], [], searchText)
+  }
   if (filters.length === 0) {
     return <Loading />
   }
-
   return (
     <div className="flex h-full w-full">
-      <FilterFormBody filters={filters} categories={categories} fetch={fetchProducts} />
+      <FilterFormBody
+        filters={filters}
+        categories={categories}
+        fetch={fetchProducts}
+        onApply={() => {
+          setCurrentPage(1)
+          setSearchText('')
+        }}
+      />
       <div className="flex-grow">
-        <SearchFormBody fetch={fetchProducts} />
-        <ProductList products={products} status={status} />
+        <SearchFormBody fetch={fetchProducts} setSearch={setSearchText} />
+        {noProductsFound ? (
+          <NoProductsFound />
+        ) : (
+          <div>
+            <ProductList products={products} status={status} />
+            <PaginationControls page={currentPage} totalPage={pagesCount} onPageChange={handlePageChange} />
+          </div>
+        )}
       </div>
     </div>
   )

From 422e085fe370e56c2d0d4708754a03faddd0ccac Mon Sep 17 00:00:00 2001
From: Meruert <mika.amantaikuzu@gmail.com>
Date: Thu, 12 Jun 2025 11:01:43 +0500
Subject: [PATCH 2/4] fix: ECOM-80 reset to first page when searching

---
 app/pages/catalog/SearchForm/SearchFomBody.tsx | 8 +++++---
 app/pages/catalog/index.tsx                    | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/pages/catalog/SearchForm/SearchFomBody.tsx b/app/pages/catalog/SearchForm/SearchFomBody.tsx
index 649ab49..92f5383 100644
--- a/app/pages/catalog/SearchForm/SearchFomBody.tsx
+++ b/app/pages/catalog/SearchForm/SearchFomBody.tsx
@@ -9,15 +9,17 @@ import { type UseCatalogDataResult } from '../hooks/useCatalogData'
 type SearchFormBodyProperties = {
   fetch: UseCatalogDataResult['fetchProducts']
   setSearch: (search: string) => void
+  onSearch: () => void
 }
 
-export function SearchFormBody({ fetch, setSearch }: SearchFormBodyProperties): ReactElement {
+export function SearchFormBody({ fetch, setSearch, onSearch }: SearchFormBodyProperties): ReactElement {
   const { register, handleSubmit, getValues } = useForm<{ search: string }>()
 
-  function onSubmit(): void {
+  const onSubmit = (): Promise<void> => {
+    onSearch()
     const { search } = getValues()
     setSearch(search)
-    void fetch({ limit: PRODUCTS_LIMIT }, [], [], search)
+    return fetch({ limit: PRODUCTS_LIMIT }, [], [], search)
   }
 
   return (
diff --git a/app/pages/catalog/index.tsx b/app/pages/catalog/index.tsx
index fcd6d9c..175a8ed 100644
--- a/app/pages/catalog/index.tsx
+++ b/app/pages/catalog/index.tsx
@@ -35,7 +35,7 @@ export default function Catalog(): ReactElement {
         }}
       />
       <div className="flex-grow">
-        <SearchFormBody fetch={fetchProducts} setSearch={setSearchText} />
+        <SearchFormBody fetch={fetchProducts} setSearch={setSearchText} onSearch={() => setCurrentPage(1)} />
         {noProductsFound ? (
           <NoProductsFound />
         ) : (

From e4a473d98a111a537a66e754ab068db3295436d2 Mon Sep 17 00:00:00 2001
From: Meruert <mika.amantaikuzu@gmail.com>
Date: Sat, 14 Jun 2025 19:26:58 +0500
Subject: [PATCH 3/4] feat: ECOM-78 add disabled state to add to cart button

---
 app/pages/catalog/ProductItem.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/app/pages/catalog/ProductItem.tsx b/app/pages/catalog/ProductItem.tsx
index 06d29cb..610c17a 100644
--- a/app/pages/catalog/ProductItem.tsx
+++ b/app/pages/catalog/ProductItem.tsx
@@ -2,7 +2,7 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { type ReactElement } from 'react'
 import { generatePath, useNavigate } from 'react-router'
 import { Card, CardContent, CardDescription, CardTitle } from '~/components/ui/Card'
-import { ShoppingCart } from 'lucide-react'
+import { Check, ShoppingCart } from 'lucide-react'
 import { Button } from '~/components/ui/Button'
 import { SaleBadge } from '~/components/product/SaleBadge'
 import { AspectRatio } from '~/components/ui/AspectRatio'
@@ -26,7 +26,7 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
 
   return (
     <Card
-      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 cursor-pointer hover:bg-stone-50"
+      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 hover:bg-stone-50"
       onClick={() => void navigateTo(product.id)}
     >
       <CardContent className="space-y-0 h-full flex flex-col justify-between gap-y-2 relative">
@@ -39,11 +39,29 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
         <CardDescription className="flex-1 line-clamp-2">{description}</CardDescription>
         <div className="flex justify-between items-center">
           <ProductPrice startPrice={price} discountPrice={discountPrice} />
-          <Button variant="outline" size="icon">
-            <ShoppingCart size={16} />
-          </Button>
+          <AddToCartButton productId={product.id} />
         </div>
       </CardContent>
     </Card>
   )
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function AddToCartButton({ productId }: { productId: string }): ReactElement {
+  // TODO:
+  const isProductInCart = false
+
+  return (
+    <div onClick={(event) => event.stopPropagation()}>
+      <Button
+        variant={isProductInCart ? 'secondary' : 'outline'}
+        size="icon"
+        className="relative cursor-pointer disabled:opacity-100"
+        disabled={isProductInCart}
+      >
+        <ShoppingCart size={16} />
+        {isProductInCart && <Check className="text-green-400 absolute bottom-0 right-0" />}
+      </Button>
+    </div>
+  )
+}

From 09ea2faac55bc780ea844abc709164421193e72d Mon Sep 17 00:00:00 2001
From: Meruert <mika.amantaikuzu@gmail.com>
Date: Sat, 14 Jun 2025 21:15:27 +0500
Subject: [PATCH 4/4] refactor: ECOM-77 resolve PR comments

---
 app/api/namespaces/product.ts                 |  1 +
 app/components/ui/Pagination.tsx              | 35 ++++++++-----------
 app/pages/catalog/AddToCartButton.tsx         | 23 ++++++++++++
 .../catalog/FilterForm/FilterFormBody.tsx     |  5 +--
 app/pages/catalog/PaginationControls.tsx      | 12 +++----
 app/pages/catalog/ProductItem.tsx             | 25 ++-----------
 app/pages/catalog/ProductList.tsx             |  2 +-
 .../catalog/SearchForm/SearchFomBody.tsx      |  4 +--
 .../catalog/hooks/useCatalogProductsData.ts   |  2 +-
 app/pages/catalog/index.tsx                   |  7 ++--
 10 files changed, 56 insertions(+), 60 deletions(-)
 create mode 100644 app/pages/catalog/AddToCartButton.tsx

diff --git a/app/api/namespaces/product.ts b/app/api/namespaces/product.ts
index bd0f47e..d16d16a 100644
--- a/app/api/namespaces/product.ts
+++ b/app/api/namespaces/product.ts
@@ -68,6 +68,7 @@ export type ProductListAppliedSort = {
   value: 'asc' | 'desc'
 }[]
 
+export const ITEMS_PER_PAGE = 12
 export const PRODUCT_LIST_FILTER_TRUE = 'T'
 export const PRODUCT_LIST_FILTER_FALSE = 'F'
 export const PRODUCT_LIST_FILTER_NONE = 'none'
diff --git a/app/components/ui/Pagination.tsx b/app/components/ui/Pagination.tsx
index d3282a7..2af9694 100644
--- a/app/components/ui/Pagination.tsx
+++ b/app/components/ui/Pagination.tsx
@@ -5,7 +5,7 @@ import type { Button } from '~/components/ui/Button'
 import { buttonVariants } from '~/components/ui/Button'
 import type { ComponentProps, ReactElement } from 'react'
 
-function Pagination({ className, ...properties }: ComponentProps<'nav'>): ReactElement {
+export function Pagination({ className, ...properties }: ComponentProps<'nav'>): ReactElement {
   return (
     <nav
       role="navigation"
@@ -17,13 +17,13 @@ function Pagination({ className, ...properties }: ComponentProps<'nav'>): ReactE
   )
 }
 
-function PaginationContent({ className, ...properties }: ComponentProps<'ul'>): ReactElement {
+export function PaginationContent({ className, ...properties }: ComponentProps<'ul'>): ReactElement {
   return (
     <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...properties} />
   )
 }
 
-function PaginationItem({ ...properties }: ComponentProps<'li'>): ReactElement {
+export function PaginationItem({ ...properties }: ComponentProps<'li'>): ReactElement {
   return <li data-slot="pagination-item" {...properties} />
 }
 
@@ -32,7 +32,12 @@ type PaginationLinkProperties = {
 } & Pick<ComponentProps<typeof Button>, 'size'> &
   ComponentProps<'a'>
 
-function PaginationLink({ className, isActive, size = 'icon', ...properties }: PaginationLinkProperties): ReactElement {
+export function PaginationLink({
+  className,
+  isActive,
+  size = 'icon',
+  ...properties
+}: PaginationLinkProperties): ReactElement {
   return (
     <a
       aria-current={isActive ? 'page' : undefined}
@@ -50,7 +55,7 @@ function PaginationLink({ className, isActive, size = 'icon', ...properties }: P
   )
 }
 
-function PaginationPrevious({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+export function PaginationPrevious({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
   return (
     <PaginationLink
       aria-label="Go to previous page"
@@ -64,7 +69,7 @@ function PaginationPrevious({ className, ...properties }: ComponentProps<typeof
   )
 }
 
-function PaginationNext({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+export function PaginationNext({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
   return (
     <PaginationLink
       aria-label="Go to next page"
@@ -78,7 +83,7 @@ function PaginationNext({ className, ...properties }: ComponentProps<typeof Pagi
   )
 }
 
-function PaginationStart({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+export function PaginationStart({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
   return (
     <PaginationLink
       aria-label="Go to first page"
@@ -92,7 +97,7 @@ function PaginationStart({ className, ...properties }: ComponentProps<typeof Pag
   )
 }
 
-function PaginationEnd({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
+export function PaginationEnd({ className, ...properties }: ComponentProps<typeof PaginationLink>): ReactElement {
   return (
     <PaginationLink
       aria-label="Go to last page"
@@ -106,7 +111,7 @@ function PaginationEnd({ className, ...properties }: ComponentProps<typeof Pagin
   )
 }
 
-function PaginationEllipsis({ className, ...properties }: ComponentProps<'span'>): ReactElement {
+export function PaginationEllipsis({ className, ...properties }: ComponentProps<'span'>): ReactElement {
   return (
     <span
       aria-hidden
@@ -119,15 +124,3 @@ function PaginationEllipsis({ className, ...properties }: ComponentProps<'span'>
     </span>
   )
 }
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-  PaginationStart,
-  PaginationEnd
-}
diff --git a/app/pages/catalog/AddToCartButton.tsx b/app/pages/catalog/AddToCartButton.tsx
new file mode 100644
index 0000000..0a614c4
--- /dev/null
+++ b/app/pages/catalog/AddToCartButton.tsx
@@ -0,0 +1,23 @@
+import { Check, ShoppingCart } from 'lucide-react'
+import type { ReactElement } from 'react'
+import { Button } from '~/components/ui/Button'
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function AddToCartButton({ productId }: { productId: string }): ReactElement {
+  // TODO:
+  const isProductInCart = false
+
+  return (
+    <div onClick={(event) => event.stopPropagation()} className={isProductInCart ? 'cursor-auto' : 'cursor-pointer'}>
+      <Button
+        variant={isProductInCart ? 'secondary' : 'outline'}
+        size="icon"
+        className="relative cursor-pointer disabled:opacity-100"
+        disabled={isProductInCart}
+      >
+        <ShoppingCart size={16} />
+        {isProductInCart && <Check className="text-green-400 absolute bottom-0 right-0" />}
+      </Button>
+    </div>
+  )
+}
diff --git a/app/pages/catalog/FilterForm/FilterFormBody.tsx b/app/pages/catalog/FilterForm/FilterFormBody.tsx
index 7ba345b..f191f7f 100644
--- a/app/pages/catalog/FilterForm/FilterFormBody.tsx
+++ b/app/pages/catalog/FilterForm/FilterFormBody.tsx
@@ -11,7 +11,8 @@ import {
   PRODUCT_LIST_SORT_ASC,
   PRODUCT_LIST_SORT_DESC,
   type ProductListCategory,
-  PRODUCT_LIST_DEFAULT_APPLIED_FILTERS
+  PRODUCT_LIST_DEFAULT_APPLIED_FILTERS,
+  ITEMS_PER_PAGE
 } from '~/api/namespaces/product'
 import {
   Sidebar,
@@ -169,7 +170,7 @@ export function FilterFormBody({ filters, categories, fetch, onApply }: FilterFo
   const handleApply = (data: FormValues): Promise<void> => {
     onApply()
     return fetch(
-      { limit: PRODUCTS_LIMIT },
+      { limit: ITEMS_PER_PAGE },
       convertFormValuesToAppliedFilters(data, filters),
       convertFormValuesToSort(data, sorts)
     )
diff --git a/app/pages/catalog/PaginationControls.tsx b/app/pages/catalog/PaginationControls.tsx
index e382c41..f51c121 100644
--- a/app/pages/catalog/PaginationControls.tsx
+++ b/app/pages/catalog/PaginationControls.tsx
@@ -9,8 +9,6 @@ import {
   PaginationStart
 } from '~/components/ui/Pagination'
 
-export const ITEMS_PER_PAGE = 12
-
 type PaginationControlsProperties = {
   page: number
   totalPage: number
@@ -20,7 +18,7 @@ type PaginationControlsProperties = {
 export function PaginationControls({ page, totalPage, onPageChange }: PaginationControlsProperties): ReactElement {
   const isFirstPage = page === 1
   const isLastPage = page === totalPage
-  const disabledState = 'pointer-events-none opacity-50'
+  const classNamesDisabled = 'pointer-events-none opacity-50'
 
   return (
     <Pagination>
@@ -28,13 +26,13 @@ export function PaginationControls({ page, totalPage, onPageChange }: Pagination
         <PaginationItem>
           <PaginationStart
             onClick={() => !isFirstPage && onPageChange(1)}
-            className={isFirstPage ? disabledState : ''}
+            className={isFirstPage ? classNamesDisabled : ''}
           />
         </PaginationItem>
         <PaginationItem>
           <PaginationPrevious
             onClick={() => !isFirstPage && onPageChange(page - 1)}
-            className={isFirstPage ? disabledState : ''}
+            className={isFirstPage ? classNamesDisabled : ''}
           />
         </PaginationItem>
         <PaginationItem className="px-2.5 sm:pl-2.5 border rounded-sm">
@@ -43,13 +41,13 @@ export function PaginationControls({ page, totalPage, onPageChange }: Pagination
         <PaginationItem>
           <PaginationNext
             onClick={() => !isLastPage && onPageChange(page + 1)}
-            className={isLastPage ? disabledState : ''}
+            className={isLastPage ? classNamesDisabled : ''}
           />
         </PaginationItem>
         <PaginationItem>
           <PaginationEnd
             onClick={() => !isLastPage && onPageChange(totalPage)}
-            className={isLastPage ? disabledState : ''}
+            className={isLastPage ? classNamesDisabled : ''}
           />
         </PaginationItem>
       </PaginationContent>
diff --git a/app/pages/catalog/ProductItem.tsx b/app/pages/catalog/ProductItem.tsx
index 610c17a..27b9eb3 100644
--- a/app/pages/catalog/ProductItem.tsx
+++ b/app/pages/catalog/ProductItem.tsx
@@ -2,12 +2,11 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { type ReactElement } from 'react'
 import { generatePath, useNavigate } from 'react-router'
 import { Card, CardContent, CardDescription, CardTitle } from '~/components/ui/Card'
-import { Check, ShoppingCart } from 'lucide-react'
-import { Button } from '~/components/ui/Button'
 import { SaleBadge } from '~/components/product/SaleBadge'
 import { AspectRatio } from '~/components/ui/AspectRatio'
 import { ProductPrice } from '~/components/product/ProductPrice'
 import { ROUTES } from '~/routes'
+import { AddToCartButton } from './AddToCartButton'
 
 type ProductItemProperties = { product: ProductProjection }
 
@@ -26,7 +25,7 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
 
   return (
     <Card
-      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 hover:bg-stone-50"
+      className="w-full m-0 max-w-2xs aspect-[3/4] hover:scale-105 hover:shadow-xl/30 transition duration-300 hover:bg-stone-50 cursor-pointer"
       onClick={() => void navigateTo(product.id)}
     >
       <CardContent className="space-y-0 h-full flex flex-col justify-between gap-y-2 relative">
@@ -45,23 +44,3 @@ export function ProductItem({ product }: ProductItemProperties): ReactElement {
     </Card>
   )
 }
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function AddToCartButton({ productId }: { productId: string }): ReactElement {
-  // TODO:
-  const isProductInCart = false
-
-  return (
-    <div onClick={(event) => event.stopPropagation()}>
-      <Button
-        variant={isProductInCart ? 'secondary' : 'outline'}
-        size="icon"
-        className="relative cursor-pointer disabled:opacity-100"
-        disabled={isProductInCart}
-      >
-        <ShoppingCart size={16} />
-        {isProductInCart && <Check className="text-green-400 absolute bottom-0 right-0" />}
-      </Button>
-    </div>
-  )
-}
diff --git a/app/pages/catalog/ProductList.tsx b/app/pages/catalog/ProductList.tsx
index fcc1e43..50f5bb4 100644
--- a/app/pages/catalog/ProductList.tsx
+++ b/app/pages/catalog/ProductList.tsx
@@ -3,7 +3,7 @@ import { type ProductProjection } from '@commercetools/platform-sdk'
 import { Skeleton } from '~/components/ui/Skeleton'
 import { ProductItem } from './ProductItem'
 import { CATALOG_STATUS } from './hooks/useCatalogData'
-import { ITEMS_PER_PAGE } from './PaginationControls'
+import { ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 type ProductListProperties = {
   products: ProductProjection[]
diff --git a/app/pages/catalog/SearchForm/SearchFomBody.tsx b/app/pages/catalog/SearchForm/SearchFomBody.tsx
index 92f5383..afe0dbd 100644
--- a/app/pages/catalog/SearchForm/SearchFomBody.tsx
+++ b/app/pages/catalog/SearchForm/SearchFomBody.tsx
@@ -3,8 +3,8 @@ import { useForm } from 'react-hook-form'
 import { Search } from 'lucide-react'
 import { Input } from '~/components/ui/Input'
 import { Button } from '~/components/ui/Button'
-import { PRODUCTS_LIMIT } from '../FilterForm/FilterFormBody'
 import { type UseCatalogDataResult } from '../hooks/useCatalogData'
+import { ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 type SearchFormBodyProperties = {
   fetch: UseCatalogDataResult['fetchProducts']
@@ -19,7 +19,7 @@ export function SearchFormBody({ fetch, setSearch, onSearch }: SearchFormBodyPro
     onSearch()
     const { search } = getValues()
     setSearch(search)
-    return fetch({ limit: PRODUCTS_LIMIT }, [], [], search)
+    return fetch({ limit: ITEMS_PER_PAGE }, [], [], search)
   }
 
   return (
diff --git a/app/pages/catalog/hooks/useCatalogProductsData.ts b/app/pages/catalog/hooks/useCatalogProductsData.ts
index db1b6d1..bb34cdb 100644
--- a/app/pages/catalog/hooks/useCatalogProductsData.ts
+++ b/app/pages/catalog/hooks/useCatalogProductsData.ts
@@ -3,6 +3,7 @@ import { useParams } from 'react-router'
 import { type ProductProjection } from '@commercetools/platform-sdk'
 import { toast } from 'sonner'
 import {
+  ITEMS_PER_PAGE,
   PRODUCT_LIST_DEFAULT_APPLIED_FILTERS,
   PRODUCT_LIST_DEFAULT_APPLIED_SORT,
   productApi,
@@ -11,7 +12,6 @@ import {
   type ProductListQueryParameters
 } from '~/api/namespaces/product'
 import { CATALOG_STATUS } from './useCatalogData'
-import { ITEMS_PER_PAGE } from '../PaginationControls'
 
 export type UseCatalogProductsDataResult = {
   products: ProductProjection[]
diff --git a/app/pages/catalog/index.tsx b/app/pages/catalog/index.tsx
index 175a8ed..c65bb76 100644
--- a/app/pages/catalog/index.tsx
+++ b/app/pages/catalog/index.tsx
@@ -6,12 +6,13 @@ import { FilterFormBody } from './FilterForm/FilterFormBody'
 import { CATALOG_STATUS, useCatalogData } from './hooks/useCatalogData'
 import { SearchFormBody } from './SearchForm/SearchFomBody'
 import { NoProductsFound } from './NoProductsFound'
-import { ITEMS_PER_PAGE, PaginationControls } from './PaginationControls'
+import { PaginationControls } from './PaginationControls'
+import { ITEMS_PER_PAGE } from '~/api/namespaces/product'
 
 export default function Catalog(): ReactElement {
   useTitle('Catalog')
   const { products, filters, status, categories, fetchProducts, total } = useCatalogData()
-  const noProductsFound = status === CATALOG_STATUS.READY && products.length === 0
+  const hasNoProducts = status === CATALOG_STATUS.READY && products.length === 0
   const [currentPage, setCurrentPage] = useState<number>(1)
   const [searchText, setSearchText] = useState<string>('')
   const pagesCount = Math.ceil(total / ITEMS_PER_PAGE)
@@ -36,7 +37,7 @@ export default function Catalog(): ReactElement {
       />
       <div className="flex-grow">
         <SearchFormBody fetch={fetchProducts} setSearch={setSearchText} onSearch={() => setCurrentPage(1)} />
-        {noProductsFound ? (
+        {hasNoProducts ? (
           <NoProductsFound />
         ) : (
           <div>