replace "First name" and "Surname" input fields with a single "Fullname" field

Author: sahilpatel2712

app/(app)/alpha/additional-details/_actions.ts

@@ -23,14 +23,12 @@ export async function slideOneSubmitAction(dataInput: TypeSlideOneSchema) {
   }
 
   try {
-    const { firstName, surname, username, location } =
-      slideOneSchema.parse(dataInput);
+    const { name, username, location } = slideOneSchema.parse(dataInput);
 
     await db
       .update(user)
       .set({
-        firstName,
-        surname,
+        name,
         username,
         location,
       })

app/(app)/alpha/additional-details/_client.tsx

@@ -42,8 +42,7 @@ import { Divider } from "@/components/ui-components/divider";
 
 type UserDetails = {
   username: string;
-  firstName: string;
-  surname: string;
+  name: string;
   gender: string;
   dateOfBirth: string;
   location: string;
@@ -63,8 +62,7 @@ export default function AdditionalSignUpDetails({
   const searchParams = useSearchParams();
 
   const {
-    surname,
-    firstName,
+    name,
     username,
     location,
     dateOfBirth,
@@ -75,7 +73,7 @@ export default function AdditionalSignUpDetails({
   let slide: number;
   if (searchParams.get("slide")) {
     slide = Number(searchParams.get("slide"));
-  } else if (!surname || !firstName || !username || !location) {
+  } else if (!name || !username || !location) {
     slide = 1;
   } else if (!dateOfBirth || !gender) {
     slide = 2;
@@ -102,15 +100,15 @@ export default function AdditionalSignUpDetails({
 function SlideOne({ details }: { details: UserDetails }) {
   const router = useRouter();
 
-  const { username, firstName, surname, location } = details;
+  const { username, name, location } = details;
 
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
   } = useForm<TypeSlideOneSchema>({
     resolver: zodResolver(slideOneSchema),
-    defaultValues: { username, firstName, surname, location },
+    defaultValues: { username, name, location },
   });
 
   const onFormSubmit = async (data: TypeSlideOneSchema) => {
@@ -139,33 +137,16 @@ function SlideOne({ details }: { details: UserDetails }) {
         <Divider className="my-4 mt-4" />
         <div className="mx-4">
           <Field>
-            <Label>First Name</Label>
+            <Label>Full Name</Label>
             <Input
-              id="first-name"
-              placeholder="Enter first name"
-              invalid={!!errors?.firstName}
-              {...register("firstName")}
+              id="full-name"
+              placeholder="Enter full name"
+              invalid={!!errors?.name}
+              {...register("name")}
             />
-            {errors?.firstName && (
+            {errors?.name && (
               <ErrorMessage className="text-red-500">
-                {errors.firstName.message}
-              </ErrorMessage>
-            )}
-          </Field>
-        </div>
-
-        <div className="mx-4 mt-4 ">
-          <Field>
-            <Label>Surname</Label>
-            <Input
-              id="surname"
-              placeholder="Enter surname"
-              invalid={!!errors?.surname}
-              {...register("surname")}
-            />
-            {errors?.surname && (
-              <ErrorMessage className="text-red-500">
-                {errors.surname.message}
+                {errors.name.message}
               </ErrorMessage>
             )}
           </Field>

app/(app)/alpha/additional-details/page.tsx

@@ -13,8 +13,7 @@ export default async function Page() {
   const details = await db.query.user.findFirst({
     columns: {
       username: true,
-      firstName: true,
-      surname: true,
+      name: true,
       gender: true,
       dateOfBirth: true,
       location: true,
@@ -29,8 +28,7 @@ export default async function Page() {
 
   const detailsWithNullsRemoved = {
     username: details?.username || "",
-    firstName: details?.firstName || "",
-    surname: details?.surname || "",
+    name: details?.name || "",
     gender: details?.gender || "",
     dateOfBirth: details?.dateOfBirth || "",
     location: details?.location || "",

schema/additionalUserDetails.ts

@@ -1,15 +1,10 @@
 import z from "zod";
 
 export const slideOneSchema = z.object({
-  firstName: z
+  name: z
     .string()
     .trim()
-    .min(2, "Min name length is 2 characters.")
-    .max(50, "Max name length is 50 characters."),
-  surname: z
-    .string()
-    .trim()
-    .min(2, "Min name length is 2 characters.")
+    .min(1, "Min name length is 1 characters.")
     .max(50, "Max name length is 50 characters."),
   username: z
     .string()

server/db/schema.ts

@@ -204,8 +204,6 @@ export const user = pgTable(
     websiteUrl: text("websiteUrl").default("").notNull(),
     emailNotifications: boolean("emailNotifications").default(true).notNull(),
     newsletter: boolean("newsletter").default(true).notNull(),
-    firstName: text("firstName"),
-    surname: text("surname"),
     gender: text("gender"),
     dateOfBirth: timestamp("dateOfBirth", {
       precision: 3,