diff --git a/CHANGELOG.md b/CHANGELOG.md index b3a52c6b..958d871a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/react/admin/OrganizationDetails/OrganizationDetailsSellers.tsx b/react/admin/OrganizationDetails/OrganizationDetailsSellers.tsx index 914affbc..44d33155 100644 --- a/react/admin/OrganizationDetails/OrganizationDetailsSellers.tsx +++ b/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([]) /** * 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) => { + const { + target: { value }, + } = e + + setVariables({ page: 1, pageSize: +value }) + + refetch({ + page: 1, + pageSize: +value, + }) + } + return ( @@ -107,7 +152,6 @@ const OrganizationDetailsSellers = ({ fullWidth schema={getSchema()} items={sellersState} - loading={loading} bulkActions={organizationBulkAction( handleRemoveSellers, messages.removeFromOrg, @@ -115,12 +159,14 @@ const OrganizationDetailsSellers = ({ )} /> +

diff --git a/react/graphql/getSellersPaginated.graphql b/react/graphql/getSellersPaginated.graphql new file mode 100644 index 00000000..70533aa4 --- /dev/null +++ b/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 + } + } +}