Skip to content

Commit 6332132

Browse files
ErwanDecosterErwanDecoster
committed
feat: update access data fetching logic to support pagination and total count for apps, datasets, and workerpools
1 parent 4efb46f commit 6332132

File tree

3 files changed

+57
-30
lines changed

3 files changed

+57
-30
lines changed

‎src/modules/apps/app/AppAccessTable.tsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,43 @@ function useAppAccessData({
1919
}) {
2020
const { chainId } = useUserStore();
2121

22+
const pageSize = DETAIL_TABLE_LENGTH * 2;
23+
24+
// API returns min 10 items, but we display only 5 per page
25+
const apiBatch = Math.floor((currentPage * DETAIL_TABLE_LENGTH) / pageSize);
26+
const startIndexInBatch = (currentPage * DETAIL_TABLE_LENGTH) % pageSize;
27+
2228
const queryKey = [chainId, 'app', 'access', appAddress, currentPage];
2329
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
2430
{
2531
queryKey,
2632
queryFn: async () => {
2733
const iexec = await getIExec();
2834

29-
const { count, orders } =
30-
await iexec.orderbook.fetchAppOrderbook(appAddress);
35+
const { count, orders } = await iexec.orderbook.fetchAppOrderbook({
36+
app: appAddress,
37+
page: apiBatch,
38+
pageSize,
39+
});
3140
return { count, orders };
3241
},
3342
refetchInterval: TABLE_REFETCH_INTERVAL,
3443
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
3544
}
3645
);
37-
38-
const access = data?.orders || [];
46+
const allOrders = data?.orders || [];
47+
const access = allOrders.slice(
48+
startIndexInBatch,
49+
startIndexInBatch + DETAIL_TABLE_LENGTH
50+
);
3951
const count = data?.count || 0;
40-
const hasNextPage = count > DETAIL_TABLE_LENGTH;
41-
const additionalPages = hasNextPage
42-
? Math.ceil(count / DETAIL_TABLE_LENGTH) - 1
43-
: 0;
4452

