From 6a91435fede0fe040cc416d063a084bbc670545f Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Mon, 30 Sep 2024 12:55:45 +0200
Subject: [PATCH] Move up the error to the error boundary

---
 src/hooks/useData.tsx                   |  3 ++
 src/routes/dashboard/availabilities.tsx |  6 ++++
 src/routes/dashboard/purchases.tsx      | 38 ++++++++++++++-----------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/hooks/useData.tsx b/src/hooks/useData.tsx
index d2bca5c..bc95da1 100644
--- a/src/hooks/useData.tsx
+++ b/src/hooks/useData.tsx
@@ -22,6 +22,9 @@ export function useData() {
 
       // Don't expect something new when coming back to the UI
       refetchOnWindowFocus: false,
+
+      // Throw the error to the error boundary
+      throwOnError: true,
     });
 
   return data.content;
diff --git a/src/routes/dashboard/availabilities.tsx b/src/routes/dashboard/availabilities.tsx
index 66d87c1..b22ac83 100644
--- a/src/routes/dashboard/availabilities.tsx
+++ b/src/routes/dashboard/availabilities.tsx
@@ -39,6 +39,9 @@ export function Availabilities() {
       // Refreshing when focus returns can be useful if a user comes back
       // to the UI after performing an operation in the terminal.
       refetchOnWindowFocus: true,
+
+      // Throw the error to the error boundary
+      throwOnError: true,
     });
 
     // Error will be catched in ErrorBounday
@@ -59,6 +62,9 @@ export function Availabilities() {
       // Refreshing when focus returns can be useful if a user comes back
       // to the UI after performing an operation in the terminal.
       refetchOnWindowFocus: true,
+
+      // Throw the error to the error boundary
+      throwOnError: true,
     });
 
     // const allocation = availabilities
diff --git a/src/routes/dashboard/purchases.tsx b/src/routes/dashboard/purchases.tsx
index 858e9fa..8e2d2b8 100644
--- a/src/routes/dashboard/purchases.tsx
+++ b/src/routes/dashboard/purchases.tsx
@@ -13,7 +13,7 @@ import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceho
 import { ErrorBoundary } from "@sentry/react";
 
 const Purchases = () => {
-  const { data, isPending } = useQuery({
+  const { data, isPending, error } = useQuery({
     queryFn: () =>
       CodexSdk.marketplace.purchases().then((s) => Promises.rejectOnError(s)),
     queryKey: ["purchases"],
@@ -29,6 +29,11 @@ const Purchases = () => {
     // Refreshing when focus returns can be useful if a user comes back
     // to the UI after performing an operation in the terminal.
     refetchOnWindowFocus: true,
+
+    initialData: [],
+
+    // Throw the error to the error boundary
+    throwOnError: true,
   });
 
   if (isPending) {
@@ -49,23 +54,22 @@ const Purchases = () => {
     "state",
   ];
 
-  const cells =
-    (data ?? []).map((p, index) => {
-      const r = p.request;
-      const ask = p.request.ask;
-      const duration = parseInt(p.request.ask.duration, 10);
-      const pf = parseInt(p.request.ask.proofProbability, 10);
+  const cells = data.map((p, index) => {
+    const r = p.request;
+    const ask = p.request.ask;
+    const duration = parseInt(p.request.ask.duration, 10);
+    const pf = parseInt(p.request.ask.proofProbability, 10);
 
-      return [
-        <FileCell requestId={r.id} purchaseCid={r.content.cid} index={index} />,
-        <TruncateCell value={r.id} />,
-        <Cell value={Times.pretty(duration)} />,
-        <Cell value={ask.slots.toString()} />,
-        <Cell value={ask.reward + " CDX"} />,
-        <Cell value={pf.toString()} />,
-        <CustomStateCellRender state={p.state} message={p.error} />,
-      ];
-    }) || [];
+    return [
+      <FileCell requestId={r.id} purchaseCid={r.content.cid} index={index} />,
+      <TruncateCell value={r.id} />,
+      <Cell value={Times.pretty(duration)} />,
+      <Cell value={ask.slots.toString()} />,
+      <Cell value={ask.reward + " CDX"} />,
+      <Cell value={pf.toString()} />,
+      <CustomStateCellRender state={p.state} message={p.error} />,
+    ];
+  });
 
   return (
     <div className="container">