Skip to content

Commit 0e57f85

Browse files
ErwanDecosterErwanDecoster
committed
feat: update access routes and components for apps, datasets, and workerpools
1 parent ff4152b commit 0e57f85

File tree

12 files changed

+392
-8
lines changed

12 files changed

+392
-8
lines changed

‎src/modules/addresses/address/grantedAccess/AddressAppsGrantedAccessTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function useAddressAppsGrantedAccessData({
6464
const formattedAccess =
6565
access.map((access) => ({
6666
...access,
67-
destination: `/access/${access.orderHash.toLowerCase()}`,
67+
destination: `/access/app/${access.orderHash.toLowerCase()}`,
6868
})) ?? [];
6969
const count = data?.count || 0;
7070

‎src/modules/addresses/address/grantedAccess/AddressDatasetsGrantedAccessTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function useAddressDatasetsGrantedAccessData({
6464
const formattedAccess =
6565
access.map((access) => ({
6666
...access,
67-
destination: `/access/${access.orderHash.toLowerCase()}`,
67+
destination: `/access/dataset/${access.orderHash.toLowerCase()}`,
6868
})) ?? [];
6969
const count = data?.count || 0;
7070

‎src/modules/addresses/address/grantedAccess/AddressWorkerpoolsGrantedAccessTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function useAddressWorkerpoolsGrantedAccessData({
6565
const formattedAccess =
6666
access.map((access) => ({
6767
...access,
68-
destination: `/access/${access.orderHash.toLowerCase()}`,
68+
destination: `/access/workerpool/${access.orderHash.toLowerCase()}`,
6969
})) ?? [];
7070
const count = data?.count || 0;
7171

‎src/modules/addresses/address/receivedAccess/AddressAppsReceivedAccessTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function useAddressAppsReceivedAccessData({
6363
const formattedAccess =
6464
access.map((access) => ({
6565
...access,
66-
destination: `/access/${access.orderHash.toLowerCase()}`,
66+
destination: `/access/app/${access.orderHash.toLowerCase()}`,
6767
})) ?? [];
6868
const count = data?.count || 0;
6969

‎src/modules/addresses/address/receivedAccess/AddressDatasetsReceivedAccessTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function useAddressDatasetsReceivedAccessData({
6363
const formattedAccess =
6464
access.map((access) => ({
6565
...access,
66-
destination: `/access/${access.orderHash.toLowerCase()}`,
66+
destination: `/access/dataset/${access.orderHash.toLowerCase()}`,
6767
})) ?? [];
6868
const count = data?.count || 0;
6969

‎src/modules/addresses/address/receivedAccess/AddressWorkerpoolsReceivedAccessTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function useAddressWorkerpoolsReceivedAccessData({
6464
const formattedAccess =
6565
access.map((access) => ({
6666
...access,
67-
destination: `/access/${access.orderHash.toLowerCase()}`,
67+
destination: `/access/workerpool/${access.orderHash.toLowerCase()}`,
6868
})) ?? [];
6969
const count = data?.count || 0;
7070

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ function useAppAccessData({
5454
const formattedAccess =
5555
access.map((access) => ({
5656
...access,
57-
destination: `/access/${access.orderHash?.toLowerCase?.()}`,
57+
destination: `/access/app/${access.orderHash?.toLowerCase?.()}`,
5858
})) ?? [];
5959
const count = data?.count || 0;
6060

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function useWorkerpoolAccessData({
6363
const formattedAccess =
6464
access.map((access) => ({
6565
...access,
66-
destination: `/access/${access.orderHash?.toLowerCase?.()}`,
66+
destination: `/access/workerpool/${access.orderHash?.toLowerCase?.()}`,
6767
})) ?? [];
6868
const count = data?.count || 0;
6969

‎src/routeTree.gen.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@ import { Route as ChainSlugLayoutDatasetDatasetAddressRouteImport } from './rout
3131
import { Route as ChainSlugLayoutAppAppAddressRouteImport } from './routes/$chainSlug/_layout/app/$appAddress'
3232
import { Route as ChainSlugLayoutAddressAddressAddressRouteImport } from './routes/$chainSlug/_layout/address/$addressAddress'
3333
import { Route as ChainSlugLayoutAccessAccessHashRouteImport } from './routes/$chainSlug/_layout/access/$accessHash'
34+
import { Route as ChainSlugLayoutAccessWorkerpoolAccessHashRouteImport } from './routes/$chainSlug/_layout/access/workerpool/$accessHash'
35+
import { Route as ChainSlugLayoutAccessDatasetAccessHashRouteImport } from './routes/$chainSlug/_layout/access/dataset/$accessHash'
36+
import { Route as ChainSlugLayoutAccessAppAccessHashRouteImport } from './routes/$chainSlug/_layout/access/app/$accessHash'
3437

3538
const ChainSlugRouteImport = createFileRoute('/$chainSlug')()
3639

@@ -147,6 +150,24 @@ const ChainSlugLayoutAccessAccessHashRoute =
147150
path: '/access/$accessHash',
148151
getParentRoute: () => ChainSlugLayoutRoute,
149152
} as any)
153+
const ChainSlugLayoutAccessWorkerpoolAccessHashRoute =
154+
ChainSlugLayoutAccessWorkerpoolAccessHashRouteImport.update({
155+
id: '/access/workerpool/$accessHash',
156+
path: '/access/workerpool/$accessHash',
157+
getParentRoute: () => ChainSlugLayoutRoute,
158+
} as any)
159+
const ChainSlugLayoutAccessDatasetAccessHashRoute =
160+
ChainSlugLayoutAccessDatasetAccessHashRouteImport.update({
161+
id: '/access/dataset/$accessHash',
162+
path: '/access/dataset/$accessHash',
163+
getParentRoute: () => ChainSlugLayoutRoute,
164+
} as any)
165+
const ChainSlugLayoutAccessAppAccessHashRoute =
166+
ChainSlugLayoutAccessAppAccessHashRouteImport.update({
167+
id: '/access/app/$accessHash',
168+
path: '/access/app/$accessHash',
169+
getParentRoute: () => ChainSlugLayoutRoute,
170+
} as any)
150171

151172
export interface FileRoutesByFullPath {
152173
'/': typeof IndexRoute
@@ -169,6 +190,9 @@ export interface FileRoutesByFullPath {
169190
'/$chainSlug/task/$taskId': typeof ChainSlugLayoutTaskTaskIdRoute
170191
'/$chainSlug/tx/$txHash': typeof ChainSlugLayoutTxTxHashRoute
171192
'/$chainSlug/workerpool/$workerpoolAddress': typeof ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute
193+
'/$chainSlug/access/app/$accessHash': typeof ChainSlugLayoutAccessAppAccessHashRoute
194+
'/$chainSlug/access/dataset/$accessHash': typeof ChainSlugLayoutAccessDatasetAccessHashRoute
195+
'/$chainSlug/access/workerpool/$accessHash': typeof ChainSlugLayoutAccessWorkerpoolAccessHashRoute
172196
}
173197
export interface FileRoutesByTo {
174198
'/': typeof IndexRoute
@@ -190,6 +214,9 @@ export interface FileRoutesByTo {
190214
'/$chainSlug/task/$taskId': typeof ChainSlugLayoutTaskTaskIdRoute
191215
'/$chainSlug/tx/$txHash': typeof ChainSlugLayoutTxTxHashRoute
192216
'/$chainSlug/workerpool/$workerpoolAddress': typeof ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute
217+
'/$chainSlug/access/app/$accessHash': typeof ChainSlugLayoutAccessAppAccessHashRoute
218+
'/$chainSlug/access/dataset/$accessHash': typeof ChainSlugLayoutAccessDatasetAccessHashRoute
219+
'/$chainSlug/access/workerpool/$accessHash': typeof ChainSlugLayoutAccessWorkerpoolAccessHashRoute
193220
}
194221
export interface FileRoutesById {
195222
__root__: typeof rootRouteImport
@@ -214,6 +241,9 @@ export interface FileRoutesById {
214241
'/$chainSlug/_layout/task/$taskId': typeof ChainSlugLayoutTaskTaskIdRoute
215242
'/$chainSlug/_layout/tx/$txHash': typeof ChainSlugLayoutTxTxHashRoute
216243
'/$chainSlug/_layout/workerpool/$workerpoolAddress': typeof ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute
244+
'/$chainSlug/_layout/access/app/$accessHash': typeof ChainSlugLayoutAccessAppAccessHashRoute
245+
'/$chainSlug/_layout/access/dataset/$accessHash': typeof ChainSlugLayoutAccessDatasetAccessHashRoute
246+
'/$chainSlug/_layout/access/workerpool/$accessHash': typeof ChainSlugLayoutAccessWorkerpoolAccessHashRoute
217247
}
218248
export interface FileRouteTypes {
219249
fileRoutesByFullPath: FileRoutesByFullPath
@@ -238,6 +268,9 @@ export interface FileRouteTypes {
238268
| '/$chainSlug/task/$taskId'
239269
| '/$chainSlug/tx/$txHash'
240270
| '/$chainSlug/workerpool/$workerpoolAddress'
271+
| '/$chainSlug/access/app/$accessHash'
272+
| '/$chainSlug/access/dataset/$accessHash'
273+
| '/$chainSlug/access/workerpool/$accessHash'
241274
fileRoutesByTo: FileRoutesByTo
242275
to:
243276
| '/'
@@ -259,6 +292,9 @@ export interface FileRouteTypes {
259292
| '/$chainSlug/task/$taskId'
260293
| '/$chainSlug/tx/$txHash'
261294
| '/$chainSlug/workerpool/$workerpoolAddress'
295+
| '/$chainSlug/access/app/$accessHash'
296+
| '/$chainSlug/access/dataset/$accessHash'
297+
| '/$chainSlug/access/workerpool/$accessHash'
262298
id:
263299
| '__root__'
264300
| '/'
@@ -282,6 +318,9 @@ export interface FileRouteTypes {
282318
| '/$chainSlug/_layout/task/$taskId'
283319
| '/$chainSlug/_layout/tx/$txHash'
284320
| '/$chainSlug/_layout/workerpool/$workerpoolAddress'
321+
| '/$chainSlug/_layout/access/app/$accessHash'
322+
| '/$chainSlug/_layout/access/dataset/$accessHash'
323+
| '/$chainSlug/_layout/access/workerpool/$accessHash'
285324
fileRoutesById: FileRoutesById
286325
}
287326
export interface RootRouteChildren {
@@ -438,6 +477,27 @@ declare module '@tanstack/react-router' {
438477
preLoaderRoute: typeof ChainSlugLayoutAccessAccessHashRouteImport
439478
parentRoute: typeof ChainSlugLayoutRoute
440479
}
480+
'/$chainSlug/_layout/access/workerpool/$accessHash': {
481+
id: '/$chainSlug/_layout/access/workerpool/$accessHash'
482+
path: '/access/workerpool/$accessHash'
483+
fullPath: '/$chainSlug/access/workerpool/$accessHash'
484+
preLoaderRoute: typeof ChainSlugLayoutAccessWorkerpoolAccessHashRouteImport
485+
parentRoute: typeof ChainSlugLayoutRoute
486+
}
487+
'/$chainSlug/_layout/access/dataset/$accessHash': {
488+
id: '/$chainSlug/_layout/access/dataset/$accessHash'
489+
path: '/access/dataset/$accessHash'
490+
fullPath: '/$chainSlug/access/dataset/$accessHash'
491+
preLoaderRoute: typeof ChainSlugLayoutAccessDatasetAccessHashRouteImport
492+
parentRoute: typeof ChainSlugLayoutRoute
493+
}
494+
'/$chainSlug/_layout/access/app/$accessHash': {
495+
id: '/$chainSlug/_layout/access/app/$accessHash'
496+
path: '/access/app/$accessHash'
497+
fullPath: '/$chainSlug/access/app/$accessHash'
498+
preLoaderRoute: typeof ChainSlugLayoutAccessAppAccessHashRouteImport
499+
parentRoute: typeof ChainSlugLayoutRoute
500+
}
441501
}
442502
}
443503

@@ -460,6 +520,9 @@ interface ChainSlugLayoutRouteChildren {
460520
ChainSlugLayoutTaskTaskIdRoute: typeof ChainSlugLayoutTaskTaskIdRoute
461521
ChainSlugLayoutTxTxHashRoute: typeof ChainSlugLayoutTxTxHashRoute
462522
ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute: typeof ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute
523+
ChainSlugLayoutAccessAppAccessHashRoute: typeof ChainSlugLayoutAccessAppAccessHashRoute
524+
ChainSlugLayoutAccessDatasetAccessHashRoute: typeof ChainSlugLayoutAccessDatasetAccessHashRoute
525+
ChainSlugLayoutAccessWorkerpoolAccessHashRoute: typeof ChainSlugLayoutAccessWorkerpoolAccessHashRoute
463526
}
464527

465528
const ChainSlugLayoutRouteChildren: ChainSlugLayoutRouteChildren = {
@@ -484,6 +547,12 @@ const ChainSlugLayoutRouteChildren: ChainSlugLayoutRouteChildren = {
484547
ChainSlugLayoutTxTxHashRoute: ChainSlugLayoutTxTxHashRoute,
485548
ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute:
486549
ChainSlugLayoutWorkerpoolWorkerpoolAddressRoute,
550+
ChainSlugLayoutAccessAppAccessHashRoute:
551+
ChainSlugLayoutAccessAppAccessHashRoute,
552+
ChainSlugLayoutAccessDatasetAccessHashRoute:
553+
ChainSlugLayoutAccessDatasetAccessHashRoute,
554+
ChainSlugLayoutAccessWorkerpoolAccessHashRoute:
555+
ChainSlugLayoutAccessWorkerpoolAccessHashRoute,
487556
}
488557

489558
const ChainSlugLayoutRouteWithChildren = ChainSlugLayoutRoute._addFileChildren(

‎src/routes/$chainSlug/_layout/access/app/$accessHash.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import { useQuery } from '@tanstack/react-query';
2+
import { createFileRoute } from '@tanstack/react-router';
3+
import { LoaderCircle } from 'lucide-react';
4+
import AccessIcon from '@/components/icons/AccessIcon';
5+
import { BackButton } from '@/components/ui/BackButton';
6+
import { getIExec } from '@/externals/iexecSdkClient';
7+
import { DetailsTable } from '@/modules/DetailsTable';
8+
import { ErrorAlert } from '@/modules/ErrorAlert';
9+
import { AccessBreadcrumbs } from '@/modules/access/access/AccessBreadcrumbs';
10+
import { buildAccessDetails } from '@/modules/access/access/buildAccessDetails';
11+
import { SearcherBar } from '@/modules/search/SearcherBar';
12+
import useUserStore from '@/stores/useUser.store';
13+
import { NotFoundError } from '@/utils/NotFoundError';
14+
import { isValidId } from '@/utils/addressOrIdCheck';
15+
import { createPlaceholderDataFnForQueryKey } from '@/utils/createPlaceholderDataFnForQueryKey';
16+
17+
export const Route = createFileRoute(
18+
'/$chainSlug/_layout/access/app/$accessHash'
19+
)({
20+
component: AppAccessRoute,
21+
});
22+
23+
function useAccessData(accessHash: string, chainId: number) {
24+
const isValid = isValidId(accessHash);
25+
const queryKey = [chainId, 'access', 'App', accessHash];
26+
const { data, isLoading, isRefetching, isError, error, errorUpdateCount } =
27+
useQuery({
28+
queryKey,
29+
enabled: !!chainId && isValid,
30+
queryFn: async () => {
31+
const iexec = await getIExec();
32+
const access = await iexec.orderbook.fetchApporder(accessHash);
33+
return { access };
34+
},
35+
placeholderData: createPlaceholderDataFnForQueryKey(queryKey),
36+
});
37+
38+
return {
39+
data: data?.access,
40+
accessType: 'App' as const,
41+
isLoading,
42+
isRefetching,
43+
isError,
44+
error,
45+
hasPastError: isError || errorUpdateCount > 0,
46+
isValid,
47+
};
48+
}
49+
50+
function AppAccessRoute() {
51+
const { chainId } = useUserStore();
52+
const { accessHash } = Route.useParams();
53+
const {
54+
data: access,
55+
accessType,
56+
isLoading,
57+
isRefetching,
58+
isError,
59+
hasPastError,
60+
isValid,
61+
error,
62+
} = useAccessData((accessHash as string).toLowerCase(), chainId!);
63+
64+
const accessDetails = access ? buildAccessDetails({ access }) : undefined;
65+
66+
if (!isValid) {
67+
return <ErrorAlert className="my-16" message="Invalid access address." />;
68+
}
69+
70+
if (isError && error instanceof NotFoundError) {
71+
return <ErrorAlert className="my-16" message="Access not found." />;
72+
}
73+
74+
return (
75+
<div className="mt-8 flex flex-col gap-6">
76+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
77+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
78+
<div className="space-y-2">
79+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
80+
<AccessIcon size={24} />
81+
{accessType} access details
82+
{!access && isError && (
83+
<span className="text-muted-foreground text-sm font-light">
84+
(outdated)
85+
</span>
86+
)}
87+
{(isLoading || isRefetching) && (
88+
<LoaderCircle className="animate-spin" />
89+
)}
90+
</h1>
91+
<div className="flex items-center gap-2">
92+
<BackButton />
93+
<AccessBreadcrumbs accessHash={accessHash} />
94+
</div>
95+
</div>
96+
</div>
97+
98+
{hasPastError && !accessDetails ? (
99+
<ErrorAlert message="An error occurred during access details loading." />
100+
) : (
101+
<DetailsTable details={accessDetails || {}} />
102+
)}
103+
</div>
104+
);
105+
}

0 commit comments

Comments
 (0)