4553
return {
4654
data: access,
55+
totalCount: count,
4756
isLoading,
4857
isRefetching,
4958
isError,
50-
additionalPages,
5159
hasPastError: isError || errorUpdateCount > 0,
5260
};
5361
}
@@ -64,10 +72,10 @@ export function AppAccessTable({
6472
const [currentPage, setCurrentPage] = usePageParam('appAccessPage');
6573
const {
6674
data: access,
75+
totalCount,
6776
isError,
6877
isLoading,
6978
isRefetching,
70-
additionalPages,
7179
hasPastError,
7280
} = useAppAccessData({ appAddress, currentPage: currentPage - 1 });
7381

@@ -93,7 +101,7 @@ export function AppAccessTable({
93101
)}
94102
<PaginatedNavigation
95103
currentPage={currentPage}
96-
totalPages={currentPage + additionalPages}
104+
totalPages={Math.ceil(totalCount / DETAIL_TABLE_LENGTH)}
97105
onPageChange={setCurrentPage}
98106
/>
99107
</div>

‎src/modules/datasets/dataset/DatasetAccessTable.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,35 +19,44 @@ function useDatasetAccessData({
1919
}) {
2020
const { chainId } = useUserStore();
2121

22+
const pageSize = DETAIL_TABLE_LENGTH * 2;
23+
24+
// API returns min 10 items, but we display only 8 per page
25+
const apiBatch = Math.floor((currentPage * DETAIL_TABLE_LENGTH) / pageSize);
26+
const startIndexInBatch = (currentPage * DETAIL_TABLE_LENGTH) % pageSize;
27+
2228
const queryKey = [chainId, 'dataset', 'access', datasetAddress, currentPage];
2329
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
2430
{
2531
queryKey,
2632
queryFn: async () => {
2733
const iexec = await getIExec();
2834

29-
const { count, orders } =
30-
await iexec.orderbook.fetchDatasetOrderbook(datasetAddress);
35+
const { count, orders } = await iexec.orderbook.fetchDatasetOrderbook({
36+
dataset: datasetAddress,
37+
page: apiBatch,
38+
pageSize,
39+
});
3140
return { count, orders };
3241
},
3342
refetchInterval: TABLE_REFETCH_INTERVAL,
3443
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
3544
}
3645
);
3746

38-
const access = data?.orders || [];
47+
const allOrders = data?.orders || [];
48+
const access = allOrders.slice(
49+
startIndexInBatch,
50+
startIndexInBatch + DETAIL_TABLE_LENGTH
51+
);
3952
const count = data?.count || 0;
40-
const hasNextPage = count > DETAIL_TABLE_LENGTH;
41-
const additionalPages = hasNextPage
42-
? Math.ceil(count / DETAIL_TABLE_LENGTH) - 1
43-
: 0;
4453

4554
return {
4655
data: access,
56+
totalCount: count,
4757
isLoading,
4858
isRefetching,
4959
isError,
50-
additionalPages,
5160
hasPastError: isError || errorUpdateCount > 0,
5261
};
5362
}
@@ -64,10 +73,10 @@ export function DatasetAccessTable({
6473
const [currentPage, setCurrentPage] = usePageParam('datasetAccessPage');
6574
const {
6675
data: access,
76+
totalCount,
6777
isError,
6878
isLoading,
6979
isRefetching,
70-
additionalPages,
7180
hasPastError,
7281
} = useDatasetAccessData({ datasetAddress, currentPage: currentPage - 1 });
7382

@@ -93,7 +102,7 @@ export function DatasetAccessTable({
93102
)}
94103
<PaginatedNavigation
95104
currentPage={currentPage}
96-
totalPages={currentPage + additionalPages}
105+
totalPages={Math.ceil(totalCount / DETAIL_TABLE_LENGTH)}
97106
onPageChange={setCurrentPage}
98107
/>
99108
</div>

‎src/modules/workerpools/workerpool/WorkerpoolAccessTable.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ function useWorkerpoolAccessData({
1919
}) {
2020
const { chainId } = useUserStore();
2121

22+
const pageSize = DETAIL_TABLE_LENGTH * 2;
23+
24+
// API returns min 10 items, but we display only 5 per page
25+
const apiBatch = Math.floor((currentPage * DETAIL_TABLE_LENGTH) / pageSize);
26+
const startIndexInBatch = (currentPage * DETAIL_TABLE_LENGTH) % pageSize;
27+
2228
const queryKey = [
2329
chainId,
2430
'workerpool',
@@ -33,7 +39,11 @@ function useWorkerpoolAccessData({
3339
const iexec = await getIExec();
3440

3541
const { count, orders } =
36-
await iexec.orderbook.fetchWorkerpoolOrderbook();
42+
await iexec.orderbook.fetchWorkerpoolOrderbook({
43+
workerpool: workerpoolAddress,
44+
page: apiBatch,
45+
pageSize,
46+
});
3747

3848
return { count, orders };
3949
},
@@ -42,19 +52,19 @@ function useWorkerpoolAccessData({
4252
}
4353
);
4454

45-
const access = data?.orders || [];
55+
const allOrders = data?.orders || [];
56+
const access = allOrders.slice(
57+
startIndexInBatch,
58+
startIndexInBatch + DETAIL_TABLE_LENGTH
59+
);
4660
const count = data?.count || 0;
47-
const hasNextPage = count > DETAIL_TABLE_LENGTH;
48-
const additionalPages = hasNextPage
49-
? Math.ceil(count / DETAIL_TABLE_LENGTH) - 1
50-
: 0;
5161

5262
return {
5363
data: access,
64+
totalCount: count,
5465
isLoading,
5566
isRefetching,
5667
isError,
57-
additionalPages,
5868
hasPastError: isError || errorUpdateCount > 0,
5969
};
6070
}
@@ -71,10 +81,10 @@ export function WorkerpoolAccessTable({
7181
const [currentPage, setCurrentPage] = usePageParam('workerpoolAccessPage');
7282
const {
7383
data: access,
84+
totalCount,
7485
isError,
7586
isLoading,
7687
isRefetching,
77-
additionalPages,
7888
hasPastError,
7989
} = useWorkerpoolAccessData({
8090
workerpoolAddress,
@@ -103,7 +113,7 @@ export function WorkerpoolAccessTable({
103113
)}
104114
<PaginatedNavigation
105115
currentPage={currentPage}
106-
totalPages={currentPage + additionalPages}
116+
totalPages={Math.ceil(totalCount / DETAIL_TABLE_LENGTH)}
107117
onPageChange={setCurrentPage}
108118
/>
109119
</div>

0 commit comments

Comments
 (0)