From 40636d2d52bfb58f0d8d0ebacfc09b05aa206f4f Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sat, 1 Feb 2025 10:03:28 +0800
Subject: [PATCH] refactor(auth): update sign-in and sign-up cards to use
 loading states

---
 src/features/auth/components/sign-in-card.tsx | 10 ++++++----
 src/features/auth/components/sign-up-card.tsx | 12 +++++++-----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/features/auth/components/sign-in-card.tsx b/src/features/auth/components/sign-in-card.tsx
index 6817021..4c53564 100644
--- a/src/features/auth/components/sign-in-card.tsx
+++ b/src/features/auth/components/sign-in-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { z } from "zod";
 import Link from "next/link";
 import {
@@ -19,7 +21,7 @@ import { Separator } from "@/components/ui/separator";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export const SignInCard = () => {
-  const { mutate } = useLogin();
+  const { mutate, isPending } = useLogin();
 
   const form = useForm<z.infer<typeof loginSchema>>({
     resolver: zodResolver(loginSchema),
@@ -78,7 +80,7 @@ export const SignInCard = () => {
                 </FormItem>
               )}
             />
-            <Button disabled={false} size="lg" className="w-full">
+            <Button disabled={isPending} size="lg" className="w-full">
               Login
             </Button>
           </form>
@@ -89,7 +91,7 @@ export const SignInCard = () => {
       </div>
       <CardContent className="p-7 flex flex-col gap-y-4">
         <Button
-          disabled={false}
+          disabled={isPending}
           variant="secondary"
           size="lg"
           className="w-full"
@@ -98,7 +100,7 @@ export const SignInCard = () => {
           Login with Google
         </Button>
         <Button
-          disabled={false}
+          disabled={isPending}
           variant="secondary"
           size="lg"
           className="w-full"
diff --git a/src/features/auth/components/sign-up-card.tsx b/src/features/auth/components/sign-up-card.tsx
index 7f23060..216f03c 100644
--- a/src/features/auth/components/sign-up-card.tsx
+++ b/src/features/auth/components/sign-up-card.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { z } from "zod";
 import Link from "next/link";
 import {
@@ -25,7 +27,7 @@ import { Separator } from "@/components/ui/separator";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 export const SignUpCard = () => {
-  const { mutate } = useRegister();
+  const { mutate, isPending } = useRegister();
 
   const form = useForm<z.infer<typeof registerSchema>>({
     resolver: zodResolver(registerSchema),
@@ -113,8 +115,8 @@ export const SignUpCard = () => {
                 </FormItem>
               )}
             />
-            <Button disabled={false} size="lg" className="w-full">
-              Login
+            <Button disabled={isPending} size="lg" className="w-full">
+              Register
             </Button>
           </form>
         </Form>
@@ -124,7 +126,7 @@ export const SignUpCard = () => {
       </div>
       <CardContent className="p-7 flex flex-col gap-y-4">
         <Button
-          disabled={false}
+          disabled={isPending}
           variant="secondary"
           size="lg"
           className="w-full"
@@ -133,7 +135,7 @@ export const SignUpCard = () => {
           Login with Google
         </Button>
         <Button
-          disabled={false}
+          disabled={isPending}
           variant="secondary"
           size="lg"
           className="w-full"