From cf36e4eb062b4c46c7b4544a27760d091e3da7ab Mon Sep 17 00:00:00 2001
From: haru <haru@haru52.com>
Date: Sun, 26 May 2024 01:29:15 +0900
Subject: [PATCH] chore: update files

---
 src/app/_components/signup-form.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/_components/signup-form.tsx b/src/app/_components/signup-form.tsx
index 533d3fd..0bda502 100644
--- a/src/app/_components/signup-form.tsx
+++ b/src/app/_components/signup-form.tsx
@@ -9,11 +9,15 @@ import { api } from "~/trpc/react";
 export function SignupForm() {
   const router = useRouter();
   const [screenName, setScreenName] = useState("");
-  const { mutate, error, isPending } = api.user.update.useMutation({
+  const [isDisabled, setIsDisabled] = useState(false);
+  const { mutate, error } = api.user.update.useMutation({
     onSuccess: () => {
       router.push(`/`);
       router.refresh();
     },
+    onError: () => {
+      setIsDisabled(false);
+    },
   });
   const screenNameErrors: string[] = [];
   if (error?.data?.zodError?.fieldErrors.screenName !== undefined) {
@@ -26,6 +30,7 @@ export function SignupForm() {
     <form
       onSubmit={async (e) => {
         e.preventDefault();
+        setIsDisabled(true);
         mutate({
           screenName,
         });
@@ -47,9 +52,9 @@ export function SignupForm() {
       <div className="form-control mx-auto mt-7 w-full max-w-xs">
         <input
           type="submit"
-          value={isPending ? "サインアップ中…" : "サインアップ"}
+          value={isDisabled ? "サインアップ中…" : "サインアップ"}
           className="btn btn-primary btn-block"
-          disabled={isPending}
+          disabled={isDisabled}
         />
       </div>
     </form>