137 lines
4.4 KiB
TypeScript
137 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, type FormEvent } from "react";
|
|
import Link from "next/link";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ProfileImageInput } from "./profile-image-input";
|
|
|
|
export function ProfileForm({
|
|
name: initialName,
|
|
email,
|
|
image: initialImage,
|
|
nextPath,
|
|
}: {
|
|
name: string;
|
|
email: string;
|
|
image: string | null;
|
|
nextPath?: string;
|
|
}) {
|
|
const [name, setName] = useState(initialName);
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [preview, setPreview] = useState<string | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(
|
|
() => () => {
|
|
if (preview) URL.revokeObjectURL(preview);
|
|
},
|
|
[preview],
|
|
);
|
|
|
|
async function save(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
if (busy) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const form = new FormData();
|
|
form.set("name", name.trim());
|
|
if (file) form.set("image", file);
|
|
const response = await fetch("/api/profile", {
|
|
method: "POST",
|
|
body: form,
|
|
});
|
|
if (!response.ok)
|
|
throw new Error("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
|
|
if (nextPath) window.location.assign(nextPath);
|
|
else window.location.reload();
|
|
} catch (cause) {
|
|
setError(
|
|
cause instanceof Error ? cause.message : "บันทึกโปรไฟล์ไม่สำเร็จ",
|
|
);
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>ข้อมูลบัญชี</CardTitle>
|
|
<CardDescription>{email}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form id="profile-form" onSubmit={save}>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="profile-image">รูปโปรไฟล์</FieldLabel>
|
|
<div className="flex items-center gap-4">
|
|
<Avatar size="lg" className="size-16">
|
|
{(preview || initialImage) && (
|
|
<AvatarImage
|
|
src={preview || initialImage || ""}
|
|
alt="รูปโปรไฟล์"
|
|
/>
|
|
)}
|
|
<AvatarFallback>
|
|
{name.trim().charAt(0).toUpperCase() || "?"}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<ProfileImageInput
|
|
id="profile-image"
|
|
onChange={(cropped) => {
|
|
setFile(cropped);
|
|
setPreview(URL.createObjectURL(cropped));
|
|
setError("");
|
|
}}
|
|
onError={setError}
|
|
disabled={busy}
|
|
/>
|
|
</div>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="profile-name">ชื่อที่แสดง</FieldLabel>
|
|
<Input
|
|
id="profile-name"
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
minLength={2}
|
|
maxLength={80}
|
|
required
|
|
disabled={busy}
|
|
/>
|
|
</Field>
|
|
{error && (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{error}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
<CardFooter className="flex-wrap gap-2">
|
|
<Button
|
|
type="submit"
|
|
form="profile-form"
|
|
disabled={busy || name.trim().length < 2 || name.trim().length > 80}
|
|
>
|
|
{busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
|
|
</Button>
|
|
{nextPath && <Link href={nextPath} className={buttonVariants({ variant: "outline" })}>ข้ามและเริ่มใช้งาน</Link>}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|