Skip to content

Commit b6cea8a

Browse files
ErwanDecosterErwanDecoster
committed
feat: enhance error handling in apps, datasets, deals, tasks, and workerpools routes with alerts
1 parent ec6a84d commit b6cea8a

File tree

6 files changed

+131
-67
lines changed

6 files changed

+131
-67
lines changed

‎src/graphql/execute.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export async function execute<TResult, TVariables>(
1313
Accept: 'application/graphql-response+json'
1414
},
1515
body: JSON.stringify({
16-
query,
16+
queery,
1717
variables
1818
})
1919
})

‎src/routes/apps.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
5-
import { Box, LoaderCircle } from 'lucide-react';
5+
import { Box, LoaderCircle, Terminal } 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';
910
import { SearcherBar } from '@/modules/SearcherBar';
1011
import { appsQuery } from '@/modules/apps/appsQuery';
1112
import { columns } from '@/modules/apps/appsTable/columns';
@@ -18,11 +19,13 @@ export const Route = createFileRoute('/apps')({
1819
function useAppsData(currentPage: number) {
1920
const skip = currentPage * TABLE_LENGTH;
2021

21-
const { data, isLoading, isRefetching, isError } = useQuery({
22-
queryKey: ['apps', currentPage],
23-
queryFn: () => execute(appsQuery, { length: TABLE_LENGTH, skip }),
24-
refetchInterval: TABLE_REFETCH_INTERVAL,
25-
});
22+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
23+
{
24+
queryKey: ['apps', currentPage],
25+
queryFn: () => execute(appsQuery, { length: TABLE_LENGTH, skip }),
26+
refetchInterval: TABLE_REFETCH_INTERVAL,
27+
}
28+
);
2629

2730
const { data: nextData } = useQuery({
2831
queryKey: ['apps-next', currentPage],
@@ -48,7 +51,7 @@ function useAppsData(currentPage: number) {
4851
data: formattedData,
4952
isLoading,
5053
isRefetching,
51-
isError,
54+
isError: isError || errorUpdateCount > 0,
5255
additionalPages,
5356
};
5457
}
@@ -73,12 +76,22 @@ function AppsRoute() {
7376
{isLoading && isRefetching && <LoaderCircle className="animate-spin" />}
7477
</h1>
7578

76-
<DataTable
77-
columns={columns}
78-
data={data}
79-
tableLength={TABLE_LENGTH}
80-
isLoading={isLoading || isRefetching}
81-
/>
79+
{isError && !data.length ? (
80+
<Alert variant="destructive" className="mx-auto w-fit text-left">
81+
<Terminal className="h-4 w-4" />
82+
<AlertTitle>Error</AlertTitle>
83+
<AlertDescription>
84+
A error occurred during deals loading.
85+
</AlertDescription>
86+
</Alert>
87+
) : (
88+
<DataTable
89+
columns={columns}
90+
data={data}
91+
tableLength={TABLE_LENGTH}
92+
isLoading={isLoading || isRefetching}
93+
/>
94+
)}
8295
<PaginatedNavigation
8396
currentPage={currentPage + 1}
8497
totalPages={currentPage + 1 + additionalPages}

‎src/routes/datasets.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
5-
import { Box, LoaderCircle } from 'lucide-react';
5+
import { Box, LoaderCircle, Terminal } 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';
910
import { SearcherBar } from '@/modules/SearcherBar';
1011
import { datasetsQuery } from '@/modules/datasets/datasetsQuery';
1112
import { columns } from '@/modules/datasets/datasetsTable/columns';
@@ -18,11 +19,13 @@ export const Route = createFileRoute('/datasets')({
1819
function useDatasetsData(currentPage: number) {
1920
const skip = currentPage * TABLE_LENGTH;
2021

21-
const { data, isLoading, isRefetching, isError } = useQuery({
22-
queryKey: ['datasets', currentPage],
23-
queryFn: () => execute(datasetsQuery, { length: TABLE_LENGTH, skip }),
24-
refetchInterval: TABLE_REFETCH_INTERVAL,
25-
});
22+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
23+
{
24+
queryKey: ['datasets', currentPage],
25+
queryFn: () => execute(datasetsQuery, { length: TABLE_LENGTH, skip }),
26+
refetchInterval: TABLE_REFETCH_INTERVAL,
27+
}
28+
);
2629

2730
const { data: nextData } = useQuery({
2831
queryKey: ['datasets-next', currentPage],
@@ -48,7 +51,7 @@ function useDatasetsData(currentPage: number) {
4851
data: formattedData,
4952
isLoading,
5053
isRefetching,
51-
isError,
54+
isError: isError || errorUpdateCount > 0,
5255
additionalPages,
5356
};
5457
}
@@ -75,12 +78,22 @@ function DatasetsRoute() {
7578
)}
7679
</h1>
7780

78-
<DataTable
79-
columns={columns}
80-
data={data}
81-
tableLength={TABLE_LENGTH}
82-
isLoading={isLoading || isRefetching}
83-
/>
81+
{isError && !data.length ? (
82+
<Alert variant="destructive" className="mx-auto w-fit text-left">
83+
<Terminal className="h-4 w-4" />
84+
<AlertTitle>Error</AlertTitle>
85+
<AlertDescription>
86+
A error occurred during deals loading.
87+
</AlertDescription>
88+
</Alert>
89+
) : (
90+
<DataTable
91+
columns={columns}
92+
data={data}
93+
tableLength={TABLE_LENGTH}
94+
isLoading={isLoading || isRefetching}
95+
/>
96+
)}
8497
<PaginatedNavigation
8598
currentPage={currentPage + 1}
8699
totalPages={currentPage + 1 + additionalPages}

‎src/routes/deals.tsx‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
5-
import { Box, LoaderCircle } from 'lucide-react';
5+
import { Box, LoaderCircle, Terminal } from 'lucide-react';
66
import { useState } from 'react';
77
import { DataTable } from '@/components/DataTable';
88
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
9+
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
910
import { SearcherBar } from '@/modules/SearcherBar';
1011
import { dealsQuery } from '@/modules/deals/dealsQuery';
1112
import { columns } from '@/modules/deals/dealsTable/columns';
@@ -18,11 +19,13 @@ export const Route = createFileRoute('/deals')({
1819
function useDealsData(currentPage: number) {
1920
const skip = currentPage * TABLE_LENGTH;
2021

21-
const { data, isLoading, isRefetching, isError } = useQuery({
22-
queryKey: ['deals', currentPage],
23-
queryFn: () => execute(dealsQuery, { length: TABLE_LENGTH, skip }),
24-
refetchInterval: TABLE_REFETCH_INTERVAL,
25-
});
22+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
23+
{
24+
queryKey: ['deals', currentPage],
25+
queryFn: () => execute(dealsQuery, { length: TABLE_LENGTH, skip }),
26+
refetchInterval: TABLE_REFETCH_INTERVAL,
27+
}
28+
);
2629

2730
const { data: nextData } = useQuery({
2831
queryKey: ['deals-next', currentPage],
@@ -48,7 +51,7 @@ function useDealsData(currentPage: number) {
4851
data: formattedData,
4952
isLoading,
5053
isRefetching,
51-
isError,
54+
isError: isError || errorUpdateCount > 0,
5255
additionalPages,
5356
};
5457
}
@@ -74,13 +77,22 @@ function DealsRoute() {
7477
<LoaderCircle className="animate-spin" />
7578
)}
7679
</h1>
77-
78-
<DataTable
79-
columns={columns}
80-
data={data}
81-
tableLength={TABLE_LENGTH}
82-
isLoading={isLoading || isRefetching}
83-
/>
80+
{isError && !data.length ? (
81+
<Alert variant="destructive" className="mx-auto w-fit text-left">
82+
<Terminal className="h-4 w-4" />
83+
<AlertTitle>Error</AlertTitle>
84+
<AlertDescription>
85+
A error occurred during deals loading.
86+
</AlertDescription>
87+
</Alert>
88+
) : (
89+
<DataTable
90+
columns={columns}
91+
data={data}
92+
tableLength={TABLE_LENGTH}
93+
isLoading={isLoading || isRefetching}
94+
/>
95+
)}
8496
<PaginatedNavigation
8597
currentPage={currentPage + 1}
8698
totalPages={currentPage + 1 + additionalPages}

‎src/routes/tasks.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
5-
import { Box, LoaderCircle } from 'lucide-react';
5+
import { Box, LoaderCircle, Terminal } from 'lucide-react';
66
import { useState } from 'react';
77
import { DataTable } from '@/components/DataTable';
88
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
9+
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
910
import { SearcherBar } from '@/modules/SearcherBar';
1011
import { nextTasksQuery } from '@/modules/tasks/nextTasksQuery';
1112
import { tasksQuery } from '@/modules/tasks/tasksQuery';
@@ -18,11 +19,13 @@ export const Route = createFileRoute('/tasks')({
1819
function useTasksData(currentPage: number) {
1920
const skip = currentPage * TABLE_LENGTH;
2021

21-
const { data, isLoading, isRefetching, isError } = useQuery({
22-
queryKey: ['tasks', currentPage],
23-
queryFn: () => execute(tasksQuery, { length: TABLE_LENGTH, skip }),
24-
refetchInterval: TABLE_REFETCH_INTERVAL,
25-
});
22+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
23+
{
24+
queryKey: ['tasks', currentPage],
25+
queryFn: () => execute(tasksQuery, { length: TABLE_LENGTH, skip }),
26+
refetchInterval: TABLE_REFETCH_INTERVAL,
27+
}
28+
);
2629

2730
const { data: nextData } = useQuery({
2831
queryKey: ['tasks-next', currentPage],
@@ -48,7 +51,7 @@ function useTasksData(currentPage: number) {
4851
data: formattedData,
4952
isLoading,
5053
isRefetching,
51-
isError,
54+
isError: isError || errorUpdateCount > 0,
5255
additionalPages,
5356
};
5457
}
@@ -75,12 +78,22 @@ function TasksRoute() {
7578
)}
7679
</h1>
7780

78-
<DataTable
79-
columns={columns}
80-
data={data}
81-
tableLength={TABLE_LENGTH}
82-
isLoading={isLoading || isRefetching}
83-
/>
81+
{isError && !data.length ? (
82+
<Alert variant="destructive" className="mx-auto w-fit text-left">
83+
<Terminal className="h-4 w-4" />
84+
<AlertTitle>Error</AlertTitle>
85+
<AlertDescription>
86+
A error occurred during deals loading.
87+
</AlertDescription>
88+
</Alert>
89+
) : (
90+
<DataTable
91+
columns={columns}
92+
data={data}
93+
tableLength={TABLE_LENGTH}
94+
isLoading={isLoading || isRefetching}
95+
/>
96+
)}
8497
<PaginatedNavigation
8598
currentPage={currentPage + 1}
8699
totalPages={currentPage + 1 + additionalPages}

‎src/routes/workerpools.tsx‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@ import { TABLE_LENGTH, TABLE_REFETCH_INTERVAL } from '@/config';
22
import { execute } from '@/graphql/execute';
33
import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
5-
import { Box, LoaderCircle } from 'lucide-react';
5+
import { Box, LoaderCircle, Terminal } 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';
910
import { SearcherBar } from '@/modules/SearcherBar';
1011
import { nextWorkerpoolsQuery } from '@/modules/workerpools/nextWorkerpoolsQuery';
1112
import { workerpoolsQuery } from '@/modules/workerpools/workerpoolsQuery';
@@ -18,11 +19,13 @@ export const Route = createFileRoute('/workerpools')({
1819
function useWorkerpoolsData(currentPage: number) {
1920
const skip = currentPage * TABLE_LENGTH;
2021

21-
const { data, isLoading, isRefetching, isError } = useQuery({
22-
queryKey: ['workerpools', currentPage],
23-
queryFn: () => execute(workerpoolsQuery, { length: TABLE_LENGTH, skip }),
24-
refetchInterval: TABLE_REFETCH_INTERVAL,
25-
});
22+
const { data, isLoading, isRefetching, isError, errorUpdateCount } = useQuery(
23+
{
24+
queryKey: ['workerpools', currentPage],
25+
queryFn: () => execute(workerpoolsQuery, { length: TABLE_LENGTH, skip }),
26+
refetchInterval: TABLE_REFETCH_INTERVAL,
27+
}
28+
);
2629

2730
const { data: nextData } = useQuery({
2831
queryKey: ['workerpools-next', currentPage],
@@ -48,7 +51,7 @@ function useWorkerpoolsData(currentPage: number) {
4851
data: formattedData,
4952
isLoading,
5053
isRefetching,
51-
isError,
54+
isError: isError || errorUpdateCount > 0,
5255
additionalPages,
5356
};
5457
}
@@ -75,12 +78,22 @@ function WorkerpoolsRoute() {
7578
)}
7679
</h1>
7780

78-
<DataTable
79-
columns={columns}
80-
data={data}
81-
tableLength={TABLE_LENGTH}
82-
isLoading={isLoading || isRefetching}
83-
/>
81+
{isError && !data.length ? (
82+
<Alert variant="destructive" className="mx-auto w-fit text-left">
83+
<Terminal className="h-4 w-4" />
84+
<AlertTitle>Error</AlertTitle>
85+
<AlertDescription>
86+
A error occurred during deals loading.
87+
</AlertDescription>
88+
</Alert>
89+
) : (
90+
<DataTable
91+
columns={columns}
92+
data={data}
93+
tableLength={TABLE_LENGTH}
94+
isLoading={isLoading || isRefetching}
95+
/>
96+
)}
8497
<PaginatedNavigation
8598
currentPage={currentPage + 1}
8699
totalPages={currentPage + 1 + additionalPages}

0 commit comments

Comments
 (0)