feat: update user

src/components/DatePicker/DatePicker.tsx

@@ -13,9 +13,8 @@ type DatePickerProps = {
 } & DayPickerProps;
 
 export const DatePicker: FC<DatePickerProps> = ({ name, label, error, disabledInput, ...props }) => {
-  const [date, setDate] = useState<Date>();
-
-  const { register, setValue } = useFormContext();
+  const { register, setValue, getValues } = useFormContext();
+  const [date, setDate] = useState<Date>(getValues(name));
 
   return (
     <Popover placement="bottom">
@@ -34,6 +33,7 @@ export const DatePicker: FC<DatePickerProps> = ({ name, label, error, disabledIn
           selected={date}
           // @ts-expect-error: due to the props spread below
           onSelect={newDate => {
+            // @ts-expect-error: due to the default props
             setDate(newDate);
             setValue(name, newDate);
           }}

src/pages/Profile/index.tsx

@@ -1,4 +1,5 @@
-import { cloneElement, useState } from "react";
+import { cloneElement, useCallback, useState } from "react";
+import { useMutation } from "@apollo/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Input, Select, Typography, Option, Button } from "@material-tailwind/react";
 import { format } from "date-fns";
@@ -8,9 +9,18 @@ import { useCountries } from "use-react-countries";
 import { z } from "zod";
 import { DatePicker } from "@components/DatePicker/DatePicker";
 import { UserRoleChip } from "@components/UserRoleChip/UserRoleChip.tsx";
+import { gql } from "@generated/gql.ts";
 import { useUserStore } from "@state/userStore.ts";
 import { DATE_TIME, DATE_TIME_READ } from "@utils/constants.ts";
 
+const UPDATE_USER = gql(/* GraphQL */ `
+  mutation UpdateUser($userId: String!, $user: UserUpdateInput!) {
+    updateUser(userId: $userId, user: $user) {
+      id
+    }
+  }
+`);
+
 const formSchema = z.object({
   firstName: z.string().min(1, { message: "Enter a first name." }),
   lastName: z.string(),
@@ -21,10 +31,15 @@ const formSchema = z.object({
 export function Component() {
   const [isEditing, setIsEditing] = useState(false);
   const {
-    user: { email, firstName, lastName, dateOfBirth, country, role, createdAt, updatedAt },
+    user: { userId, email, firstName, lastName, dateOfBirth, country, role, createdAt, updatedAt },
   } = useUserStore();
 
+  const [updateUser, { loading: isLoadingUserUpdate }] = useMutation(UPDATE_USER);
+
   const { countries } = useCountries();
+  const orderedCountries = useCallback(() => {
+    return countries.sort((a, b) => a.name < b.name ? -1 : 1);
+  }, [countries]);
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -44,7 +59,9 @@ export function Component() {
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values, event) => {
     event?.preventDefault();
     try {
-      console.log("values", values);
+      await updateUser({
+        variables: { userId, user: { ...values, dateOfBirth: values.dateOfBirth.toDateString() } },
+      });
       toast.success("Profile updated successfully");
       setIsEditing(false);
     } catch (e) {
@@ -91,8 +108,10 @@ export function Component() {
           />
 
           <Select
+            name="country"
             size="lg"
             label="Select Country"
+            value={form.getValues("country")}
             onChange={value => form.setValue("country", value || "")}
             selected={element =>
               element &&
@@ -104,7 +123,7 @@ export function Component() {
             error={!!errors.country}
             disabled={!isEditing}
           >
-            {countries.map(({ name, flags }: { name: string; flags: { svg: string } }) => (
+            {orderedCountries().map(({ name, flags }: { name: string; flags: { svg: string } }) => (
               <Option key={name} value={name} className="flex items-center gap-2">
                 <img src={flags.svg} alt={name} className="h-5 w-5 rounded-full object-cover" />
                 {name}
@@ -113,7 +132,13 @@ export function Component() {
           </Select>
 
           {isEditing && (
-            <Button type="submit" fullWidth variant="filled">
+            <Button
+              type="submit"
+              fullWidth
+              loading={isLoadingUserUpdate}
+              disabled={isLoadingUserUpdate}
+              variant="filled"
+            >
               Confirm
             </Button>
           )}