Skip to content

Commit bfb1a4b

Browse files
ErwanDecosterErwanDecoster
committed
feat: implement ErrorAlert component and replace inline error handling in various tables
1 parent 7da605d commit bfb1a4b

File tree

15 files changed

+66
-124
lines changed

15 files changed

+66
-124
lines changed

‎src/modules/ErrorAlert.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Terminal } from 'lucide-react';
2+
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
3+
4+
type ErrorAlertProps = {
5+
message?: string;
6+
className?: string;
7+
};
8+
9+
export function ErrorAlert({
10+
message = 'An unexpected error occurred.',
11+
className = '',
12+
}: ErrorAlertProps) {
13+
return (
14+
<Alert
15+
variant="destructive"
16+
className={`mx-auto w-fit text-left ${className}`}
17+
>
18+
<Terminal className="h-4 w-4" />
19+
<AlertTitle>Error</AlertTitle>
20+
<AlertDescription>{message}</AlertDescription>
21+
</Alert>
22+
);
23+
}

‎src/modules/apps/AppsPreviewTable.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { cn } from '@/lib/utils';
44
import { useQuery } from '@tanstack/react-query';
5-
import { Box, LoaderCircle, Terminal } from 'lucide-react';
5+
import { Box, LoaderCircle } from 'lucide-react';
66
import { ChainLink } from '@/components/ChainLink';
77
import { DataTable } from '@/components/DataTable';
8-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
98
import { Button } from '@/components/ui/button';
109
import useUserStore from '@/stores/useUser.store';
10+
import { ErrorAlert } from '../ErrorAlert';
1111
import { appsQuery } from './appsQuery';
1212
import { columns } from './appsTable/columns';
1313

