refactor: replace manual pagination logic with getAdditionalPages utility for cleaner code and improved maintainability

ErwanDecoster · ErwanDecoster · commit 36f3b035b9c9 · 2025-07-10T17:06:25.000+02:00
diff --git a/src/modules/addresses/address/apps/AddressAppsTable.tsx b/src/modules/addresses/address/apps/AddressAppsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/apps/appsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressAppsQuery } from './addressAppsQuery';
 
 function useAddressAppsData({
@@ -41,19 +42,20 @@ function useAddressAppsData({
   );
 
   const apps = data?.account?.apps ?? [];
-  const hasNextPage = (data?.account?.appsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage = (data?.account?.appsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.appsHasNext?.length),
+    Boolean(data?.account?.appsHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedApps =
     apps.map((app) => ({
       ...app,
       destination: `/app/${app.address}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedApps,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/addresses/address/datasets/AddressDatasetsTable.tsx b/src/modules/addresses/address/datasets/AddressDatasetsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/datasets/datasetsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressDatasetsQuery } from './addressDatasetsQuery';
 
 function useAddressDatasetsData({
@@ -47,19 +48,20 @@ function useAddressDatasetsData({
   );
 
   const datasets = data?.account?.datasets ?? [];
-  const hasNextPage = (data?.account?.datasetsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage = (data?.account?.datasetsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.datasetsHasNext?.length),
+    Boolean(data?.account?.datasetsHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const datasetsDatasets =
     datasets.map((dataset) => ({
       ...dataset,
       destination: `/dataset/${dataset.address}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: datasetsDatasets,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/addresses/address/requests/beneficiaryDeals/AddressBeneficiaryDealsTable.tsx b/src/modules/addresses/address/requests/beneficiaryDeals/AddressBeneficiaryDealsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/deals/dealsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressBeneficiaryDealsQuery } from './addressBeneficiaryDealsQuery';
 
 function useAddressBeneficiaryDealsData({
@@ -48,20 +49,20 @@ function useAddressBeneficiaryDealsData({
   );
 
   const beneficiaryDeals = data?.account?.dealBeneficiary ?? [];
-  const hasNextPage = (data?.account?.dealBeneficiaryHasNext?.length ?? 0) > 0;
-  const hasNextNextPage =
-    (data?.account?.dealBeneficiaryHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.dealBeneficiaryHasNext?.length),
+    Boolean(data?.account?.dealBeneficiaryHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedDeals =
     beneficiaryDeals.map((deal) => ({
       ...deal,
       destination: `/deal/${deal.dealid}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedDeals,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/addresses/address/requests/requestedDeals/AddressRequestedDealsTable.tsx b/src/modules/addresses/address/requests/requestedDeals/AddressRequestedDealsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/deals/dealsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressRequestedDealsQuery } from './addressRequestedDealsQuery';
 
 function useAddressRequestedDealsData({
@@ -47,20 +48,20 @@ function useAddressRequestedDealsData({
   );
 
   const requestedDeals = data?.account?.dealRequester ?? [];
-  const hasNextPage = (data?.account?.dealRequesterHasNext?.length ?? 0) > 0;
-  const hasNextNextPage =
-    (data?.account?.dealRequesterHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.dealRequesterHasNext?.length),
+    Boolean(data?.account?.dealRequesterHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedDeals =
     requestedDeals.map((deal) => ({
       ...deal,
       destination: `/deal/${deal.dealid}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedDeals,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/addresses/address/requests/requestedTasks/AddressRequestedTasksTable.tsx b/src/modules/addresses/address/requests/requestedTasks/AddressRequestedTasksTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/tasks/tasksTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressRequestedTasksQuery } from './addressRequestedTasksQuery';
 
 function useAddressRequestedTasksData({
@@ -47,20 +48,20 @@ function useAddressRequestedTasksData({
   );
 
   const requestedTasks = data?.account?.taskRequester ?? [];
-  const hasNextPage = (data?.account?.taskRequesterHasNext?.length ?? 0) > 0;
-  const hasNextNextPage =
-    (data?.account?.taskRequesterHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.taskRequesterHasNext?.length),
+    Boolean(data?.account?.taskRequesterHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedTasks =
     requestedTasks.map((task) => ({
       ...task,
       destination: `/task/${task.taskid}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedTasks,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/addresses/address/workerpools/AddressWorkerpoolsTable.tsx b/src/modules/addresses/address/workerpools/AddressWorkerpoolsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/workerpools/workerpoolsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressWorkerpoolsQuery } from './addressWorkerpoolsQuery';
 
 function useAddressWorkerpoolsData({
@@ -47,20 +48,20 @@ function useAddressWorkerpoolsData({
   );
 
   const workerpools = data?.account?.workerpools ?? [];
-  const hasNextPage = (data?.account?.workerpoolsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage =
-    (data?.account?.workerpoolsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.workerpoolsHasNext?.length),
+    Boolean(data?.account?.workerpoolsHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedWorkerpools =
     workerpools.map((workerpool) => ({
       ...workerpool,
       destination: `/workerpool/${workerpool.address}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedWorkerpools,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/addresses/address/workers/beneficiaryDeals/addressContributionTable.tsx b/src/modules/addresses/address/workers/beneficiaryDeals/addressContributionTable.tsx
@@ -8,6 +8,7 @@ import { usePageParam } from '@/hooks/usePageParam';
 import { ErrorAlert } from '@/modules/ErrorAlert';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { addressContributionQuery } from './addressContributionQuery';
 import { columns } from './columns';
 
@@ -47,20 +48,20 @@ function useAddressContributionData({
   );
 
   const contributions = data?.account?.contributions ?? [];
-  const hasNextPage = (data?.account?.contributionsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage =
-    (data?.account?.contributionsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.account?.contributionsHasNext?.length),
+    Boolean(data?.account?.contributionsHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedContributions =
     contributions.map((contribution) => ({
       ...contribution,
       destination: `/task/${contribution.task.taskid}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedContributions,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/datasets/dataset/DatasetDealsTable.tsx b/src/modules/datasets/dataset/DatasetDealsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/deals/dealsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { datasetDealsQuery } from './datasetDealsQuery';
 
 function useDatasetDealsData({
@@ -41,19 +42,20 @@ function useDatasetDealsData({
   );
 
   const deals = data?.dataset?.deals ?? [];
-  const hasNextPage = (data?.dataset?.dealsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage = (data?.dataset?.dealsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.dataset?.dealsHasNext?.length),
+    Boolean(data?.dataset?.dealsHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedDeals =
     deals.map((deal) => ({
       ...deal,
       destination: `/deal/${deal.dealid}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedDeals,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/modules/workerpools/workerpool/WorkerpoolDealsTable.tsx b/src/modules/workerpools/workerpool/WorkerpoolDealsTable.tsx
@@ -9,6 +9,7 @@ import { ErrorAlert } from '@/modules/ErrorAlert';
 import { columns } from '@/modules/deals/dealsTable/columns';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 import { workerpoolDealsQuery } from './workerpoolDealsQuery';
 
 function useWorkerpoolDealsData({
@@ -47,19 +48,20 @@ function useWorkerpoolDealsData({
   );
 
   const deals = data?.workerpool?.deals ?? [];
-  const hasNextPage = (data?.workerpool?.dealsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage = (data?.workerpool?.dealsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.workerpool?.dealsHasNext?.length),
+    Boolean(data?.workerpool?.dealsHasNextNext?.length)
+  );
 
-  const formattedDeal =
+  const formattedDeals =
     deals.map((deal) => ({
       ...deal,
       destination: `/deal/${deal.dealid}`,
     })) ?? [];
 
   return {
-    data: formattedDeal,
+    data: formattedDeals,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/routes/$chainSlug/_layout/apps.tsx b/src/routes/$chainSlug/_layout/apps.tsx
@@ -14,6 +14,7 @@ import { columns } from '@/modules/apps/appsTable/columns';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 
 export const Route = createFileRoute('/$chainSlug/_layout/apps')({
   component: AppsRoute,
@@ -43,19 +44,20 @@ function useAppsData(currentPage: number) {
   );
 
   const apps = data?.apps ?? [];
-  const hasNextPage = (data?.appsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage = (data?.appsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.appsHasNext?.length),
+    Boolean(data?.appsHasNextNext?.length)
+  );
 
-  const formattedData =
+  const formattedApps =
     apps.map((app) => ({
       ...app,
       destination: `/app/${app.address}`,
     })) ?? [];
 
   return {
-    data: formattedData,
+    data: formattedApps,
     isLoading,
     isRefetching,
     isError,
diff --git a/src/routes/$chainSlug/_layout/datasets.tsx b/src/routes/$chainSlug/_layout/datasets.tsx
@@ -14,6 +14,7 @@ import { columns } from '@/modules/datasets/datasetsTable/columns';
 import { SearcherBar } from '@/modules/search/SearcherBar';
 import useUserStore from '@/stores/useUser.store';
 import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
+import { getAdditionalPages } from '@/utils/format';
 
 export const Route = createFileRoute('/$chainSlug/_layout/datasets')({
   component: DatasetsRoute,
@@ -43,19 +44,20 @@ function useDatasetsData(currentPage: number) {
   );
 
   const datasets = data?.datasets ?? [];
-  const hasNextPage = (data?.datasetsHasNext?.length ?? 0) > 0;
-  const hasNextNextPage = (data?.datasetsHasNextNext?.length ?? 0) > 0;
   // 0 = only current, 1 = next, 2 = next+1
-  const additionalPages = hasNextPage ? (hasNextNextPage ? 2 : 1) : 0;
+  const additionalPages = getAdditionalPages(
+    Boolean(data?.datasetsHasNext?.length),
+    Boolean(data?.datasetsHasNextNext?.length)
+  );
 
-  const formattedData =
+  const formattedDatasets =
     datasets.map((dataset) => ({
       ...dataset,
       destination: `/dataset/${dataset.address}`,
     })) ?? [];
 
   return {
-    data: formattedData,
+    data: formattedDatasets,
     isLoading,
     isRefetching,
     isError: isError,
diff --git a/src/routes/$chainSlug/_layout/deals.tsx b/src/routes/$chainSlug/_layout/deals.tsx
diff --git a/src/routes/$chainSlug/_layout/tasks.tsx b/src/routes/$chainSlug/_layout/tasks.tsx
diff --git a/src/routes/$chainSlug/_layout/workerpools.tsx b/src/routes/$chainSlug/_layout/workerpools.tsx
diff --git a/src/utils/format.ts b/src/utils/format.ts
