From 6420a465f0bdd93a215a3ad2320ab6727a6058e8 Mon Sep 17 00:00:00 2001 From: Edvin Dzidic Date: Fri, 24 Jan 2025 20:44:22 +0100 Subject: [PATCH 1/3] Move fetching functionality and add pagination within useMarketTransactionsPagination hook, accomodate code to integrate pagination --- .../AmmTransactionsTable.tsx | 6 +- .../hooks/useMarketTransactionsPagination.ts | 55 +++++++++++++++++++ .../studio/CrtDashboard/tabs/CrtMarketTab.tsx | 22 +++----- 3 files changed, 67 insertions(+), 16 deletions(-) create mode 100644 packages/atlas/src/hooks/useMarketTransactionsPagination.ts diff --git a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx index 878129a6df..9ab701a47e 100644 --- a/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx +++ b/packages/atlas/src/components/_crt/AmmTransactionsTable/AmmTransactionsTable.tsx @@ -50,9 +50,9 @@ type AmmTransactionsTableProps = { data: FullAmmCurveFragment['transactions'] loading: boolean symbol: string -} +} & Pick -export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsTableProps) => { +export const AmmTransactionsTable = ({ data, loading, symbol, pagination }: AmmTransactionsTableProps) => { const mappedData = useMemo( () => data.map((row) => ({ @@ -80,6 +80,8 @@ export const AmmTransactionsTable = ({ data, loading, symbol }: AmmTransactionsT data={loading ? tableLoadingData : mappedData ?? []} columns={COLUMNS} emptyState={tableEmptyState} + pagination={pagination} + pageSize={pagination?.itemsPerPage} /> ) } diff --git a/packages/atlas/src/hooks/useMarketTransactionsPagination.ts b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts new file mode 100644 index 0000000000..8e77e3118d --- /dev/null +++ b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts @@ -0,0 +1,55 @@ +import { useState } from 'react' + +import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated' +import { SentryLogger } from '@/utils/logs' + +const separateListIntoChunks = (list: Array, chunkSize: number): Array => { + const chunks = [] + + for (let index = 0; index < list.length; index += chunkSize) { + chunks.push(list.slice(index, index + chunkSize)) + } + + return chunks +} + +export const useMarketTransactionsPagination = ({ + ammId, + initialPageSize = 10, +}: { + ammId?: string + initialPageSize?: number +}) => { + const [currentPage, setCurrentPage] = useState(0) + const [perPage, setPerPage] = useState(initialPageSize) + + const { data, loading } = useGetFullAmmCurveQuery({ + variables: { + where: { + // TODO: Change this: + id_eq: ammId, + }, + }, + skip: false, + onError: (error) => { + SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error) + }, + }) + + const marketTransactions = data?.ammCurves[0].transactions ?? [] + + const pages = separateListIntoChunks( + [...marketTransactions].sort((transactionA, transactionB) => transactionB.createdIn - transactionA.createdIn), + perPage + ) + + return { + currentPage, + setCurrentPage, + marketTransactions: pages[currentPage] ?? [], + totalCount: marketTransactions.length, + loading, + setPerPage, + perPage, + } +} diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx index dc45cf9830..737c0e3a02 100644 --- a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx +++ b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtMarketTab.tsx @@ -1,7 +1,6 @@ import BN from 'bn.js' import { useMemo } from 'react' -import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated' import { FullCreatorTokenFragment } from '@/api/queries/__generated__/fragments.generated' import { SvgJoyTokenMonochrome24 } from '@/assets/icons' import { FlexBox } from '@/components/FlexBox' @@ -10,29 +9,23 @@ import { WidgetTile } from '@/components/WidgetTile' import { AmmTransactionsTable } from '@/components/_crt/AmmTransactionsTable/AmmTransactionsTable' import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader' import { atlasConfig } from '@/config' +import { useMarketTransactionsPagination } from '@/hooks/useMarketTransactionsPagination' import { useMediaMatch } from '@/hooks/useMediaMatch' import { HAPI_TO_JOY_RATE } from '@/joystream-lib/config' import { calcBuyMarketPricePerToken } from '@/utils/crts' -import { SentryLogger } from '@/utils/logs' type CrtMarketTabProps = { token: FullCreatorTokenFragment } +const TILES_PER_PAGE = 10 + export const CrtMarketTab = ({ token }: CrtMarketTabProps) => { const mdMatch = useMediaMatch('md') const currentAmm = token.ammCurves.find((curve) => !curve.finalized) - const { data, loading } = useGetFullAmmCurveQuery({ - variables: { - where: { - id_eq: currentAmm?.id, - }, - }, - skip: !currentAmm, - onError: (error) => { - SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error) - }, - }) + const { loading, marketTransactions, currentPage, setCurrentPage, perPage, setPerPage, totalCount } = + useMarketTransactionsPagination({ ammId: currentAmm?.id, initialPageSize: TILES_PER_PAGE }) + const pricePerUnit = useMemo( () => calcBuyMarketPricePerToken(currentAmm?.mintedByAmm, currentAmm?.ammSlopeParameter, currentAmm?.ammInitPrice), [currentAmm?.ammInitPrice, currentAmm?.ammSlopeParameter, currentAmm?.mintedByAmm] @@ -103,7 +96,8 @@ export const CrtMarketTab = ({ token }: CrtMarketTabProps) => { ) From f36d70534734bc8aba8d80d98c4ce1abc5bafd5a Mon Sep 17 00:00:00 2001 From: Edvin Dzidic Date: Fri, 24 Jan 2025 20:54:02 +0100 Subject: [PATCH 2/3] Remove unnecessary comment --- packages/atlas/src/hooks/useMarketTransactionsPagination.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/atlas/src/hooks/useMarketTransactionsPagination.ts b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts index 8e77e3118d..e0c7fd1e9b 100644 --- a/packages/atlas/src/hooks/useMarketTransactionsPagination.ts +++ b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts @@ -26,7 +26,6 @@ export const useMarketTransactionsPagination = ({ const { data, loading } = useGetFullAmmCurveQuery({ variables: { where: { - // TODO: Change this: id_eq: ammId, }, }, From 621b3095c71b394749ba39ac8f4ab4f743458db0 Mon Sep 17 00:00:00 2001 From: Leszek Wiesner Date: Fri, 9 May 2025 14:07:20 +0200 Subject: [PATCH 3/3] Update packages/atlas/src/hooks/useMarketTransactionsPagination.ts --- packages/atlas/src/hooks/useMarketTransactionsPagination.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/atlas/src/hooks/useMarketTransactionsPagination.ts b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts index e0c7fd1e9b..745ddf0569 100644 --- a/packages/atlas/src/hooks/useMarketTransactionsPagination.ts +++ b/packages/atlas/src/hooks/useMarketTransactionsPagination.ts @@ -29,7 +29,7 @@ export const useMarketTransactionsPagination = ({ id_eq: ammId, }, }, - skip: false, + skip: !ammId, onError: (error) => { SentryLogger.error('Failed to fetch AMM curve', 'CrtMarketTab', error) },