chore: update files

haru52 · May 25, 2024 · cf36e4e · cf36e4e
1 parent d29e871
commit cf36e4e
Showing 1 changed file with 8 additions and 3 deletions.
diff --git 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>