diff --git a/src/components/ManifestFetch/ManifestFetch.css b/src/components/ManifestFetch/ManifestFetch.css new file mode 100644 index 0000000..18c8832 --- /dev/null +++ b/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%; +} diff --git a/src/components/ManifestFetch/ManifestFetch.tsx b/src/components/ManifestFetch/ManifestFetch.tsx new file mode 100644 index 0000000..054081b --- /dev/null +++ b/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) => + setCid(e.currentTarget.value); + + return ( +
+
+ +
+ +
+ ); +} diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css index b43ee4a..98eea6f 100644 --- a/src/routes/dashboard.css +++ b/src/routes/dashboard.css @@ -9,6 +9,10 @@ margin-top: 1rem; } +.dashboard-fetch { + margin-top: 1rem; +} + .dashboard-welcome { display: flex; flex-direction: column; diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 931438f..c644acc 100644 --- a/src/routes/dashboard/index.tsx +++ b/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() { + + ( + + )}> + + + +