🌐 Gleev v5.6.1

Lezek123 · DzhideX · web-flow · commit 7f89e79199e9 · 2025-05-09T15:07:28.000+02:00
* Add YPP referral pagination (Joystream#6503) * Add hook which correctly fetches and paginates ypp referral data, integrate hook and add necessary changes to make it work * Update VITE_YOUTUBE_SYNC_API_URL in .env * Add market transactions pagination (Joystream#6505) * Move fetching functionality and add pagination within useMarketTransactionsPagination hook, accomodate code to integrate pagination * Remove unnecessary comment * Update packages/atlas/src/hooks/useMarketTransactionsPagination.ts --------- * Update CHANGELOG and bump versions --------- Co-authored-by: Edvin Dzidic <edvindzidic2000@gmail.com>
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.6.1] - 2026-05-09
+
+### Fixed
+
+- YPP referrals pagination issue in Gleev studio: https://github.com/Joystream/atlas/issues/6502
+- Market transactions pagination issue in Gleev studio (CRT dashboard): https://github.com/Joystream/atlas/issues/6438
+
 ## [5.6.0] - 2024-12-23
 
 **IMPORTANT:** Depends on Orion release `4.2.0`.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "5.6.0",
+  "version": "5.6.1",
   "license": "GPL-3.0",
   "workspaces": [
     "packages/*"
diff --git a/packages/atlas/package.json b/packages/atlas/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@joystream/atlas",
   "description": "UI for consuming Joystream - a user governed video platform",
-  "version": "5.6.0",
+  "version": "5.6.1",
   "license": "GPL-3.0",
   "scripts": {
     "start": "vite",
diff --git a/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx b/packages/atlas/src/components/YppReferralTable/YppReferralTable.tsx
@@ -22,9 +22,9 @@ export type YppReferral = {
 type YppReferralTableProps = {
   isLoading: boolean
   data: YppReferral[]
-}
+} & Pick<TableProps, 'pagination'>
 
-export const YppReferralTable = ({ isLoading, data }: YppReferralTableProps) => {
+export const YppReferralTable = ({ isLoading, data, pagination }: YppReferralTableProps) => {
   const mappedData: TableProps['data'] = useMemo(
     () =>
       data.map((entry) => ({
@@ -41,6 +41,8 @@ export const YppReferralTable = ({ isLoading, data }: YppReferralTableProps) =>
       title="Channels you referred"
       columns={COLUMNS}
       data={isLoading ? tableLoadingData : mappedData}
+      pagination={pagination}
+      pageSize={pagination?.itemsPerPage}
     />
   )
 }
diff --git 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<TableProps, 'pagination'>
 
-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
@@ -0,0 +1,54 @@
+import { useState } from 'react'
+
+import { useGetFullAmmCurveQuery } from '@/api/queries/__generated__/creatorTokens.generated'
+import { SentryLogger } from '@/utils/logs'
+
+const separateListIntoChunks = <T>(list: Array<T>, chunkSize: number): Array<T[]> => {
+  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: {
+        id_eq: ammId,
+      },
+    },
+    skip: !ammId,
+    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/hooks/useYppReferralPagination.ts b/packages/atlas/src/hooks/useYppReferralPagination.ts
@@ -0,0 +1,59 @@
+import { useMemo, useState } from 'react'
+import { useQuery } from 'react-query'
+
+import { axiosInstance } from '@/api/axios'
+import { YppReferral } from '@/components/YppReferralTable/YppReferralTable'
+import { atlasConfig } from '@/config'
+import { useUser } from '@/providers/user/user.hooks'
+import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types'
+
+const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl
+
+const separateListIntoChunks = <T>(list: Array<T>, chunkSize: number): Array<T[]> => {
+  const chunks = []
+
+  for (let index = 0; index < list.length; index += chunkSize) {
+    chunks.push(list.slice(index, index + chunkSize))
+  }
+
+  return chunks
+}
+
+export const useYppReferralPagination = ({ initialPageSize = 10 }: { initialPageSize?: number }) => {
+  const [currentPage, setCurrentPage] = useState(0)
+  const [perPage, setPerPage] = useState(initialPageSize)
+  const { channelId } = useUser()
+
+  const { isLoading, data } = useQuery(
+    ['referralsTable', channelId],
+    () => axiosInstance.get<YppSyncedChannel[]>(`${YPP_SYNC_URL}/channels/${channelId}/referrals`),
+    { enabled: !!channelId }
+  )
+
+  const yppReferrals: YppReferral[] = useMemo(
+    () =>
+      // TODO: For large arrays, the creation of new Date instances for sorting might be a performance consideration.
+      data?.data
+        .sort((channelA, channelB) => new Date(channelB.createdAt).getTime() - new Date(channelA.createdAt).getTime())
+        .map((channelData) => {
+          return {
+            date: new Date(channelData.createdAt),
+            channelId: String(channelData.joystreamChannelId),
+            status: channelData.yppStatus,
+          }
+        }) ?? [],
+    [data?.data]
+  )
+
+  const pages = separateListIntoChunks(yppReferrals, perPage)
+
+  return {
+    currentPage,
+    setCurrentPage,
+    yppReferrals: pages[currentPage] ?? [],
+    totalCount: yppReferrals.length,
+    isLoading,
+    setPerPage,
+    perPage,
+  }
+}
diff --git 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) => {
       <AmmTransactionsTable
         symbol={token.symbol ?? 'N/A'}
         loading={loading}
-        data={data?.ammCurves[0].transactions ?? []}
+        data={marketTransactions}
+        pagination={{ page: currentPage, setPerPage, totalCount, itemsPerPage: perPage, onChangePage: setCurrentPage }}
       />
     </>
   )
diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardReferralsTab/YppDashboardReferralsTab.tsx
@@ -1,41 +1,20 @@
-import { useMemo } from 'react'
-import { useQuery } from 'react-query'
-
-import { axiosInstance } from '@/api/axios'
 import { SvgActionLinkUrl } from '@/assets/icons'
 import { EmptyFallback } from '@/components/EmptyFallback'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
-import { YppReferral, YppReferralTable } from '@/components/YppReferralTable/YppReferralTable'
+import { YppReferralTable } from '@/components/YppReferralTable/YppReferralTable'
 import { ReferralLinkButton } from '@/components/_ypp/ReferralLinkButton'
 import { YppSuspendedBanner } from '@/components/_ypp/YppSuspendedBanner'
 import { atlasConfig } from '@/config'
-import { useUser } from '@/providers/user/user.hooks'
-import { YppSyncedChannel } from '@/views/global/YppLandingView/YppLandingView.types'
+import { useYppReferralPagination } from '@/hooks/useYppReferralPagination'
 
 import { FallbackContainer } from '../YppDashboardTabs.styles'
 
-const YPP_SYNC_URL = atlasConfig.features.ypp.youtubeSyncApiUrl
+const TILES_PER_PAGE = 10
 
 export const YppDashboardReferralsTab = () => {
   const yppSuspended = atlasConfig.features.ypp.suspended
-  const { channelId } = useUser()
-  const { isLoading, data } = useQuery(
-    ['referralsTable', channelId],
-    () => axiosInstance.get<YppSyncedChannel[]>(`${YPP_SYNC_URL}/channels/${channelId}/referrals`),
-    { enabled: !!channelId }
-  )
-
-  const mappedData: YppReferral[] = useMemo(
-    () =>
-      data?.data.map((channelData) => {
-        return {
-          date: new Date(channelData.createdAt),
-          channelId: String(channelData.joystreamChannelId),
-          status: channelData.yppStatus,
-        }
-      }) ?? [],
-    [data?.data]
-  )
+  const { isLoading, yppReferrals, currentPage, setCurrentPage, perPage, setPerPage, totalCount } =
+    useYppReferralPagination({ initialPageSize: TILES_PER_PAGE })
 
   return (
     <LayoutGrid>
@@ -45,7 +24,7 @@ export const YppDashboardReferralsTab = () => {
         </GridItem>
       )}
       <GridItem colSpan={{ base: 12 }}>
-        {!isLoading && !mappedData?.length ? (
+        {!isLoading && totalCount === 0 ? (
           <FallbackContainer>
             <EmptyFallback
               title="No referred users yet"
@@ -55,7 +34,17 @@ export const YppDashboardReferralsTab = () => {
             />
           </FallbackContainer>
         ) : (
-          <YppReferralTable data={mappedData} isLoading={isLoading} />
+          <YppReferralTable
+            data={yppReferrals}
+            isLoading={isLoading}
+            pagination={{
+              page: currentPage,
+              setPerPage,
+              totalCount,
+              itemsPerPage: perPage,
+              onChangePage: setCurrentPage,
+            }}
+          />
         )}
       </GridItem>
     </LayoutGrid>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"description": "UI for consuming Joystream - a user governed video platform",`
`3`		`- "version": "5.6.0",`
	`3`	`+ "version": "5.6.1",`
`4`	`4`	`"license": "GPL-3.0",`
`5`	`5`	`"workspaces": [`
`6`	`6`	`"packages/*"`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@joystream/atlas",`
`3`	`3`	`"description": "UI for consuming Joystream - a user governed video platform",`
`4`		`- "version": "5.6.0",`
	`4`	`+ "version": "5.6.1",`
`5`	`5`	`"license": "GPL-3.0",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"start": "vite",`