several

src/features/players/components/profile/name-form.tsx

@@ -1,6 +1,6 @@
 import { updatePlayer } from "@/features/players/server";
 import { useMutation } from "@tanstack/react-query";
-import { Stack, TextInput } from "@mantine/core"
+import { Stack, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import toast from "@/lib/sonner";
 import { useRouter } from "@tanstack/react-router";
@@ -8,54 +8,71 @@ import { Player } from "../../types";
 import Button from "@/components/button";
 
 interface NameUpdateFormProps {
-	player: Player;
-	toggle: () => void;
+  player: Player;
+  toggle: () => void;
 }
 
 const NameUpdateForm = ({ player, toggle }: NameUpdateFormProps) => {
-	const router = useRouter();
+  const router = useRouter();
 
-	const form = useForm({
+  const form = useForm({
     initialValues: {
       first_name: player.first_name,
-      last_name: player.last_name
+      last_name: player.last_name,
     },
     validate: {
-      first_name: (value: string) => {
-        if (value.length === 0) return 'First name is required'
-        if (!(/^[a-zA-Z\s]{3,20}$/).test(value)) return 'First name must be 3-20 characters long and contain only letters'
+      first_name: (value: string | undefined) => {
+        if (!value || value.length === 0) return "First name is required";
+        if (!/^[a-zA-Z\s]{3,20}$/.test(value))
+          return "First name must be 3-20 characters long and contain only letters";
+      },
+      last_name: (value: string | undefined) => {
+        if (!value || value.length === 0) return "Last name is required";
+        if (!/^[a-zA-Z\s]{3,20}$/.test(value))
+          return "Last name must be 3-20 characters long and contain only letters";
       },
-			last_name: (value: string) => {
-				if (value.length === 0) return 'Last name is required'
-				if (!(/^[a-zA-Z\s]{3,20}$/).test(value)) return 'Last name must be 3-20 characters long and contain only letters'
-			}
-    }
-  })
-
-	const { mutate: updateName, isPending } = useMutation({
-    mutationFn: async (data: { first_name: string, last_name: string }) => await updatePlayer({ data }),
-    onSuccess: () => {
-      toggle();
-			toast.success('Name updated successfully!');
-			router.invalidate();
-
     },
-		onError: () => {
-			toast.error('There was an issue updating your name. Please try again later.');
-		}
   });
 
-	const handleSubmit = async (data: { first_name: string, last_name: string }) => await updateName(data)
-	return (
-		<form onSubmit={form.onSubmit(handleSubmit)}>
-			<Stack gap='xs'>
-				<TextInput label='First Name' {...form.getInputProps('first_name')} />
-				<TextInput label='Last Name' {...form.getInputProps('last_name')} />
-				<Button loading={isPending} type='submit'>Save</Button>
-				<Button variant='subtle' color='red' onClick={toggle}>Cancel</Button>
-			</Stack>
-		</form>
-	)
-}
+  const { mutate: updateName, isPending } = useMutation({
+    mutationFn: async (data: { first_name: string; last_name: string }) =>
+      await updatePlayer({ data }),
+    onSuccess: () => {
+      toggle();
+      toast.success("Name updated successfully!");
+      router.invalidate();
+    },
+    onError: () => {
+      toast.error(
+        "There was an issue updating your name. Please try again later."
+      );
+    },
+  });
+
+  const handleSubmit = async (data: {
+    first_name: string | undefined;
+    last_name: string | undefined;
+  }) => {
+    if (!data.first_name || !data.last_name) return;
+    await updateName({
+      first_name: data.first_name,
+      last_name: data.last_name,
+    });
+  };
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack gap="xs">
+        <TextInput label="First Name" {...form.getInputProps("first_name")} />
+        <TextInput label="Last Name" {...form.getInputProps("last_name")} />
+        <Button loading={isPending} type="submit">
+          Save
+        </Button>
+        <Button variant="subtle" color="red" onClick={toggle}>
+          Cancel
+        </Button>
+      </Stack>
+    </form>
+  );
+};
 
 export default NameUpdateForm;