140 lines
4.4 KiB
TypeScript
140 lines
4.4 KiB
TypeScript
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 { ReturnError } from '@/types/common';
|
|
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,
|
|
});
|
|
},
|
|
onError: (error: ReturnError) => {
|
|
console.error(error);
|
|
toast.error(
|
|
(m[`backend_${error.code}` as keyof typeof m] as () => string)(),
|
|
{ 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;
|