refactor

src/app/portfolio/[slug]/(portfolio)/bulk-upload/[uploadId]/StartAddressMatchingButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
 import { ArrowRightIcon } from "@heroicons/react/24/outline";
 
 interface Props {
@@ -12,14 +12,9 @@ interface Props {
 
 export default function StartAddressMatchingButton({ portfolioId, uploadId, filename }: Props) {
   const router = useRouter();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
 
-  async function handleStart() {
-    setLoading(true);
-    setError(null);
-
-    try {
+  const { mutate, isPending, error } = useMutation({
+    mutationFn: async () => {
       const taskRes = await fetch("/api/tasks", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -52,24 +47,22 @@ export default function StartAddressMatchingButton({ portfolioId, uploadId, file
         const data = await matchRes.json().catch(() => ({}));
         throw new Error(data.error ?? "Failed to start address matching");
       }
-
+    },
+    onSuccess: () => {
       router.refresh();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Something went wrong");
-      setLoading(false);
-    }
-  }
+    },
+  });
 
   return (
     <div className="mt-4">
       <button
-        onClick={handleStart}
-        disabled={loading}
+        onClick={() => mutate()}
+        disabled={isPending}
         className={`inline-flex items-center gap-2 px-5 py-2 rounded-xl bg-gradient-to-br from-[#14163d] to-[#15173e] text-white text-sm font-bold transition-opacity ${
-          loading ? "opacity-50 cursor-not-allowed" : "hover:opacity-90"
+          isPending ? "opacity-50 cursor-not-allowed" : "hover:opacity-90"
         }`}
       >
-        {loading ? (
+        {isPending ? (
           <>
             <span className="w-4 h-4 rounded-full border-2 border-white border-t-transparent animate-spin" />
             Starting…
@@ -81,7 +74,11 @@ export default function StartAddressMatchingButton({ portfolioId, uploadId, file
           </>
         )}
       </button>
-      {error && <p className="mt-2 text-xs text-red-500">{error}</p>}
+      {error && (
+        <p className="mt-2 text-xs text-red-500">
+          {error instanceof Error ? error.message : "Something went wrong"}
+        </p>
+      )}
     </div>
   );
 }

src/app/portfolio/[slug]/(portfolio)/bulk-upload/page.tsx

@@ -1,5 +1,3 @@
-"use server";
-
 import { db } from "@/app/db/db";
 import { bulkAddressUploads } from "@/app/db/schema/bulk_address_uploads";
 import { eq, desc } from "drizzle-orm";