Added settings for user

2026-01-08 17:55:22 +07:00
parent 5deddc7423
commit 83c61276f8
10 changed files with 267 additions and 97 deletions
--- a/src/components/form/user-settings-form.tsx
+++ b/src/components/form/user-settings-form.tsx
@@ -0,0 +1,131 @@
+import { m } from '@/paraglide/messages';
+import { Locale, setLocale } from '@/paraglide/runtime';
+import { settingQueries } from '@/service/queries';
+import { updateUserSettings } from '@/service/setting.api';
+import { UserSettingInput, userSettingSchema } from '@/service/setting.schema';
+import { GearIcon } from '@phosphor-icons/react';
+import { useForm } from '@tanstack/react-form';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+import { Button } from '../ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
+import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { Skeleton } from '../ui/skeleton';
+
+const defaultValues: UserSettingInput = {
+  language: '',
+};
+
+const UserSettingsForm = () => {
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery(settingQueries.listUser());
+
+  const updateMutation = useMutation({
+    mutationFn: updateUserSettings,
+    onSuccess: (_, variables) => {
+      setLocale(variables.data.language as Locale);
+      queryClient.invalidateQueries({
+        queryKey: [...settingQueries.all, 'listUser'],
+      });
+      toast.success(m.settings_messages_update_success(), {
+        richColors: true,
+      });
+    },
+  });
+
+  const form = useForm({
+    defaultValues,
+    validators: {
+      onSubmit: userSettingSchema,
+      onChange: userSettingSchema,
+    },
+    onSubmit: ({ value }) => {
+      updateMutation.mutate({ data: value as UserSettingInput });
+    },
+  });
+
+  useEffect(() => {
+    if (data?.value?.language) {
+      setTimeout(() => {
+        form.setFieldValue('language', data.value.language);
+      }, 0);
+    }
+  }, [data, form]);
+
+  return (
+    <Card className="@container/card col-span-1 @xl/main:col-span-2">
+      <CardHeader>
+        <CardTitle className="text-xl flex items-center gap-2">
+          <GearIcon size={20} />
+          {m.settings_ui_title()}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form
+          id="user-settings-form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            {isLoading ? (
+              <div className="col-span-2 space-y-2">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            ) : (
+              <form.Field
+                name="language"
+                children={(field) => {
+                  const isInvalid =
+                    field.state.meta.isTouched && !field.state.meta.isValid;
+                  return (
+                    <Field data-invalid={isInvalid} className="col-span-2">
+                      <FieldLabel htmlFor={field.name}>
+                        {m.settings_form_language()}
+                      </FieldLabel>
+                      <Select
+                        name={field.name}
+                        value={field.state.value}
+                        onValueChange={(value) => field.handleChange(value)}
+                      >
+                        <SelectTrigger aria-invalid={isInvalid}>
+                          <SelectValue placeholder="Select Language" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="en">English</SelectItem>
+                          <SelectItem value="vi">Vietnamese</SelectItem>
+                        </SelectContent>
+                      </Select>
+                      {isInvalid && (
+                        <FieldError errors={field.state.meta.errors} />
+                      )}
+                    </Field>
+                  );
+                }}
+              />
+            )}
+            <Field>
+              <Button type="submit" disabled={isLoading}>
+                {m.ui_update_btn()}
+              </Button>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default UserSettingsForm;