From 3faf54d5736ec68fd7a210df0a26d913c7819e07 Mon Sep 17 00:00:00 2001
From: Aryan Prince <aryanprincesanty@icloud.com>
Date: Mon, 4 Mar 2024 04:42:25 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20feat=20(library):=20Now=20displa?=
 =?UTF-8?q?ys=20loading=20state=20when=20signing=20up?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/library/src/app/(auth)/layout.tsx         |  2 +-
 .../src/app/(auth)/signup/signup-form.tsx      | 18 ++++++++++++++----
 apps/library/src/server/actions.ts             | 17 ++++++++++++-----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/apps/library/src/app/(auth)/layout.tsx b/apps/library/src/app/(auth)/layout.tsx
index 35bea19..91b1023 100644
--- a/apps/library/src/app/(auth)/layout.tsx
+++ b/apps/library/src/app/(auth)/layout.tsx
@@ -1,4 +1,4 @@
-export default function RootLayout({
+export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
diff --git a/apps/library/src/app/(auth)/signup/signup-form.tsx b/apps/library/src/app/(auth)/signup/signup-form.tsx
index e056adb..31b5a11 100644
--- a/apps/library/src/app/(auth)/signup/signup-form.tsx
+++ b/apps/library/src/app/(auth)/signup/signup-form.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useFormState } from "react-dom";
+import { Loader2 } from "lucide-react";
+import { useFormState, useFormStatus } from "react-dom";
 
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
@@ -24,9 +25,18 @@ export default function SignupForm() {
         <Input type="password" name="password" id="password" />
       </div>
       {formState && <p className="text-sm text-red-500">{formState.error}</p>}
-      <Button type="submit" className="mt-4 w-full">
-        Sign up
-      </Button>
+      <SubmitButton />
     </form>
   );
 }
+
+function SubmitButton() {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button disabled={pending} type="submit" className="mt-4 w-full">
+      {pending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      Sign up
+    </Button>
+  );
+}
diff --git a/apps/library/src/server/actions.ts b/apps/library/src/server/actions.ts
index 6f39690..f918819 100644
--- a/apps/library/src/server/actions.ts
+++ b/apps/library/src/server/actions.ts
@@ -52,11 +52,18 @@ export async function signup(
 
   // TODO: check if username is already used
 
-  await db.insert(user).values({
-    id: userId,
-    username: username,
-    hashedPassword: hashedPassword,
-  });
+  try {
+    await db.insert(user).values({
+      id: userId,
+      username: username,
+      hashedPassword: hashedPassword,
+    });
+  } catch (e) {
+    console.log("Error adding to DB, user already exists...", e);
+    return {
+      error: "User already exists",
+    };
+  }
 
   console.log("Added to DB...");