fix: Implement pagination for sellers in Organization Details page

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+- Implement pagination for sellers in Organization Details page
+
 ## [1.33.1] - 2024-08-06
 
 ### Fixed

react/admin/OrganizationDetails/OrganizationDetailsSellers.tsx

@@ -1,11 +1,12 @@
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { Fragment, useState } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { PageBlock, Table } from 'vtex.styleguide'
 import { useQuery } from 'react-apollo'
+import { useToast } from '@vtex/admin-ui'
 
 import { organizationMessages as messages } from '../utils/messages'
 import { organizationBulkAction } from '../utils/organizationBulkAction'
-import GET_SELLERS from '../../graphql/getSellers.graphql'
+import GET_SELLERS_PAGINATED from '../../graphql/getSellersPaginated.graphql'
 
 export interface Seller {
   sellerId: string
@@ -17,6 +18,17 @@ export interface SellerItem {
   name: string
 }
 
+interface GetSellersPaginatedQueryResponse {
+  getSellersPaginated: {
+    items: SellerItem[]
+    pagination: {
+      page: number
+      pageSize: number
+      total: number
+    }
+  }
+}
+
 const OrganizationDetailsSellers = ({
   getSchema,
   sellersState,
@@ -29,38 +41,42 @@ const OrganizationDetailsSellers = ({
   /**
    * Hooks
    */
+  const toast = useToast()
   const { formatMessage } = useIntl()
 
   /**
    * States
    */
-  const [sellerOptions, setSellerOptions] = useState([] as Seller[])
+  const [variables, setVariables] = useState({ page: 1, pageSize: 25 })
+  const [sellerOptions, setSellerOptions] = useState<Seller[]>([])
 
   /**
    * Queries
    */
-  const { data: sellersData, loading } = useQuery(GET_SELLERS)
+  const { data: sellersData, loading, refetch } = useQuery<
+    GetSellersPaginatedQueryResponse
+  >(GET_SELLERS_PAGINATED, {
+    variables,
+    onCompleted: data => {
+      if (!data?.getSellersPaginated?.items) {
+        return
+      }
 
-  /**
-   * Effects
-   */
-  useEffect(() => {
-    if (!sellersData?.getSellers?.length) {
-      return
-    }
+      const options = data.getSellersPaginated.items.map(
+        ({ name, id }: SellerItem) => ({
+          name,
+          sellerId: id,
+        })
+      )
 
-    const options = [] as Seller[]
+      setSellerOptions(options)
+    },
+    onError: error => {
+      toast({ variant: 'critical', message: error.message })
+    },
+  })
 
-    sellersData.getSellers.forEach(({ name, id }: SellerItem) => {
-      if (!options.find(option => option.sellerId === id)) {
-        options.push({ name, sellerId: id })
-      }
-    })
-    options.sort(
-      (a: Seller, b: Seller) => a.name?.localeCompare(b.name ?? '') ?? 0
-    )
-    setSellerOptions(options)
-  }, [sellersData])
+  const totalItems = sellersData?.getSellersPaginated?.pagination?.total ?? 0
 
   /**
    * Functions
@@ -96,6 +112,35 @@ const OrganizationDetailsSellers = ({
     setSellersState((prevState: any) => [...prevState, ...newSellers])
   }
 
+  const handleNext = () => {
+    if (variables.page * variables.pageSize >= totalItems) return
+
+    setVariables(prev => ({ ...prev, page: prev.page + 1 }))
+
+    refetch({ page: variables.page + 1, pageSize: variables.pageSize })
+  }
+
+  const handlePrev = () => {
+    if (variables.page === 1) return
+
+    setVariables(prev => ({ ...prev, page: prev.page - 1 }))
+
+    refetch({ page: variables.page - 1, pageSize: variables.pageSize })
+  }
+
+  const handleRowsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const {
+      target: { value },
+    } = e
+
+    setVariables({ page: 1, pageSize: +value })
+
+    refetch({
+      page: 1,
+      pageSize: +value,
+    })
+  }
+
   return (
     <Fragment>
       <PageBlock variation="half" title={formatMessage(messages.sellers)}>
@@ -107,27 +152,42 @@ const OrganizationDetailsSellers = ({
             fullWidth
             schema={getSchema()}
             items={sellersState}
-            loading={loading}
             bulkActions={organizationBulkAction(
               handleRemoveSellers,
               messages.removeFromOrg,
               formatMessage
             )}
           />
         </div>
+
         <div>
           <h4 className="t-heading-4 mt0 mb0">
             <FormattedMessage id="admin/b2b-organizations.organization-details.available" />
           </h4>
           <Table
             fullWidth
+            loading={loading}
             schema={getSchema('availableSellers')}
             bulkActions={organizationBulkAction(
               handleAddSellers,
               messages.addToOrg,
               formatMessage
             )}
             items={sellerOptions}
+            pagination={{
+              onNextClick: handleNext,
+              onPrevClick: handlePrev,
+              onRowsChange: handleRowsChange,
+              currentItemFrom: (variables.page - 1) * variables.pageSize + 1,
+              currentItemTo: Math.min(
+                variables.page * variables.pageSize,
+                totalItems
+              ),
+              textShowRows: formatMessage(messages.showRows),
+              textOf: formatMessage(messages.of),
+              rowsOptions: [25, 50, 100],
+              totalItems,
+            }}
           />
         </div>
       </PageBlock>

react/graphql/getSellersPaginated.graphql

@@ -0,0 +1,14 @@
+query GetSellersPaginated($page: Int, $pageSize: Int) {
+  getSellersPaginated(page: $page, pageSize: $pageSize) {
+    pagination {
+      page
+      pageSize
+      total
+    }
+    items {
+      id
+      name
+      email
+    }
+  }
+}