From c6fc2f602639ccccdc3144d6595a64d91d15092f Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@nym.sh>
Date: Mon, 15 Sep 2025 23:31:03 +0000
Subject: [PATCH] fix: file upload btn

---
 src/files/files-page.tsx | 68 +++++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 40 deletions(-)

diff --git a/src/files/files-page.tsx b/src/files/files-page.tsx
index 3054f94..a92c5ad 100644
--- a/src/files/files-page.tsx
+++ b/src/files/files-page.tsx
@@ -1,8 +1,6 @@
 import { api } from "@convex/_generated/api"
-import {
-	useMutation as useConvexMutation,
-	useQuery as useConvexQuery,
-} from "convex/react"
+import { useMutation } from "@tanstack/react-query"
+import { useMutation as useConvexMutation } from "convex/react"
 import { useSetAtom } from "jotai"
 import {
 	ChevronDownIcon,
@@ -10,7 +8,7 @@ import {
 	PlusIcon,
 	UploadCloudIcon,
 } from "lucide-react"
-import { type ChangeEvent, useRef, useState } from "react"
+import { type ChangeEvent, useRef } from "react"
 import { toast } from "sonner"
 import {
 	DropdownMenu,
@@ -57,10 +55,32 @@ export function FilesPage() {
 
 // tags: upload, uploadfile, uploadfilebutton, fileupload, fileuploadbutton
 function UploadFileButton() {
-	const [isUploading, setIsUploading] = useState(false)
-	const currentUser = useConvexQuery(api.users.getCurrentUser)
 	const generateUploadUrl = useConvexMutation(api.files.generateUploadUrl)
 	const saveFile = useConvexMutation(api.files.saveFile)
+	const { mutate: uploadFile, isPending: isUploading } = useMutation({
+		mutationFn: async (file: File) => {
+			const uploadUrl = await generateUploadUrl()
+			const uploadResult = await fetch(uploadUrl, {
+				method: "POST",
+				body: file,
+				headers: {
+					"Content-Type": file.type,
+				},
+			})
+			const { storageId } = await uploadResult.json()
+
+			await saveFile({
+				storageId,
+				name: file.name,
+				size: file.size,
+				mimeType: file.type,
+			})
+		},
+		onSuccess: () => {
+			toast.success("File uploaded successfully.")
+		},
+	})
+
 	const fileInputRef = useRef<HTMLInputElement>(null)
 
 	const handleClick = () => {
@@ -68,41 +88,9 @@ function UploadFileButton() {
 	}
 
 	const onFileUpload = async (e: ChangeEvent<HTMLInputElement>) => {
-		if (!currentUser?._id) {
-			return
-		}
-
 		const file = e.target.files?.[0]
 		if (file) {
-			try {
-				setIsUploading(true)
-
-				const uploadUrl = await generateUploadUrl()
-				const uploadResult = await fetch(uploadUrl, {
-					method: "POST",
-					body: file,
-					headers: {
-						"Content-Type": file.type,
-					},
-				})
-				const { storageId } = await uploadResult.json()
-
-				await saveFile({
-					storageId,
-					name: file.name,
-					size: file.size,
-					mimeType: file.type,
-					userId: currentUser._id,
-				})
-
-				toast.success("File uploaded successfully.", {
-					position: "top-center",
-				})
-			} catch (error) {
-				console.error(error)
-			} finally {
-				setIsUploading(false)
-			}
+			uploadFile(file)
 		}
 	}