122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
import { useEffect } from 'react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
updateProfileSchema,
|
|
type UpdateProfileInput,
|
|
type Profile,
|
|
} from '@family-wishlist/shared';
|
|
import { toast } from 'sonner';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Input } from '@/components/ui/Input';
|
|
import { Label } from '@/components/ui/Label';
|
|
import { Textarea } from '@/components/ui/Textarea';
|
|
import { api, ApiError } from '@/lib/api';
|
|
import { useAuthStore } from '@/features/auth/authStore';
|
|
|
|
export function ProfileSettingsPage() {
|
|
const refresh = useAuthStore((s) => s.refresh);
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data, isLoading } = useQuery({
|
|
queryKey: ['profile'],
|
|
queryFn: () => api.get<Profile>('/api/profile'),
|
|
});
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors, isSubmitting, isDirty },
|
|
} = useForm<UpdateProfileInput>({
|
|
resolver: zodResolver(updateProfileSchema),
|
|
defaultValues: { slug: '', displayName: '', bio: '', avatarUrl: '' },
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
reset({
|
|
slug: data.slug,
|
|
displayName: data.displayName,
|
|
bio: data.bio ?? '',
|
|
avatarUrl: data.avatarUrl ?? '',
|
|
});
|
|
}
|
|
}, [data, reset]);
|
|
|
|
const update = useMutation({
|
|
mutationFn: (values: UpdateProfileInput) =>
|
|
api.patch<Profile, UpdateProfileInput>('/api/profile', values),
|
|
onSuccess: (p) => {
|
|
toast.success('Profile saved');
|
|
void queryClient.invalidateQueries({ queryKey: ['profile'] });
|
|
void refresh();
|
|
reset({
|
|
slug: p.slug,
|
|
displayName: p.displayName,
|
|
bio: p.bio ?? '',
|
|
avatarUrl: p.avatarUrl ?? '',
|
|
});
|
|
},
|
|
onError: (err) => {
|
|
if (err instanceof ApiError) toast.error(err.message);
|
|
else toast.error('Save failed');
|
|
},
|
|
});
|
|
|
|
const submit = handleSubmit((values) => {
|
|
const payload: UpdateProfileInput = {
|
|
...values,
|
|
bio: values.bio ? values.bio : null,
|
|
avatarUrl: values.avatarUrl ? values.avatarUrl : null,
|
|
};
|
|
update.mutate(payload);
|
|
});
|
|
|
|
return (
|
|
<div className="grid max-w-2xl gap-6">
|
|
<section>
|
|
<h1 className="font-display text-3xl">Profile</h1>
|
|
<p className="text-sm text-muted">
|
|
Your public page lives at <code className="rounded bg-ink/5 px-1.5 py-0.5">/u/{data?.slug ?? '...'}</code>.
|
|
</p>
|
|
</section>
|
|
|
|
{isLoading ? (
|
|
<div className="text-muted">Loading...</div>
|
|
) : (
|
|
<form className="grid gap-4 rounded-xl border border-border bg-surface p-6 shadow-card" onSubmit={submit}>
|
|
<div className="field">
|
|
<Label htmlFor="slug">Slug (public URL)</Label>
|
|
<Input id="slug" {...register('slug')} />
|
|
{errors.slug && <span className="field__error">{errors.slug.message}</span>}
|
|
</div>
|
|
<div className="field">
|
|
<Label htmlFor="displayName">Display name</Label>
|
|
<Input id="displayName" {...register('displayName')} />
|
|
{errors.displayName && (
|
|
<span className="field__error">{errors.displayName.message}</span>
|
|
)}
|
|
</div>
|
|
<div className="field">
|
|
<Label htmlFor="bio">Bio</Label>
|
|
<Textarea id="bio" rows={3} {...register('bio')} />
|
|
</div>
|
|
<div className="field">
|
|
<Label htmlFor="avatarUrl">Avatar URL</Label>
|
|
<Input id="avatarUrl" type="url" {...register('avatarUrl')} />
|
|
</div>
|
|
<div className="flex items-center justify-end gap-2">
|
|
<Button type="submit" disabled={!isDirty || isSubmitting}>
|
|
{isSubmitting && <Loader2 className="h-4 w-4 animate-spin" />}
|
|
Save changes
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|