Update Profile page and the backend

src/actions/add-user-info.ts

@@ -4,10 +4,10 @@ import { eq, InferInsertModel } from "drizzle-orm";
 
 import db from "@/db";
 import { userInfo } from "@/db/schema/user-info";
-import { users } from "@/db/schema/users"; // ← add this
+import { users } from "@/db/schema/users";
 import { auth } from "@/lib/auth";
 
-type Payload = Omit<InferInsertModel<typeof userInfo>, "userId">;
+type Payload = Omit<InferInsertModel<typeof userInfo>, "userId"> & { email?: string };
 
 export async function addUserInfo(data: Payload): Promise<void> {
   const session = await auth();
@@ -16,13 +16,19 @@ export async function addUserInfo(data: Payload): Promise<void> {
     throw new Error("Unauthorized");
   }
 
+  // Remving email field 
+  const { email, ...rest } = data;
+
   await db.insert(userInfo).values({
     userId: session.user.id,
-    ...data,
+    ...rest,
   });
 
   await db
     .update(users)
-    .set({ infoFilled: true })
+    .set({
+      infoFilled: true,
+      ...(email ? { email: email.trim() } : {}),
+    })
     .where(eq(users.id, session.user.id));
 }

src/actions/get-user-info.ts

@@ -0,0 +1,44 @@
+"use server";
+
+import { eq } from "drizzle-orm";
+
+import db from "@/db";
+import { userInfo } from "@/db/schema/user-info";
+import { users } from "@/db/schema/users";
+import { auth } from "@/lib/auth";
+
+type UserInfoWithEmail = typeof userInfo.$inferSelect & { email: string | null };
+
+export default async function getUserInfo(): Promise<UserInfoWithEmail | null> {
+  try {
+    const session = await auth();
+
+    if (!session?.user?.id) {
+      throw new Error("Unauthorized");
+    }
+
+    const userInfoData = await db
+      .select()
+      .from(userInfo)
+      .where(eq(userInfo.userId, session.user.id))
+      .limit(1);
+
+    if (!userInfoData[0]) {
+      return null;
+    }
+
+    const userData = await db
+      .select({ email: users.email })
+      .from(users)
+      .where(eq(users.id, session.user.id))
+      .limit(1);
+
+    return {
+      ...userInfoData[0],
+      email: userData[0]?.email ?? null,
+    };
+  } catch (error) {
+    console.error("GET USER INFO ERROR:", error);
+    throw error;
+  }
+}

src/actions/update-user-info.ts

@@ -0,0 +1,54 @@
+"use server";
+
+import { eq, InferInsertModel } from "drizzle-orm";
+
+import db from "@/db";
+import { userInfo } from "@/db/schema/user-info";
+import { users } from "@/db/schema/users";
+import { auth } from "@/lib/auth";
+
+type UserInfoInsert = InferInsertModel<typeof userInfo>;
+type Payload = Partial<Omit<UserInfoInsert, "userId">> & { email?: string };
+
+export async function updateUserInfo(data: Payload): Promise<void> {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    throw new Error("Unauthorized");
+  }
+
+  if (!data || Object.keys(data).length === 0) {
+    console.error("No data to update");
+    return;
+  }
+
+  const { email, ...rest } = data;
+
+  const safeData = {
+    ...rest,
+    addressLine2: rest.addressLine2?.trim() || null,
+    preferredNeighborhood: rest.preferredNeighborhood?.trim() || null,
+    gender: rest.gender?.trim() || null,
+    shirtSize: rest.shirtSize?.trim() || null,
+    medicalNotes: rest.medicalNotes?.trim() || null,
+  };
+
+  try {
+    await db
+      .update(userInfo)
+      .set(safeData)
+      .where(eq(userInfo.userId, session.user.id));
+
+    if (email) {
+      await db
+        .update(users)
+        .set({ email: email.trim() })
+        .where(eq(users.id, session.user.id));
+    }
+  } catch (error: any) {
+    console.error("UPDATE ERROR:", error);
+    console.error("ERROR MESSAGE:", error?.message);
+    console.error("ERROR CAUSE:", error?.cause);
+    throw error;
+  }
+}

src/app/(profile)/account/update-profile/page.tsx

@@ -1,7 +1,13 @@
 import { Box, Typography } from "@mui/material";
 import React from "react";
 
