Skip to content

Commit b15e315

Browse files
ErwanDecosterErwanDecoster
committed
feat: add access to tables for apps, datasets, and workerpools to address layout
1 parent 38a483c commit b15e315

File tree

7 files changed

+663
-0
lines changed

7 files changed

+663
-0
lines changed

‎src/modules/addresses/address/accessTo/AddressAppsAccessToTable.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
2+
import { useQuery } from '@tanstack/react-query';
3+
import { LoaderCircle } from 'lucide-react';
4+
import { DataTable } from '@/components/DataTable';
5+
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
6+
import { getIExec } from '@/externals/iexecSdkClient';
7+
import { usePageParam } from '@/hooks/usePageParam';
8+
import { ErrorAlert } from '@/modules/ErrorAlert';
9+
import useUserStore from '@/stores/useUser.store';
10+
import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
11+
import { columns } from './addressAppColumns';
12+
13+
function useAddressAppsAccessToData({
14+
addressAddress,
15+
currentPage,
16+
}: {
17+
addressAddress: string;
18+
currentPage: number;
19+
}) {
20+
const { chainId } = useUserStore();
21+
22+
const pageSize = PREVIEW_TABLE_LENGTH * 2;
23+
24+
// API returns min 10 items, but we display only 5 per page
25+
const apiBatch = Math.floor((currentPage * PREVIEW_TABLE_LENGTH) / pageSize);
26+
const startIndexInBatch = (currentPage * PREVIEW_TABLE_LENGTH) % pageSize;
27+
28+
const queryKey = [
29+
chainId,
30+
'address',
31+
'appsAccessTo',
32+
addressAddress,
33+
apiBatch,
34+
];
35+
36+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
37+
{
38+
queryKey,
39+
queryFn: async () => {
40+
const iexec = await getIExec();
41+
42+
const { count, orders } = await iexec.orderbook.fetchAppOrderbook({
43+
dataset: 'any',
44+
app: 'any',
45+
workerpool: 'any',
46+
requester: 'any',
47+
appOwner: addressAddress,
48+
page: apiBatch,
49+
pageSize,
50+
});
51+
52+
return { count, orders };
53+
},
54+
refetchInterval: TABLE_REFETCH_INTERVAL,
55+
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
56+
}
57+
);
58+
59+
const allOrders = data?.orders || [];
60+
const access = allOrders.slice(
61+
startIndexInBatch,
62+
startIndexInBatch + PREVIEW_TABLE_LENGTH
63+
);
64+
const formattedAccess =
65+
access.map((access) => ({
66+
...access,
67+
destination: `/app/${access.order.app.toLowerCase()}`,
68+
})) ?? [];
69+
const count = data?.count || 0;
70+
71+
return {
72+
data: formattedAccess,
73+
totalCount: count,
74+
isLoading,
75+
isRefetching,
76+
isError,
77+
hasPastError: isError || errorUpdateCount > 0,
78+
};
79+
}
80+
81+
export function AddressAppsAccessToTable({
82+
addressAddress,
83+
}: {
84+
addressAddress: string;
85+
}) {
86+
const [currentPage, setCurrentPage] = usePageParam('addressAppsAccessPage');
87+
const {
88+
data: access,
89+
totalCount,
90+
isError,
91+
isLoading,
92+
isRefetching,
93+
hasPastError,
94+
} = useAddressAppsAccessToData({
95+
addressAddress,
96+
currentPage: currentPage - 1,
97+
});
98+
99+
return (
100+
<div className="space-y-6">
101+
<h2 className="flex items-center gap-2 font-extrabold">
102+
Latest apps access
103+
{!access && isError && (
104+
<span className="text-muted-foreground text-sm font-light">
105+
(outdated)
106+
</span>
107+
)}
108+
{(isLoading || isRefetching) && (
109+
<LoaderCircle className="animate-spin" />
110+
)}
111+
</h2>
112+
{hasPastError && !access.length ? (
113+
<ErrorAlert message="An error occurred during address apps access loading." />
114+
) : (
115+
<DataTable
116+
columns={columns}
117+
data={access}
118+
tableLength={PREVIEW_TABLE_LENGTH}
119+
/>
120+
)}
121+
<PaginatedNavigation
122+
currentPage={currentPage}
123+
totalPages={Math.ceil(totalCount / PREVIEW_TABLE_LENGTH)}
124+
onPageChange={setCurrentPage}
125+
/>
126+
</div>
127+
);
128+
}

