Merge pull request #49 from hack4impact-calpoly/31-volunteer

31 -  Redirect and add new users to database

.env

@@ -2,3 +2,4 @@
 # make sure to add .env.local to .gitignore!!
 MONGO_URI={mongo-uri-here}
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YW11c2luZy1zZWFzbmFpbC01OS5jbGVyay5hY2NvdW50cy5kZXYk
+NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/signupredirect

src/app/layout.tsx

@@ -25,7 +25,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   marginLeft: pathName !== "/login" && pathName !== "/signup" ? "15rem" : "0",
                 }}
               >
-                {/*<ProfileCard/>*/}
+                <ProfileCard />
                 {children}
               </main>
             </div>

src/app/page.tsx

@@ -4,6 +4,7 @@ import { Box, Progress, Tabs, TabList, TabPanels, Tab, TabPanel, Flex } from "@c
 import { GoRows } from "react-icons/go";
 import { PiRows } from "react-icons/pi";
 import { useUser } from "@clerk/nextjs";
+import ProfileCard from "@/components/ProfileCard";
 
 export default function Home() {
   const { user } = useUser();

src/app/signupredirect/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useUser } from "@clerk/nextjs"; // Import Clerk's hook
+import { useRouter } from "next/navigation";
+
+export default function SignupRedirect() {
+  const { user, isLoaded } = useUser();
+  const router = useRouter();
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!isLoaded) return;
+
+    if (user) {
+      const submitUserInfo = async () => {
+        try {
+          const response = await fetch("/api/user", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: user.fullName,
+              email: user.primaryEmailAddress?.emailAddress,
+              role: "Volunteer",
+            }),
+          });
+
+          if (!response.ok) throw new Error("Failed to add user");
+
+          router.push("/");
+        } catch (err: any) {
+          setError(err.message);
+        }
+      };
+
+      submitUserInfo();
+    }
+  }, [user, isLoaded, router]);
+}

src/components/ProfileCard.tsx

@@ -15,8 +15,8 @@ export default function ProfileCard() {
     <SignedIn>
       <Flex justify="flex-end" gap="4" bg="#F4F1E8">
         {/* <div className={styles.profileCardBox} onClick={() => router.push("/userProfile")}> */}
-        <Box borderWidth="3px" padding={10} rounded="10" m="20px" bg="white">
-          <Flex align="center" gap={10}>
+        <Box rounded="10" padding="20px" m="20px" bg="white">
+          <Flex align="center" gap={5}>
             <UserButton></UserButton>
             {/* TODO: Once funcionality is working for profile card drop down then remove user button 
               and uncomment the image below */}

src/database/userSchema.ts

@@ -4,8 +4,7 @@ import mongoose, { Schema } from "mongoose";
 const UserSchema = new Schema({
   name: { type: String, required: true },
   email: { type: String, required: true, unique: true },
-  password: { type: String, required: true },
-  phoneNumber: { type: String, required: true },
+  phoneNumber: { type: String, required: false },
   role: { type: String, required: true },
 });