-export default function UpdateProfile(): React.ReactElement {
+import getUserInfo from "@/actions/get-user-info";
+import BasicInfoForm from "@/app/(profile)/info/page";
+
+export default async function UpdateProfile(): Promise<React.ReactElement> {
+  const userData = await getUserInfo();
+  const mode = userData ? "editForm" : "submitForm";
+
   return (
     <>
       <Box
@@ -11,25 +17,16 @@ export default function UpdateProfile(): React.ReactElement {
           px: 10,
           py: 5,
           width: "100%",
-          marginTop: 0,
         }}
       >
-        <Typography variant="h4" sx={{ fontWeight: 400 }}>
-          Update Profile
-        </Typography>
+        <Typography variant="h4">Update Profile</Typography>
       </Box>
 
-      <Box
-        sx={{
-          color: "black",
-          px: 10,
-          py: 5,
-          width: "100%",
-        }}
-      >
-        <Typography variant="body1">
-          Update profile will go here later
-        </Typography>
+      <Box sx={{ px: 10, py: 5 }}>
+        <BasicInfoForm
+          initialData={userData ?? {}}
+          mode={mode}
+        />
       </Box>
     </>
   );

src/app/(profile)/info/page.tsx

@@ -17,6 +17,7 @@ import { useSession } from "next-auth/react";
 import * as React from "react";
 
 import { addUserInfo } from "@/actions/add-user-info";
+import { updateUserInfo } from "@/actions/update-user-info";
 import FormLayout from "@/components/layout/FormLayout/";
 
 type BasicInfoFormState = {
@@ -39,26 +40,34 @@ type BasicInfoFormState = {
   medicalNotes?: string;
 };
 
-export default function BasicInfoForm(): React.ReactElement {
-  const [form, setForm] = React.useState<BasicInfoFormState>({
-    firstName: "",
-    lastName: "",
-    addressLine1: "",
-    addressLine2: "",
-    city: "",
-    state: "",
-    postalCode: "",
-    country: "",
-    phoneNumber: "",
-    isTextOptedIn: false,
-    birthMonth: "",
-    birthDay: "",
-    birthYear: "",
-    preferredNeighborhood: "",
-    gender: "",
-    shirtSize: "",
-    medicalNotes: "",
-  });
+type BasicInfoFormProps = {
+  initialData?: Partial<BasicInfoFormState>;
+  mode?: "submitForm" | "editForm";
+};
+
+export default function BasicInfoForm({
+  initialData,
+  mode = "submitForm",
+}: BasicInfoFormProps): React.ReactElement {
+  const [form, setForm] = React.useState<BasicInfoFormState>(() => ({
+    firstName: initialData?.firstName ?? "",
+    lastName: initialData?.lastName ?? "",
+    addressLine1: initialData?.addressLine1 ?? "",
+    addressLine2: initialData?.addressLine2 ?? "",
+    city: initialData?.city ?? "",
+    state: initialData?.state ?? "",
+    postalCode: initialData?.postalCode ?? "",
+    country: initialData?.country ?? "US",
+    phoneNumber: initialData?.phoneNumber ?? "",
+    isTextOptedIn: initialData?.isTextOptedIn ?? false,
+    birthMonth: initialData?.birthMonth?.toString() ?? "",
+    birthDay: initialData?.birthDay?.toString() ?? "",
+    birthYear: initialData?.birthYear?.toString() ?? "",
+    preferredNeighborhood: initialData?.preferredNeighborhood ?? "",
+    gender: initialData?.gender ?? "",
+    shirtSize: initialData?.shirtSize ?? "",
+    medicalNotes: initialData?.medicalNotes ?? "",
+  }));
 
   const { update } = useSession();
   const router = useRouter();
@@ -77,44 +86,50 @@ export default function BasicInfoForm(): React.ReactElement {
   ): Promise<void> {
     e.preventDefault();
 
-    try {
-      await addUserInfo({
-        firstName: form.firstName.trim(),
-        lastName: form.lastName.trim(),
-
-        addressLine1: form.addressLine1.trim(),
-        addressLine2: form.addressLine2 || null,
-        city: form.city.trim(),
-        state: form.state.trim(),
-        postalCode: form.postalCode.trim(),
-        country: "US",
+    const payload = {
+      firstName: form.firstName.trim(),
+      lastName: form.lastName.trim(),
+      addressLine1: form.addressLine1.trim(),
+      addressLine2: form.addressLine2 || null,
+      city: form.city.trim(),
+      state: form.state.trim(),
+      postalCode: form.postalCode.trim(),
+      country: "US",
+      phoneNumber: form.phoneNumber.trim(),
+      isTextOptedIn: form.isTextOptedIn,
+      birthMonth: Number(form.birthMonth),
+      birthDay: Number(form.birthDay),
+      birthYear: Number(form.birthYear),
+      preferredNeighborhood: form.preferredNeighborhood || null,
+      gender: form.gender || null,
+      shirtSize: form.shirtSize || null,
+      medicalNotes: form.medicalNotes || null,
+    };
 
-        phoneNumber: form.phoneNumber.trim(),
-        isTextOptedIn: form.isTextOptedIn,
-
-        birthMonth: Number(form.birthMonth),
-        birthDay: Number(form.birthDay),
-        birthYear: Number(form.birthYear),
-
-        preferredNeighborhood: form.preferredNeighborhood || null,
-        gender: form.gender || null,
-        shirtSize: form.shirtSize || null,
-        medicalNotes: form.medicalNotes || null,
-      });
-
-      await update();
-      router.push("/");
+    try {
+      if (mode === "editForm") {
+        await updateUserInfo(payload);
+        alert("Profile updated successfully.");
+      } else {
+        await addUserInfo(payload);
+        await update();
+        router.push("/");
+      }
     } catch (error) {
-      console.error("add user info failed", error);
-      alert("Error in adding information.");
+      console.error("form submit failed", error);
+      alert("Error saving information.");
     }
   }
 
   return (
     <FormLayout
-      title="Complete Your Information"
+      title={
+        mode === "editForm"
+          ? "Update Your Information"
+          : "Complete Your Information"
+      }
       description="* indicates required field"
-      submitLabel="Submit"
+      submitLabel={mode === "editForm" ? "Save" : "Submit"}
       onSubmit={handleSubmit}
     >
       {/* Name */}