‎src/modules/addresses/address/accessTo/AddressDatasetsAccessToTable.tsx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
2+
import { useQuery } from '@tanstack/react-query';
3+
import { LoaderCircle } from 'lucide-react';
4+
import { DataTable } from '@/components/DataTable';
5+
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
6+
import { getIExec } from '@/externals/iexecSdkClient';
7+
import { usePageParam } from '@/hooks/usePageParam';
8+
import { ErrorAlert } from '@/modules/ErrorAlert';
9+
import useUserStore from '@/stores/useUser.store';
10+
import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
11+
import { columns } from './addressDatasetColumns';
12+
13+
function useAddressDatasetsAccessToData({
14+
addressAddress,
15+
currentPage,
16+
}: {
17+
addressAddress: string;
18+
currentPage: number;
19+
}) {
20+
const { chainId } = useUserStore();
21+
22+
const pageSize = PREVIEW_TABLE_LENGTH * 2;
23+
24+
// API returns min 10 items, but we display only 5 per page
25+
const apiBatch = Math.floor((currentPage * PREVIEW_TABLE_LENGTH) / pageSize);
26+
const startIndexInBatch = (currentPage * PREVIEW_TABLE_LENGTH) % pageSize;
27+
28+
const queryKey = [
29+
chainId,
30+
'address',
31+
'datasetsAccessTo',
32+
addressAddress,
33+
apiBatch,
34+
];
35+
36+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
37+
{
38+
queryKey,
39+
queryFn: async () => {
40+
const iexec = await getIExec();
41+
42+
const { count, orders } = await iexec.orderbook.fetchDatasetOrderbook({
43+
dataset: 'any',
44+
app: 'any',
45+
workerpool: 'any',
46+
requester: 'any',
47+
datasetOwner: addressAddress,
48+
page: apiBatch,
49+
pageSize,
50+
});
51+
52+
return { count, orders };
53+
},
54+
refetchInterval: TABLE_REFETCH_INTERVAL,
55+
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
56+
}
57+
);
58+
59+
const allOrders = data?.orders || [];
60+
const access = allOrders.slice(
61+
startIndexInBatch,
62+
startIndexInBatch + PREVIEW_TABLE_LENGTH
63+
);
64+
const formattedAccess =
65+
access.map((access) => ({
66+
...access,
67+
destination: `/dataset/${access.order.dataset.toLowerCase()}`,
68+
})) ?? [];
69+
const count = data?.count || 0;
70+
71+
return {
72+
data: formattedAccess,
73+
totalCount: count,
74+
isLoading,
75+
isRefetching,
76+
isError,
77+
hasPastError: isError || errorUpdateCount > 0,
78+
};
79+
}
80+
81+
export function AddressDatasetsAccessToTable({
82+
addressAddress,
83+
}: {
84+
addressAddress: string;
85+
}) {
86+
const [currentPage, setCurrentPage] = usePageParam(
87+
'addressDatasetsAccessToPage'
88+
);
89+
const {
90+
data: access,
91+
totalCount,
92+
isError,
93+
isLoading,
94+
isRefetching,
95+
hasPastError,
96+
} = useAddressDatasetsAccessToData({
97+
addressAddress,
98+
currentPage: currentPage - 1,
99+
});
100+
101+
return (
102+
<div className="space-y-6">
103+
<h2 className="flex items-center gap-2 font-extrabold">
104+
Latest datasets access
105+
{!access && isError && (
106+
<span className="text-muted-foreground text-sm font-light">
107+
(outdated)
108+
</span>
109+
)}
110+
{(isLoading || isRefetching) && (
111+
<LoaderCircle className="animate-spin" />
112+
)}
113+
</h2>
114+
{hasPastError && !access.length ? (
115+
<ErrorAlert message="An error occurred during address datasets access loading." />
116+
) : (
117+
<DataTable
118+
columns={columns}
119+
data={access}
120+
tableLength={PREVIEW_TABLE_LENGTH}
121+
/>
122+
)}
123+
<PaginatedNavigation
124+
currentPage={currentPage}
125+
totalPages={Math.ceil(totalCount / PREVIEW_TABLE_LENGTH)}
126+
onPageChange={setCurrentPage}
127+
/>
128+
</div>
129+
);
130+
}

