Update Upload component to not rely on react query and fix error showing

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@codex-storage/marketplace-ui-components",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@codex-storage/marketplace-ui-components",
-      "version": "0.0.11",
+      "version": "0.0.12",
       "license": "MIT",
       "dependencies": {
         "lucide-react": "^0.441.0"
@@ -21,7 +21,6 @@
         "@storybook/react": "^8.2.9",
         "@storybook/react-vite": "^8.2.9",
         "@storybook/test": "^8.2.9",
-        "@tanstack/react-query": "^5.51.24",
         "@typescript-eslint/eslint-plugin": "^8.6.0",
         "@typescript-eslint/parser": "^8.0.0",
         "@vitejs/plugin-react": "^4.3.1",
@@ -42,7 +41,6 @@
       },
       "peerDependencies": {
         "@codex-storage/sdk-js": "0.0.6",
-        "@tanstack/react-query": "^5.51.24",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       }
@@ -2540,32 +2538,6 @@
         "storybook": "^8.3.2"
       }
     },
-    "node_modules/@tanstack/query-core": {
-      "version": "5.56.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
-      "integrity": "sha512-gor0RI3/R5rVV3gXfddh1MM+hgl0Z4G7tj6Xxpq6p2I03NGPaJ8dITY9Gz05zYYb/EJq9vPas/T4wn9EaDPd4Q==",
-      "dev": true,
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      }
-    },
-    "node_modules/@tanstack/react-query": {
-      "version": "5.56.2",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.56.2.tgz",
-      "integrity": "sha512-SR0GzHVo6yzhN72pnRhkEFRAHMsUo5ZPzAxfTMvUxFIDVS6W9LYUp6nXW3fcHVdg0ZJl8opSH85jqahvm6DSVg==",
-      "dev": true,
-      "dependencies": {
-        "@tanstack/query-core": "5.56.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^18 || ^19"
-      }
-    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",

package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/codex-storage/codex-marketplace-ui-components"
   },
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "scripts": {
     "prepack": "npm run build",
@@ -36,7 +36,6 @@
   },
   "peerDependencies": {
     "@codex-storage/sdk-js": "0.0.6",
-    "@tanstack/react-query": "^5.51.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -50,7 +49,6 @@
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
-    "@tanstack/react-query": "^5.51.24",
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^4.3.1",

src/components/Upload/UploadFile.tsx

@@ -12,7 +12,6 @@ import { Toast } from "../Toast/Toast";
 import { UploadStatus } from "./types";
 import { CircleCheck, TriangleAlert, CircleX, CircleStop } from "lucide-react";
 import { Spinner } from "../Spinner/Spinner";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { CodexData } from "@codex-storage/sdk-js";
 import { WebFileIcon } from "../WebFileIcon/WebFileIcon";
 import { ButtonIcon } from "../ButtonIcon/ButtonIcon";
@@ -55,6 +54,9 @@ type Action =
   | {
       type: "cancel";
     }
+  | {
+      type: "delete";
+    }
   | {
       type: "error";
       error: string;
@@ -81,13 +83,16 @@ function reducer(state: State, action: Action) {
     case "completed": {
       return {
         ...state,
+
+        // Just to ensure the file upload is in done status,
+        // in case of the onprogress callback function was not called
         status: "done" as UploadStatus,
+
         cid: action.cid,
       };
     }
 
     case "cancel": {
-      if (state.status === "progress") {
       return {
         ...state,
         status: "error" as UploadStatus,
@@ -95,6 +100,7 @@ function reducer(state: State, action: Action) {
       };
     }
 
+    case "delete": {
       return {
         progress: { loaded: 0, total: 0 },
         cid: "",
@@ -125,8 +131,7 @@ export function UploadFile({
   // useWorker,
 }: UploadFileProps) {
   const abort = useRef<(() => void) | null>(null);
-  const queryClient = useQueryClient();
+  // const worker = useRef<Worker | null>(null);
-  const worker = useRef<Worker | null>(null);
   const [toast, setToast] = useState({ time: 0, message: "" });
   const [state, dispatch] = useReducer<Reducer<State, Action>>(reducer, {
     progress: { loaded: 0, total: 0 },
@@ -135,46 +140,26 @@ export function UploadFile({
     status: "progress" as UploadStatus,
     error: "",
   });
-  const { mutateAsync } = useMutation({
-    mutationKey: ["upload"],
-    mutationFn: (file: File) => {
-      const res = codexData.upload(file, onProgress);
 
-      abort.current = res.abort;
+  const upload = useCallback(async () => {
+    const { abort: a, result } = codexData.upload(file, onProgress);
 
-      return res.result.then((safe) =>
+    abort.current = a;
-        safe.error
-          ? Promise.reject(safe.data.message)
-          : Promise.resolve(safe.data)
-      );
-    },
-    onError: (error) => {
-      // worker.current?.terminate();
-      dispatch({ type: "error", error: error.message });
-    },
-    onSuccess: (cid: string) => {
-      onInternalSuccess(cid);
-    },
-  });
-  const init = useRef(false);
 
-  const onInternalSuccess = useCallback(
+    const res = await result;
-    (cid: string) => {
-      worker.current?.terminate();
 
-      queryClient.invalidateQueries({
+    if (res.error) {
-        queryKey: ["cids"],
+      dispatch({ type: "error", error: res.data.message });
-      });
 
-      if (onSuccess) {
+      return;
-        onSuccess(cid, file);
-        dispatch({ type: "reset" });
-      } else {
-        dispatch({ type: "completed", cid });
     }
-    },
+
-    [onSuccess, dispatch, queryClient, file]
+    dispatch({ type: "completed", cid: state.cid });
-  );
+
+    onSuccess?.(state.cid, file);
+  }, [state.cid, codexData, onSuccess, file]);
+
+  const init = useRef(false);
 
   const onProgress = (loaded: number, total: number) => {
     dispatch({
@@ -204,7 +189,7 @@ export function UploadFile({
       reader.readAsDataURL(file);
     }
 
-    mutateAsync(file);
+    upload();
 
     // if (useWorker) {
     //   worker.current = new Worker(new URL("./worker", import.meta.url), {
@@ -239,24 +224,28 @@ export function UploadFile({
     // } else {
     //   mutateAsync(file);
     // }
-  }, [file, mutateAsync, onInternalSuccess, codexData]);
+  }, [file, upload, codexData]);
 
   const onCancel = () => {
-    if (worker.current) {
+    // if (worker.current) {
-      worker.current.postMessage({ type: "abort" });
+    //   worker.current.postMessage({ type: "abort" });
-    } else {
+    // } else {
+    //   abort.current?.();
+    // }
     abort.current?.();
-    }
 
-    dispatch({ type: "cancel" });
+    const type = state.status === "progress" ? "cancel" : "delete";
+    dispatch({ type });
   };
 
   const onInternalClose = () => {
-    if (worker.current) {
+    // if (worker.current) {
-      worker.current.postMessage({ type: "abort" });
+    //   worker.current.postMessage({ type: "abort" });
-    } else {
+    // } else {
+    //   abort.current?.();
+    // }
+
     abort.current?.();
-    }
 
     onClose(id);
   };
@@ -274,7 +263,7 @@ export function UploadFile({
   const parts = file.name.split(".");
   const extension = parts.pop();
   const filename = parts.join(".");
-  const { cid, error, preview, progress, status } = state;
+  const { cid, error = "", preview, progress, status } = state;
   const onAction = state.status === "progress" ? onCancel : onInternalClose;
   const percent =
     progress.total > 0 ? (progress.loaded / progress.total) * 100 : 0;
@@ -350,7 +339,7 @@ export function UploadFile({
         </>
       )}
 
-      {error && <SimpleText variant="error">{error}</SimpleText>}
+      <SimpleText variant="error">{error ? error : <>&nbsp;</>}</SimpleText>
 
       <Toast message={toast.message} time={toast.time} variant="success" />
     </div>

stories/Upload.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta } from "@storybook/react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Upload } from "../src/components/Upload/Upload";
 import { fn } from "@storybook/test";
 import "./Upload.stories.css";
-import { CodexDataSdk, CodexDataSlowSdk } from "./sdk";
+import { CodexDataSdk, CodexDataSlowSdk, CodexDataErrorSdk } from "./sdk";
 
 const meta = {
   title: "Advanced/Upload",
@@ -25,8 +24,6 @@ const meta = {
 
 export default meta;
 
-const queryClient = new QueryClient();
-
 type Props = {
   onClick?: () => void;
 
@@ -40,11 +37,7 @@ type Props = {
 };
 
 const Template = (p: Props) => {
-  return (
+  return <Upload multiple {...p} codexData={CodexDataSdk} />;
-    <QueryClientProvider client={queryClient}>
-      {<Upload multiple {...p} codexData={CodexDataSdk} />}
-    </QueryClientProvider>
-  );
 };
 
 export const Multiple = Template.bind({});
@@ -52,9 +45,7 @@ export const Multiple = Template.bind({});
 const SlowTemplate = (p: Props) => {
   return (
     <div className="demo">
-      <QueryClientProvider client={queryClient}>
+      <Upload multiple codexData={CodexDataSlowSdk} {...p} />
-        {<Upload multiple codexData={CodexDataSlowSdk} {...p} />}
-      </QueryClientProvider>
     </div>
   );
 };
@@ -64,7 +55,6 @@ export const Slow = SlowTemplate.bind({});
 const SingleTemplate = (p: Props) => {
   return (
     <div className="demo">
-      <QueryClientProvider client={queryClient}>
       {
         <Upload
           multiple={false}
@@ -73,9 +63,25 @@ const SingleTemplate = (p: Props) => {
           {...p}
         />
       }
-      </QueryClientProvider>
     </div>
   );
 };
 
 export const Single = SingleTemplate.bind({});
+
+const ErrorTemplate = (p: Props) => {
+  return (
+    <div className="demo">
+      {
+        <Upload
+          multiple={false}
+          editable={false}
+          codexData={CodexDataErrorSdk}
+          {...p}
+        />
+      }
+    </div>
+  );
+};
+
+export const Error = ErrorTemplate.bind({});

stories/sdk.ts

@@ -1,14 +1,13 @@
-import { CodexData, UploadResponse } from "@codex-storage/sdk-js";
+import { CodexData, CodexError, UploadResponse } from "@codex-storage/sdk-js";
 
 class CodexDataMock extends CodexData {
   override upload(
     _: File,
     onProgress?: (loaded: number, total: number) => void
-  ): Promise<UploadResponse> {
+  ): UploadResponse {
-    return new Promise<UploadResponse>((resolve) => {
     let timeout: number;
 
-      resolve({
+    return {
       abort: () => {
         window.clearInterval(timeout);
       },
@@ -29,8 +28,7 @@ class CodexDataMock extends CodexData {
           }
         }, 1500);
       }),
-      });
+    };
-    });
   }
 }
 
@@ -40,11 +38,10 @@ class CodexDataSlowMock extends CodexData {
   override upload(
     _: File,
     onProgress?: (loaded: number, total: number) => void
-  ): Promise<UploadResponse> {
+  ): UploadResponse {
-    return new Promise<UploadResponse>((resolve) => {
     let timeout: number;
 
-      resolve({
+    return {
       abort: () => {
         window.clearInterval(timeout);
       },
@@ -65,9 +62,42 @@ class CodexDataSlowMock extends CodexData {
           }
         }, 1500);
       }),
-      });
+    }
-    });
   }
 }
 
 export const CodexDataSlowSdk = new CodexDataSlowMock("");
+
+class CodexDataErrorMock extends CodexData {
+  override upload(
+    _: File,
+    onProgress?: (loaded: number, total: number) => void
+  ): UploadResponse {
+    let timeout: number;
+
+    return {
+      abort: () => {
+        window.clearInterval(timeout);
+      },
+      result: new Promise((resolve) => {
+        let count = 0;
+        timeout = window.setInterval(() => {
+          count++;
+
+          onProgress?.(500 * count, 1500);
+
+          if (count === 3) {
+            window.clearInterval(timeout);
+
+            resolve({
+              error: true,
+              data: new CodexError("Some error here"),
+            });
+          }
+        }, 1500);
+      }),
+    }
+  }
+}
+
+export const CodexDataErrorSdk = new CodexDataErrorMock("");

vite.config.ts

@@ -5,14 +5,13 @@ import react from "@vitejs/plugin-react";
 import { libInjectCss } from "vite-plugin-lib-inject-css";
 import { extname, relative } from "path";
 import { fileURLToPath } from "node:url";
-import pkg from "glob";
+import { globSync } from "glob";
-const { glob } = pkg;
 
 // https://vitejs.dev/config/
 export default defineConfig({
   worker: {
     rollupOptions: {
-      external: ["@codex-storage/sdk-js", "@tanstack/react-query"],
+      external: ["@codex-storage/sdk-js"],
       output: {
         globals: {
           "@codex-storage/sdk-js": "codex-sdk-js",
@@ -39,11 +38,9 @@ export default defineConfig({
         "react",
         "react/jsx-runtime",
         "@codex-storage/sdk-js",
-        "@tanstack/react-query",
       ],
       input: Object.fromEntries(
-        glob
+        globSync("src/**/*.{ts,tsx}", {
-          .sync("src/**/*.{ts,tsx}", {
           ignore: ["src/**/*.d.ts"],
         })
           .map((file) => [