Merge pull request #54 from codex-storage/releases/v0.0.6

Refs/heads/releases/v0.0.6

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/codex-storage/codex-marketplace-ui"
   },
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1 --port 5173",
@@ -24,7 +24,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "^0.0.18",
+    "@codex-storage/marketplace-ui-components": "^0.0.20",
     "@codex-storage/sdk-js": "^0.0.8",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

src/components/CodexUrllSettings/CodexUrlSettings.tsx

@@ -1,4 +1,4 @@
-import { useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { Button, Input, Toast } from "@codex-storage/marketplace-ui-components";
 import { CodexSdk } from "../../sdk/codex";
@@ -7,6 +7,14 @@ export function CodexUrlSettings() {
   const queryClient = useQueryClient();
   const [url, setUrl] = useState(CodexSdk.url);
   const [toast, setToast] = useState({ time: 0, message: "" });
+  const { mutateAsync } = useMutation({
+    mutationFn: (url: string) => CodexSdk.updateURL(url),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["spr"] });
+
+      setToast({ message: "Settings saved successfully.", time: Date.now() });
+    },
+  });
 
   const onChange = (e: React.FormEvent<HTMLInputElement>) => {
     const value = e.currentTarget.value;
@@ -15,12 +23,7 @@ export function CodexUrlSettings() {
     }
   };
 
