feat: improve error handling in apps, datasets, deals, tasks, and workerpools routes with hasPastError flag

Author: ErwanDecoster

src/routes/apps.tsx

@@ -51,15 +51,22 @@ function useAppsData(currentPage: number) {
     data: formattedData,
     isLoading,
     isRefetching,
-    isError: isError || errorUpdateCount > 0,
+    isError,
+    hasPastError: isError || errorUpdateCount > 0,
     additionalPages,
   };
 }
 
 function AppsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isLoading, isRefetching, isError, additionalPages } =
-    useAppsData(currentPage);
+  const {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError,
+    additionalPages,
+  } = useAppsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -76,12 +83,12 @@ function AppsRoute() {
         {isLoading && isRefetching && <LoaderCircle className="animate-spin" />}
       </h1>
 
-      {isError && !data.length ? (
+      {hasPastError && !data.length ? (
         <Alert variant="destructive" className="mx-auto w-fit text-left">
           <Terminal className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>
           <AlertDescription>
-            A error occurred during deals loading.
+            A error occurred during apps loading.
           </AlertDescription>
         </Alert>
       ) : (

src/routes/datasets.tsx

@@ -51,15 +51,22 @@ function useDatasetsData(currentPage: number) {
     data: formattedData,
     isLoading,
     isRefetching,
-    isError: isError || errorUpdateCount > 0,
+    isError: isError,
+    hasPastError: isError || errorUpdateCount > 0,
     additionalPages,
   };
 }
 
 function DatasetsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isLoading, isRefetching, isError, additionalPages } =
-    useDatasetsData(currentPage);
+  const {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError,
+    additionalPages,
+  } = useDatasetsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -78,12 +85,12 @@ function DatasetsRoute() {
         )}
       </h1>
 
-      {isError && !data.length ? (
+      {hasPastError && !data.length ? (
         <Alert variant="destructive" className="mx-auto w-fit text-left">
           <Terminal className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>
           <AlertDescription>
-            A error occurred during deals loading.
+            A error occurred during datasets loading.
           </AlertDescription>
         </Alert>
       ) : (

src/routes/deals.tsx

@@ -51,15 +51,22 @@ function useDealsData(currentPage: number) {
     data: formattedData,
     isLoading,
     isRefetching,
-    isError: isError || errorUpdateCount > 0,
+    isError: isError,
+    hasPastError: isError || errorUpdateCount > 0,
     additionalPages,
   };
 }
 
 function DealsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isLoading, isRefetching, isError, additionalPages } =
-    useDealsData(currentPage);
+  const {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError,
+    additionalPages,
+  } = useDealsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -77,7 +84,7 @@ function DealsRoute() {
           <LoaderCircle className="animate-spin" />
         )}
       </h1>
-      {isError && !data.length ? (
+      {hasPastError && !data.length ? (
         <Alert variant="destructive" className="mx-auto w-fit text-left">
           <Terminal className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>

src/routes/tasks.tsx

@@ -51,15 +51,22 @@ function useTasksData(currentPage: number) {
     data: formattedData,
     isLoading,
     isRefetching,
-    isError: isError || errorUpdateCount > 0,
+    isError: isError,
+    hasPastError: isError || errorUpdateCount > 0,
     additionalPages,
   };
 }
 
 function TasksRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isLoading, isRefetching, isError, additionalPages } =
-    useTasksData(currentPage);
+  const {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError,
+    additionalPages,
+  } = useTasksData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -78,12 +85,12 @@ function TasksRoute() {
         )}
       </h1>
 
-      {isError && !data.length ? (
+      {hasPastError && !data.length ? (
         <Alert variant="destructive" className="mx-auto w-fit text-left">
           <Terminal className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>
           <AlertDescription>
-            A error occurred during deals loading.
+            A error occurred during tasks loading.
           </AlertDescription>
         </Alert>
       ) : (

src/routes/workerpools.tsx

@@ -51,15 +51,22 @@ function useWorkerpoolsData(currentPage: number) {
     data: formattedData,
     isLoading,
     isRefetching,
-    isError: isError || errorUpdateCount > 0,
+    isError: isError,
+    hasPastError: isError || errorUpdateCount > 0,
     additionalPages,
   };
 }
 
 function WorkerpoolsRoute() {
   const [currentPage, setCurrentPage] = useState(0);
-  const { data, isLoading, isRefetching, isError, additionalPages } =
-    useWorkerpoolsData(currentPage);
+  const {
+    data,
+    isLoading,
+    isRefetching,
+    isError,
+    hasPastError,
+    additionalPages,
+  } = useWorkerpoolsData(currentPage);
 
   return (
     <div className="mt-8 grid gap-6">
@@ -78,12 +85,12 @@ function WorkerpoolsRoute() {
         )}
       </h1>
 
-      {isError && !data.length ? (
+      {hasPastError && !data.length ? (
         <Alert variant="destructive" className="mx-auto w-fit text-left">
           <Terminal className="h-4 w-4" />
           <AlertTitle>Error</AlertTitle>
           <AlertDescription>
-            A error occurred during deals loading.
+            A error occurred during workerpool loading.
           </AlertDescription>
         </Alert>
       ) : (