@@ -47,13 +47,7 @@ export function AppsPreviewTable({ className }: { className?: string }) {
4747
</Button>
4848
</div>
4949
{(apps.isError || apps.errorUpdateCount > 0) && !apps.data ? (
50-
<Alert variant="destructive" className="mx-auto w-fit text-left">
51-
<Terminal className="h-4 w-4" />
52-
<AlertTitle>Error</AlertTitle>
53-
<AlertDescription>
54-
A error occurred during apps loading.
55-
</AlertDescription>
56-
</Alert>
50+
<ErrorAlert message="A error occurred during apps loading." />
5751
) : (
5852
<DataTable
5953
columns={columns}

‎src/modules/datasets/DatasetsPreviewTable.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { cn } from '@/lib/utils';
44
import { useQuery } from '@tanstack/react-query';
5-
import { Box, LoaderCircle, Terminal } from 'lucide-react';
5+
import { Box, LoaderCircle } from 'lucide-react';
66
import { ChainLink } from '@/components/ChainLink';
77
import { DataTable } from '@/components/DataTable';
8-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
98
import { Button } from '@/components/ui/button';
109
import useUserStore from '@/stores/useUser.store';
10+
import { ErrorAlert } from '../ErrorAlert';
1111
import { datasetsQuery } from './datasetsQuery';
1212
import { columns } from './datasetsTable/columns';
1313

@@ -47,13 +47,7 @@ export function DatasetsPreviewTable({ className }: { className?: string }) {
4747
</Button>
4848
</div>
4949
{(datasets.isError || datasets.errorUpdateCount > 0) && !datasets.data ? (
50-
<Alert variant="destructive" className="mx-auto w-fit text-left">
51-
<Terminal className="h-4 w-4" />
52-
<AlertTitle>Error</AlertTitle>
53-
<AlertDescription>
54-
A error occurred during datasets loading.
55-
</AlertDescription>
56-
</Alert>
50+
<ErrorAlert message="A error occurred during datasets loading." />
5751
) : (
5852
<DataTable
5953
columns={columns}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useState } from 'react';
66
import { DataTable } from '@/components/DataTable';
77
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
88
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
9+
import { ErrorAlert } from '@/modules/ErrorAlert';
910
import { columns } from '@/modules/deals/dealsTable/columns';
1011
import useUserStore from '@/stores/useUser.store';
1112
import { datasetDealsQuery } from './datasetDealsQuery';
@@ -94,13 +95,7 @@ export function DatasetDealsTable({
9495
)}
9596
</h2>
9697
{hasPastError && !deals.length ? (
97-
<Alert variant="destructive" className="mx-auto w-fit text-left">
98-
<Terminal className="h-4 w-4" />
99-
<AlertTitle>Error</AlertTitle>
100-
<AlertDescription>
101-
A error occurred during dataset deals loading.
102-
</AlertDescription>
103-
</Alert>
98+
<ErrorAlert message="A error occurred during dataset deals loading." />
10499
) : (
105100
<DataTable
106101
columns={columns}

‎src/modules/deals/DealsPreviewTable.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { cn } from '@/lib/utils';
44
import { useQuery } from '@tanstack/react-query';
5-
import { Box, LoaderCircle, Terminal } from 'lucide-react';
5+
import { Box, LoaderCircle } from 'lucide-react';
66
import { ChainLink } from '@/components/ChainLink';
77
import { DataTable } from '@/components/DataTable';
8-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
98
import { Button } from '@/components/ui/button';
109
import useUserStore from '@/stores/useUser.store';
10+
import { ErrorAlert } from '../ErrorAlert';
1111
import { dealsQuery } from './dealsQuery';
1212
import { columns } from './dealsTable/columns';
1313

@@ -47,13 +47,7 @@ export function DealsPreviewTable({ className }: { className?: string }) {
4747
</Button>
4848
</div>
4949
{(deals.isError || deals.errorUpdateCount > 0) && !deals.data ? (
50-
<Alert variant="destructive" className="mx-auto w-fit text-left">
51-
<Terminal className="h-4 w-4" />
52-
<AlertTitle>Error</AlertTitle>
53-
<AlertDescription>
54-
A error occurred during deals loading.
55-
</AlertDescription>
56-
</Alert>
50+
<ErrorAlert message="An error occurred during deals loading." />
5751
) : (
5852
<DataTable
5953
columns={columns}

‎src/modules/deals/deal/DealTasksTable.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { DETAIL_TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { keepPreviousData, useQuery } from '@tanstack/react-query';
4-
import { Terminal } from 'lucide-react';
54
import { DataTable } from '@/components/DataTable';
6-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
5+
import { ErrorAlert } from '@/modules/ErrorAlert';
76
import useUserStore from '@/stores/useUser.store';
87
import { columns } from './dealTaskColumns';
98
import { dealTasksQuery } from './dealTasksQuery';
@@ -15,7 +14,10 @@ function useDealTasksData({ dealAddress }: { dealAddress: string }) {
1514
{
1615
queryKey: ['deal', 'tasks', dealAddress],
1716
queryFn: () =>
18-
execute(dealTasksQuery, chainId, { length: DETAIL_TABLE_LENGTH, dealAddress }),
17+
execute(dealTasksQuery, chainId, {
18+
length: DETAIL_TABLE_LENGTH,
19+
dealAddress,
20+
}),
1921
refetchInterval: TABLE_REFETCH_INTERVAL,
2022
placeholderData: keepPreviousData,
2123
}
@@ -42,13 +44,7 @@ export function DealTasksTable({ dealAddress }: { dealAddress: string }) {
4244
// TODO: handle loading state
4345

4446
return hasPastError && !tasks.length ? (
45-
<Alert variant="destructive" className="mx-auto w-fit text-left">
46-
<Terminal className="h-4 w-4" />
47-
<AlertTitle>Error</AlertTitle>
48-
<AlertDescription>
49-
An error occurred during deal tasks loading.
50-
</AlertDescription>
51-
</Alert>
47+
<ErrorAlert message="An error occurred during deal tasks loading." />
5248
) : (
5349
<DataTable columns={columns} data={tasks} />
5450
);

‎src/modules/tasks/TasksPreviewTable.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { cn } from '@/lib/utils';
44
import { useQuery } from '@tanstack/react-query';
5-
import { Box, LoaderCircle, Terminal } from 'lucide-react';
5+
import { Box, LoaderCircle } from 'lucide-react';
66
import { ChainLink } from '@/components/ChainLink';
77
import { DataTable } from '@/components/DataTable';
8-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
98
import { Button } from '@/components/ui/button';
109
import useUserStore from '@/stores/useUser.store';
10+
import { ErrorAlert } from '../ErrorAlert';
1111
import { tasksQuery } from './tasksQuery';
1212
import { columns } from './tasksTable/columns';
1313

@@ -47,13 +47,7 @@ export function TasksPreviewTable({ className }: { className?: string }) {
4747
</Button>
4848
</div>
4949
{(tasks.isError || tasks.errorUpdateCount > 0) && !tasks.data ? (
50-
<Alert variant="destructive" className="mx-auto w-fit text-left">
51-
<Terminal className="h-4 w-4" />
52-
<AlertTitle>Error</AlertTitle>
53-
<AlertDescription>
54-
A error occurred during tasks loading.
55-
</AlertDescription>
56-
</Alert>
50+
<ErrorAlert message="An error occurred during tasks loading." />
5751
) : (
5852
<DataTable
5953
columns={columns}

‎src/modules/workerpools/WorkerpoolsPreviewTable.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { PREVIEW_TABLE_LENGTH, PREVIEW_TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { cn } from '@/lib/utils';
44
import { useQuery } from '@tanstack/react-query';
5-
import { Box, LoaderCircle, Terminal } from 'lucide-react';
5+
import { Box, LoaderCircle } from 'lucide-react';
66
import { ChainLink } from '@/components/ChainLink';
77
import { DataTable } from '@/components/DataTable';
8-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
98
import { Button } from '@/components/ui/button';
109
import useUserStore from '@/stores/useUser.store';
10+
import { ErrorAlert } from '../ErrorAlert';
1111
import { workerpoolsQuery } from './workerpoolsQuery';
1212
import { columns } from './workerpoolsTable/columns';
1313

@@ -48,13 +48,7 @@ export function WorkerpoolsPreviewTable({ className }: { className?: string }) {
4848
</div>
4949
{(workerpools.isError || workerpools.errorUpdateCount > 0) &&
5050
!workerpools.data ? (
51-
<Alert variant="destructive" className="mx-auto w-fit text-left">
52-
<Terminal className="h-4 w-4" />
53-
<AlertTitle>Error</AlertTitle>
54-
<AlertDescription>
55-
A error occurred during workerpools loading.
56-
</AlertDescription>
57-
</Alert>
51+
<ErrorAlert message="An error occurred during workerpools loading." />
5852
) : (
5953
<DataTable
6054
columns={columns}

‎src/routes/$chainSlug/_layout/apps.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Box, LoaderCircle } from 'lucide-react';
66
import { useState } from 'react';
77
import { DataTable } from '@/components/DataTable';
88
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
9-
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
9+
import { ErrorAlert } from '@/modules/ErrorAlert';
1010
import { SearcherBar } from '@/modules/SearcherBar';
1111
import { appsQuery } from '@/modules/apps/appsQuery';
1212
import { columns } from '@/modules/apps/appsTable/columns';
@@ -87,13 +87,7 @@ function AppsRoute() {
8787
</h1>
8888

8989
{hasPastError && !data.length ? (
90-
<Alert variant="destructive" className="mx-auto w-fit text-left">
91-
<Terminal className="h-4 w-4" />
92-
<AlertTitle>Error</AlertTitle>
93-
<AlertDescription>
94-
A error occurred during apps loading.
95-
</AlertDescription>
96-
</Alert>
90+
<ErrorAlert message="An error occurred during apps loading." />
9791
) : (
9892
<DataTable
9993
columns={columns}

‎src/routes/$chainSlug/_layout/dataset/$datasetAddress.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { keepPreviousData, useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
5-
import { Box, LoaderCircle, Terminal } from 'lucide-react';
6-
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
5+
import { Box, LoaderCircle } from 'lucide-react';
76
import { DetailsTable } from '@/modules/DetailsTable';
7+
import { ErrorAlert } from '@/modules/ErrorAlert';
88
import { SearcherBar } from '@/modules/SearcherBar';
99
import { DatasetBreadcrumbs } from '@/modules/datasets/dataset/DatasetBreadcrumbs';
1010
import { DatasetDealsTable } from '@/modules/datasets/dataset/DatasetDealsTable';
@@ -74,13 +74,7 @@ function DatasetsRoute() {
7474
<DatasetBreadcrumbs datasetId={datasetAddress} />
7575
<div className="space-y-10">
7676
{hasPastError && !datasetDetails ? (
77-
<Alert variant="destructive" className="mx-auto w-fit text-left">
78-
<Terminal className="h-4 w-4" />
79-
<AlertTitle>Error</AlertTitle>
80-
<AlertDescription>
81-
An error occurred during dataset details loading.
82-
</AlertDescription>
83-
</Alert>
77+
<ErrorAlert message="An error occurred during deal details loading." />
8478
) : (
8579
<DetailsTable details={datasetDetails} zebra={false} />
8680
)}

0 commit comments

Comments
 (0)