Merge branch 'feat/data/fetch-manifest' into feat/ui/integration

src/components/ManifestFetch/ManifestFetch.css

@@ -0,0 +1,14 @@
+.fetch {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.fetch-inputContainer {
+  flex: 1;
+}
+
+.fetch-input {
+  width: 100%;
+}

src/components/ManifestFetch/ManifestFetch.tsx

@@ -0,0 +1,54 @@
+import { Button, Input } from "@codex-storage/marketplace-ui-components";
+import "./ManifestFetch.css";
+import { ChangeEvent, useState } from "react";
+import { CodexSdk } from "../../sdk/codex";
+import { useQuery } from "@tanstack/react-query";
+import { Promises } from "../../utils/promises";
+
+export function ManifestFetch() {
+  const [cid, setCid] = useState("");
+
+  const { refetch } = useQuery({
+    queryFn: () =>
+      CodexSdk.data()
+        .fetchManifest(cid)
+        .then((s) => {
+          if (s.error === false) {
+            setCid("");
+          }
+          return Promises.rejectOnError(s);
+        }),
+    queryKey: ["cids"],
+
+    // Disable the fetch to make it available on refetch only
+    enabled: false,
+
+    // No need to retry because if the connection to the node
+    // is back again, all the queries will be invalidated.
+    retry: false,
+
+    // The client node should be local, so display the cache value while
+    // making a background request looks good.
+    staleTime: 0,
+
+    refetchOnWindowFocus: false,
+  });
+
+  const onDownload = () => refetch();
+
+  const onCidChange = (e: ChangeEvent<HTMLInputElement>) =>
+    setCid(e.currentTarget.value);
+
+  return (
+    <div className="fetch">
+      <div className="fetch-inputContainer">
+        <Input
+          id="cid"
+          placeholder="CID"
+          inputClassName="fetch-input"
+          onChange={onCidChange}></Input>
+      </div>
+      <Button label="Fetch" onClick={onDownload}></Button>
+    </div>
+  );
+}

src/routes/dashboard.css

@@ -9,6 +9,10 @@
   margin-top: 1rem;
 }
 
+.dashboard-fetch {
+  margin-top: 1rem;
+}
+
 .dashboard-welcome {
   display: flex;
   flex-direction: column;

src/routes/dashboard/index.tsx

@@ -7,6 +7,7 @@ import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceho
 import { ErrorBoundary } from "@sentry/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { Download } from "../../components/Download/Download.tsx";
+import { ManifestFetch } from "../../components/ManifestFetch/ManifestFetch.tsx";
 
 export const Route = createFileRoute("/dashboard/")({
   component: About,
@@ -50,6 +51,18 @@ function About() {
               <Download></Download>
             </Card>
           </ErrorBoundary>
+
+          <ErrorBoundary
+            fallback={({ error }) => (
+              <ErrorPlaceholder
+                error={error}
+                subtitle="Cannot retrieve the data."
+              />
+            )}>
+            <Card title="Fetch a manifest" className="dashboard-fetch">
+              <ManifestFetch></ManifestFetch>
+            </Card>
+          </ErrorBoundary>
         </div>
 
         <ErrorBoundary