-  const onClick = () => {
-    CodexSdk.updateURL(url).then(() => {
-      queryClient.invalidateQueries();
-      setToast({ message: "Settigns saved successfully.", time: Date.now() });
-    });
-  };
+  const onClick = () => mutateAsync(url);
 
   return (
     <>

src/components/Debug/Debug.tsx

@@ -1,15 +1,15 @@
 import { useQuery } from "@tanstack/react-query";
 import { CodexSdk } from "../../sdk/codex";
-import { Placeholder, Spinner } from "@codex-storage/marketplace-ui-components";
 import { Promises } from "../../utils/promises";
-import { CircleX } from "lucide-react";
+import { Spinner } from "@codex-storage/marketplace-ui-components";
 
 export function Debug() {
-  const { data, isPending, isError, error } = useQuery({
+  const { data, isPending } = useQuery({
     queryFn: () =>
       CodexSdk.debug()
         .info()
         .then((s) => Promises.rejectOnError(s)),
+
     queryKey: ["debug"],
 
     // No need to retry because if the connection to the node
@@ -36,19 +36,10 @@ export function Debug() {
     );
   }
 
-  if (isError) {
-    return (
-      <Placeholder
-        Icon={<CircleX size={"4em"}></CircleX>}
-        title="Something went wrong"
-        message={error.message}></Placeholder>
-    );
-  }
-
   return (
     <>
       <h3>Debug</h3>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <pre key={Date.now()}>{JSON.stringify(data, null, 2)}</pre>
     </>
   );
 }

src/components/Download/Download.tsx

@@ -5,10 +5,9 @@ import { CodexSdk } from "../../sdk/codex";
 
 export function Download() {
   const [cid, setCid] = useState("");
-  console.info(cid);
   const onDownload = () => {
     const url = CodexSdk.url() + "/api/codex/v1/data/";
-    window.open(url + cid, "_target");
+    window.open(url + cid + "/network", "_target");
   };
 
   const onCidChange = (e: ChangeEvent<HTMLInputElement>) =>

src/components/NodeIndicator/NodeIndicator.tsx

@@ -8,7 +8,6 @@ import {
 import { Promises } from "../../utils/promises";
 
 const report = false;
-export let isCodexOnline: boolean | null = null;
 
 export function NodeIndicator() {
   const queryClient = useQueryClient();
@@ -41,13 +40,16 @@ export function NodeIndicator() {
     gcTime: 0,
   });
 
-  isCodexOnline = !isError && !!data;
+  const isCodexOnline = !isError && !!data;
 
   useEffect(() => {
     queryClient.invalidateQueries({
       type: "active",
       refetchType: "all",
     });
+
+    // Dispatch an event in order to reset Sentry error boundary
+    document.dispatchEvent(new CustomEvent("codexinvalidatequeries"));
   }, [queryClient, isCodexOnline]);
 
   return (

src/components/Peers/PeerCountryCell.tsx

@@ -3,6 +3,7 @@ import { PeerPin } from "./types";
 import { countriesCoordinates } from "./countries";
 import { useQuery } from "@tanstack/react-query";
 import "./PeerCountryCell.css";
+import { useEffect } from "react";
 
 export type Props = {
   address: string;
@@ -24,21 +25,12 @@ export function PeerCountryCell({ address, onPinAdd }: Props) {
 
       return fetch(import.meta.env.VITE_GEO_IP_URL + "/" + ip)
         .then((res) => res.json())
-        .then((json) => {
-          const coordinate = countriesCoordinates.find(
-            (c) => c.iso === json.country
+        .then((json) =>
+          countriesCoordinates.find((c) => c.iso === json.country)
         );
-
-          if (coordinate) {
-            onPinAdd({
-              lat: parseFloat(coordinate.lat),
-              lng: parseFloat(coordinate.lng),
-            });
-          }
-
-          return coordinate;
-        });
     },
+    refetchOnMount: true,
+
     queryKey: [address],
 
     // Enable only when the address exists
@@ -56,6 +48,15 @@ export function PeerCountryCell({ address, onPinAdd }: Props) {
     refetchOnWindowFocus: false,
   });
 
+  useEffect(() => {
+    if (data) {
+      onPinAdd({
+        lat: parseFloat(data.lat),
+        lng: parseFloat(data.lng),
+      });
+    }
+  }, [data]);
+
   return (
     <Cell>
       <div className="peerCountry">

src/routes/dashboard/peers.tsx

@@ -9,6 +9,8 @@ import { useCallback, useState } from "react";
 import { PeerPin } from "../../components/Peers/types";
 import "./peers.css";
 import { CodexSdk } from "../../sdk/codex";
+import { ErrorBoundary } from "@sentry/react";
+import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
 
 // This function accepts the same arguments as DottedMap in the example above.
 const mapJsonString = getMapJSON({ height: 60, grid: "diagonal" });
@@ -102,5 +104,12 @@ const Peers = () => {
 };
 
 export const Route = createFileRoute("/dashboard/peers")({
-  component: Peers,
+  component: () => (
+    <ErrorBoundary
+      fallback={({ error }) => (
+        <ErrorPlaceholder error={error} subtitle="Cannot retrieve the data." />
+      )}>
+      <Peers />
+    </ErrorBoundary>
+  ),
 });

src/routes/dashboard/settings.tsx

@@ -5,6 +5,7 @@ import { Debug } from "../../components/Debug/Debug";
 import { CodexUrlSettings } from "../../components/CodexUrllSettings/CodexUrlSettings";
 import { ErrorBoundary } from "@sentry/react";
 import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder";
+import { useEffect } from "react";
 
 export const Route = createFileRoute("/dashboard/settings")({
   component: () => (
@@ -35,12 +36,25 @@ export const Route = createFileRoute("/dashboard/settings")({
 
       <div className="settings">
         <ErrorBoundary
-          fallback={({ error }) => (
+          fallback={({ error, resetError }) => {
+            useEffect(() => {
+              document.addEventListener("codexinvalidatequeries", resetError);
+
+              return () => {
+                document.removeEventListener(
+                  "codexinvalidatequeries",
+                  resetError
+                );
+              };
+            }, [resetError]);
+
+            return (
               <ErrorPlaceholder
                 error={error}
                 subtitle="Cannot retrieve the data."
               />
-          )}>
+            );
+          }}>
           <Debug />
         </ErrorBoundary>
       </div>