From e7fb81bc704ec8affbc3580b362f4d9ab14d4951 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Fri, 30 Aug 2024 11:57:06 +0200
Subject: [PATCH] Add debug component

---
 src/components/Debug/Debug.tsx                | 28 ++++++++-----------
 .../ErrorBoundary/ErrorBoundary.tsx           |  2 --
 src/routes/dashboard/settings.css             |  4 +++
 src/routes/dashboard/settings.tsx             |  7 +++++
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/Debug/Debug.tsx b/src/components/Debug/Debug.tsx
index d763efe..881e8f7 100644
--- a/src/components/Debug/Debug.tsx
+++ b/src/components/Debug/Debug.tsx
@@ -1,34 +1,30 @@
 import { useQuery } from "@tanstack/react-query";
 import Loader from "../../assets/loader.svg";
 import { CodexSdk } from "../../sdk/codex";
-import { Card } from "@codex/marketplace-ui-components";
+import { Card, Spinner } from "@codex/marketplace-ui-components";
+import { Promises } from "../../utils/promises";
 
 export function Debug() {
   const { data, isPending } = useQuery({
-    queryFn: () => CodexSdk.debug().then((debug) => debug.info()),
+    queryFn: () =>
+      CodexSdk.debug()
+        .then((debug) => debug.info())
+        .then((s) => Promises.rejectOnError(s)),
     queryKey: ["debug"],
   });
 
   if (isPending) {
     return (
-      <Card title="Debug">
-        <img src={Loader} width={24} height={24} alt="Loader" />
-      </Card>
-    );
-  }
-
-  if (data?.error) {
-    // TODO display error
-    return (
-      <Card title="Debug">
-        <p>{data?.data.message || ""}</p>
-      </Card>
+      <div className="settings-debug-loader">
+        <Spinner width="3rem" />
+      </div>
     );
   }
 
   return (
-    <Card title="Debug">
+    <>
+      <h3>Debug</h3>
       <pre>{JSON.stringify(data, null, 2)}</pre>
-    </Card>
+    </>
   );
 }
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
index 0c26772..2a9e71e 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -46,8 +46,6 @@ export class ErrorBoundary extends React.Component<Props, State> {
       );
     }
 
-    console.info("couc");
-
     return this.props.children;
   }
 }
diff --git a/src/routes/dashboard/settings.css b/src/routes/dashboard/settings.css
index 9d36fa4..fd82edf 100644
--- a/src/routes/dashboard/settings.css
+++ b/src/routes/dashboard/settings.css
@@ -16,3 +16,7 @@
 .settings-input {
   margin-bottom: 0.75rem;
 }
+
+.settings-debug-loader {
+  margin: auto;
+}
diff --git a/src/routes/dashboard/settings.tsx b/src/routes/dashboard/settings.tsx
index bd07fa1..27db05c 100644
--- a/src/routes/dashboard/settings.tsx
+++ b/src/routes/dashboard/settings.tsx
@@ -3,6 +3,7 @@ import { ErrorBoundary } from "../../components/ErrorBoundary/ErrorBoundary";
 import "./settings.css";
 import { LogLevel } from "../../components/LogLevel/LogLevel";
 import { CodexUrlSettings } from "../../CodexUrllSettings/CodexUrlSettings";
+import { Debug } from "../../components/Debug/Debug";
 
 export const Route = createFileRoute("/dashboard/settings")({
   component: () => (
@@ -19,6 +20,12 @@ export const Route = createFileRoute("/dashboard/settings")({
         </ErrorBoundary>
       </div>
 
+      <div className="settings">
+        <ErrorBoundary card={true}>
+          <Debug />
+        </ErrorBoundary>
+      </div>
+
       {/* <div className="input-floating">
               <input
                 className="input input-floating-input"