Bump dependencies and invalidate query on upload success

package-lock.json

@@ -9,7 +9,7 @@
       "version": "0.0.3",
       "license": "MIT",
       "dependencies": {
-        "@codex-storage/marketplace-ui-components": "0.0.11",
+        "@codex-storage/marketplace-ui-components": "0.0.12",
         "@codex-storage/sdk-js": "0.0.6",
         "@sentry/browser": "^8.32.0",
         "@sentry/react": "^8.31.0",
@@ -342,9 +342,9 @@
       }
     },
     "node_modules/@codex-storage/marketplace-ui-components": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.11.tgz",
-      "integrity": "sha512-io1VVsSIeO3TYTyEvaeeY7eLXQNxBmYixMeWn3NnV3PQNd2VLivobd8oYpwQ6o9vRDGNDJ2ZEdftS4Bwe+eD2w==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@codex-storage/marketplace-ui-components/-/marketplace-ui-components-0.0.12.tgz",
+      "integrity": "sha512-XwyyV8kaS+AEIwqzw2BP28qXww1VlH6aRLQsGOTwyjZJiXJEJXjoYLF+CoQmpU0P9rMwSaHFIJdEZK+t4nY9qg==",
       "dependencies": {
         "lucide-react": "^0.441.0"
       },
@@ -353,7 +353,6 @@
       },
       "peerDependencies": {
         "@codex-storage/sdk-js": "0.0.6",
-        "@tanstack/react-query": "^5.51.24",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       }

package.json

@@ -23,7 +23,7 @@
     "React"
   ],
   "dependencies": {
-    "@codex-storage/marketplace-ui-components": "0.0.11",
+    "@codex-storage/marketplace-ui-components": "0.0.12",
     "@codex-storage/sdk-js": "0.0.6",
     "@sentry/browser": "^8.32.0",
     "@sentry/react": "^8.31.0",

src/components/StorageRequestSetup/StorageRequestFileChooser.tsx

@@ -10,12 +10,14 @@ import {
 } from "@codex-storage/marketplace-ui-components";
 import { useData } from "../../hooks/useData";
 import { StorageRequestComponentProps } from "./types";
+import { useQueryClient } from "@tanstack/react-query";
 
 export function StorageRequestFileChooser({
   storageRequest,
   dispatch,
   onStorageRequestChange,
 }: StorageRequestComponentProps) {
+  const queryClient = useQueryClient();
   const files = useData();
 
   useEffect(() => {
@@ -36,6 +38,7 @@ export function StorageRequestFileChooser({
   };
 
   const onSuccess = (data: string) => {
+    queryClient.invalidateQueries({ queryKey: ["cids"] });
     onStorageRequestChange({ cid: data });
   };
 

src/routes/dashboard/index.tsx

@@ -3,23 +3,21 @@ import { Files } from "../../components/Files/Files.tsx";
 import { Card, Upload } from "@codex-storage/marketplace-ui-components";
 import { CodexSdk } from "../../sdk/codex";
 import { Welcome } from "../../components/Welcome/Welcome.tsx";
-import { FilesStorage } from "../../utils/file-storage";
 import { ErrorPlaceholder } from "../../components/ErrorPlaceholder/ErrorPlaceholder.tsx";
 import { ErrorBoundary } from "@sentry/react";
+import { useQueryClient } from "@tanstack/react-query";
 
 export const Route = createFileRoute("/dashboard/")({
   component: About,
 });
 
-const onSuccess = (cid: string, file: File) => {
-  FilesStorage.set(cid, {
-    name: file.name,
-    mimetype: file.type,
-    uploadedAt: new Date().toJSON(),
-  });
-};
-
 function About() {
+  const queryClient = useQueryClient();
+
+  const onSuccess = () => {
+    queryClient.invalidateQueries({ queryKey: ["cids"] });
+  };
+
   return (
     <>
       <div className="dashboard">
@@ -49,10 +47,12 @@ function About() {
       <div className="container-fluid">
         <ErrorBoundary
           fallback={({ error }) => (
-            <ErrorPlaceholder
-              error={error}
-              subtitle="Cannot retrieve the data."
-            />
+            <Card title="Error">
+              <ErrorPlaceholder
+                error={error}
+                subtitle="Cannot retrieve the data."
+              />
+            </Card>
           )}>
           <Files />
         </ErrorBoundary>