Skip to content

Commit 999d308

Browse files
ErwanDecosterErwanDecoster
committed
Merge branch 'main' into feature/upgrade-access-feature
2 parents 108ab36 + e48fb62 commit 999d308

File tree

7 files changed

+672
-8
lines changed

7 files changed

+672
-8
lines changed

‎src/modules/addresses/address/access/AddressAppsAccessTable.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
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 useAddressAppsAccessData({
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 = [chainId, 'address', 'appsAccess', addressAddress, apiBatch];
29+
30+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
31+
{
32+
queryKey,
33+
queryFn: async () => {
34+
const iexec = await getIExec();
35+
36+
const { count, orders } = await iexec.orderbook.fetchAppOrderbook({
37+
dataset: 'any',
38+
app: 'any',
39+
workerpool: 'any',
40+
requester: addressAddress,
41+
page: apiBatch,
42+
pageSize,
43+
});
44+
45+
return { count, orders };
46+
},
47+
refetchInterval: TABLE_REFETCH_INTERVAL,
48+
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
49+
}
50+
);
51+
52+
const allOrders = data?.orders || [];
53+
const access = allOrders.slice(
54+
startIndexInBatch,
55+
startIndexInBatch + PREVIEW_TABLE_LENGTH
56+
);
57+
const formattedAccess =
58+
access.map((access) => ({
59+
...access,
60+
destination: `/app/${access.order.app.toLowerCase()}`,
61+
})) ?? [];
62+
const count = data?.count || 0;
63+
64+
return {
65+
data: formattedAccess,
66+
totalCount: count,
67+
isLoading,
68+
isRefetching,
69+
isError,
70+
hasPastError: isError || errorUpdateCount > 0,
71+
};
72+
}
73+
74+
export function AddressAppsAccessTable({
75+
addressAddress,
76+
}: {
77+
addressAddress: string;
78+
}) {
79+
const [currentPage, setCurrentPage] = usePageParam('addressAppsAccessPage');
80+
const {
81+
data: access,
82+
totalCount,
83+
isError,
84+
isLoading,
85+
isRefetching,
86+
hasPastError,
87+
} = useAddressAppsAccessData({
88+
addressAddress,
89+
currentPage: currentPage - 1,
90+
});
91+
92+
return (
93+
<div className="space-y-6">
94+
<h2 className="flex items-center gap-2 font-extrabold">
95+
Latest apps access
96+
{!access && isError && (
97+
<span className="text-muted-foreground text-sm font-light">
98+
(outdated)
99+
</span>
100+
)}
101+
{(isLoading || isRefetching) && (
102+
<LoaderCircle className="animate-spin" />
103+
)}
104+
</h2>
105+
{hasPastError && !access.length ? (
106+
<ErrorAlert message="An error occurred during address apps access loading." />
107+
) : (
108+
<DataTable
109+
columns={columns}
110+
data={access}
111+
tableLength={PREVIEW_TABLE_LENGTH}
112+
/>
113+
)}
114+
<PaginatedNavigation
115+
currentPage={currentPage}
116+
totalPages={Math.ceil(totalCount / PREVIEW_TABLE_LENGTH)}
117+
onPageChange={setCurrentPage}
118+
/>
119+
</div>
120+
);
121+
}

‎src/modules/addresses/address/access/AddressDatasetsAccessTable.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 useAddressDatasetsAccessData({
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+
'datasetsAccess',
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: addressAddress,
47+
// datasetOwner: 'any',
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 AddressDatasetsAccessTable({
82+
addressAddress,
83+
}: {
84+
addressAddress: string;
85+
}) {
86+
const [currentPage, setCurrentPage] = usePageParam(
87+
'addressDatasetsAccessPage'
88+
);
89+
const {
90+
data: access,
91+
totalCount,
92+
isError,
93+
isLoading,
94+
isRefetching,
95+
hasPastError,
96+
} = useAddressDatasetsAccessData({
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/access/AddressWorkerpoolsAccessTable.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 './addressWorkerpoolColumns';
12+
13+
function useAddressWorkerpoolsAccessData({
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+
'workerpoolsAccess',
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: 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: `/workerpool/${access.order.workerpool.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 AddressWorkerpoolsAccessTable({
82+
addressAddress,
83+
}: {
84+
addressAddress: string;
85+
}) {
86+
const [currentPage, setCurrentPage] = usePageParam(
87+
'addressWorkerpoolsAccessPage'
88+
);
89+
const {
90+
data: access,
91+
totalCount,
92+
isError,
93+
isLoading,
94+
isRefetching,
95+
hasPastError,
96+
} = useAddressWorkerpoolsAccessData({
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 workerpools 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 workerpools 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+
}

0 commit comments

Comments
 (0)