refactor: Extract useUpload into its own reusable hook

1 files changed, 4 insertions, 20 deletions

diff --git a/apps/web/components/dashboard/UploadDropzone.tsx b/apps/web/components/dashboard/UploadDropzone.tsx
index 05e8901e..e57f9294 100644
--- a/apps/web/components/dashboard/UploadDropzone.tsx
+++ b/apps/web/components/dashboard/UploadDropzone.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useState } from "react";
+import useUpload from "@/lib/hooks/upload-file";
 import { parseNetscapeBookmarkFile } from "@/lib/netscapeBookmarkParser";
 import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
@@ -9,10 +10,6 @@ import DropZone from "react-dropzone";
 
 import { useCreateBookmarkWithPostHook } from "@hoarder/shared-react/hooks/bookmarks";
 import { BookmarkTypes } from "@hoarder/shared/types/bookmarks";
-import {
-  zUploadErrorSchema,
-  zUploadResponseSchema,
-} from "@hoarder/shared/types/uploads";
 
 import LoadingSpinner from "../ui/spinner";
 import { toast } from "../ui/use-toast";
@@ -35,26 +32,13 @@ export function useUploadAsset() {
     },
   });
 
-  const { mutateAsync: runUploadAsset } = useMutation({
-    mutationFn: async (file: File) => {
-      const formData = new FormData();
-      formData.append("file", file);
-      const resp = await fetch("/api/assets", {
-        method: "POST",
-        body: formData,
-      });
-      if (!resp.ok) {
-        throw new Error(await resp.text());
-      }
-      return zUploadResponseSchema.parse(await resp.json());
-    },
+  const { mutateAsync: runUploadAsset } = useUpload({
     onSuccess: async (resp) => {
       const assetType =
         resp.contentType === "application/pdf" ? "pdf" : "image";
-      return createBookmark({ ...resp, type: BookmarkTypes.ASSET, assetType });
+      await createBookmark({ ...resp, type: BookmarkTypes.ASSET, assetType });
     },
-    onError: (error, req) => {
-      const err = zUploadErrorSchema.parse(JSON.parse(error.message));
+    onError: (err, req) => {
       toast({
         description: `${req.name}: ${err.error}`,
         variant: "destructive",