‎src/modules/addresses/address/accessTo/AddressWorkerpoolsAccessToTable.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import { PREVIEW_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
2+
import { useQuery } from '@tanstack/react-query';
3+
import { LoaderCircle } from 'lucide-react';
4+
import { DataTable } from '@/components/DataTable';
5+
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
6+
import { getIExec } from '@/externals/iexecSdkClient';
7+
import { usePageParam } from '@/hooks/usePageParam';
8+
import { ErrorAlert } from '@/modules/ErrorAlert';
9+
import useUserStore from '@/stores/useUser.store';
10+
import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
11+
import { columns } from './addressWorkerpoolColumns';
12+
13+
function useAddressWorkerpoolsAccessToData({
14+
addressAddress,
15+
currentPage,
16+
}: {
17+
addressAddress: string;
18+
currentPage: number;
19+
}) {
20+
const { chainId } = useUserStore();
21+
22+
const pageSize = PREVIEW_TABLE_LENGTH * 2;
23+
24+
// API returns min 10 items, but we display only 5 per page
25+
const apiBatch = Math.floor((currentPage * PREVIEW_TABLE_LENGTH) / pageSize);
26+
const startIndexInBatch = (currentPage * PREVIEW_TABLE_LENGTH) % pageSize;
27+
28+
const queryKey = [
29+
chainId,
30+
'address',
31+
'workerpoolsAccessTo',
32+
addressAddress,
33+
apiBatch,
34+
];
35+
36+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
37+
{
38+
queryKey,
39+
queryFn: async () => {
40+
const iexec = await getIExec();
41+
42+
const { count, orders } =
43+
await iexec.orderbook.fetchWorkerpoolOrderbook({
44+
dataset: 'any',
45+
app: 'any',
46+
workerpool: 'any',
47+
requester: 'any',
48+
workerpoolOwner: addressAddress,
49+
page: apiBatch,
50+
pageSize,
51+
});
52+
53+
return { count, orders };
54+
},
55+
refetchInterval: TABLE_REFETCH_INTERVAL,
56+
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
57+
}
58+
);
59+
60+
const allOrders = data?.orders || [];
61+
const access = allOrders.slice(
62+
startIndexInBatch,
63+
startIndexInBatch + PREVIEW_TABLE_LENGTH
64+
);
65+
const formattedAccess =
66+
access.map((access) => ({
67+
...access,
68+
destination: `/workerpool/${access.order.workerpool.toLowerCase()}`,
69+
})) ?? [];
70+
const count = data?.count || 0;
71+
72+
return {
73+
data: formattedAccess,
74+
totalCount: count,
75+
isLoading,
76+
isRefetching,
77+
isError,
78+
hasPastError: isError || errorUpdateCount > 0,
79+
};
80+
}
81+
82+
export function AddressWorkerpoolsAccessToTable({
83+
addressAddress,
84+
}: {
85+
addressAddress: string;
86+
}) {
87+
const [currentPage, setCurrentPage] = usePageParam(
88+
'addressWorkerpoolsAccessToPage'
89+
);
90+
const {
91+
data: access,
92+
totalCount,
93+
isError,
94+
isLoading,
95+
isRefetching,
96+
hasPastError,
97+
} = useAddressWorkerpoolsAccessToData({
98+
addressAddress,
99+
currentPage: currentPage - 1,
100+
});
101+
102+
return (
103+
<div className="space-y-6">
104+
<h2 className="flex items-center gap-2 font-extrabold">
105+
Latest workerpools access
106+
{!access && isError && (
107+
<span className="text-muted-foreground text-sm font-light">
108+
(outdated)
109+
</span>
110+
)}
111+
{(isLoading || isRefetching) && (
112+
<LoaderCircle className="animate-spin" />
113+
)}
114+
</h2>
115+
{hasPastError && !access.length ? (
116+
<ErrorAlert message="An error occurred during address workerpools access loading." />
117+
) : (
118+
<DataTable
119+
columns={columns}
120+
data={access}
121+
tableLength={PREVIEW_TABLE_LENGTH}
122+
/>
123+
)}
124+
<PaginatedNavigation
125+
currentPage={currentPage}
126+
totalPages={Math.ceil(totalCount / PREVIEW_TABLE_LENGTH)}
127+
onPageChange={setCurrentPage}
128+
/>
129+
</div>
130+
);
131+
}

0 commit comments

Comments
 (0)