feat: update

2026-10-02 18:28:23 +07:00
parent 6bbeb79551
commit 1ed9ea29eb
14 changed files with 1356 additions and 368 deletions
@@ -1,15 +1,31 @@
 "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 } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+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";

-export function ProfileForm({ name: initialName, email, image: initialImage }: {
-  name: string; email: string; image: string | null;
+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);
@@ -17,11 +33,20 @@ export function ProfileForm({ name: initialName, email, image: initialImage }: {
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

-  useEffect(() => () => { if (preview) URL.revokeObjectURL(preview); }, [preview]);
+  useEffect(
+    () => () => {
+      if (preview) URL.revokeObjectURL(preview);
+    },
+    [preview],
+  );

  function chooseFile(next: File | null) {
    setError("");
-    if (next && (next.size > 6 * 1024 * 1024 || !["image/png", "image/jpeg", "image/webp"].includes(next.type))) {
+    if (
+      next &&
+      (next.size > 6 * 1024 * 1024 ||
+        !["image/png", "image/jpeg", "image/webp"].includes(next.type))
+    ) {
      setError("ใช้รูป PNG, JPEG หรือ WebP ขนาดไม่เกิน 6 MB");
      return;
    }
@@ -32,46 +57,109 @@ export function ProfileForm({ name: initialName, email, image: initialImage }: {
  async function save(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (busy) return;
-    setBusy(true); setError("");
+    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("บันทึกโปรไฟล์ไม่สำเร็จ กรุณาลองอีกครั้ง");
-      window.location.reload();
+      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 : "บันทึกโปรไฟล์ไม่สำเร็จ");
+      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>
-          <Input id="profile-image" type="file" accept="image/png,image/jpeg,image/webp"
-            onChange={(event) => {
-              const selected = event.target.files?.[0] ?? null;
-              chooseFile(selected);
-              if (selected && (selected.size > 6 * 1024 * 1024 ||
-                !["image/png", "image/jpeg", "image/webp"].includes(selected.type))) event.target.value = "";
-            }} 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><Button type="submit" form="profile-form" disabled={busy || name.trim().length < 2 || name.trim().length > 80}>
-      {busy ? "กำลังบันทึก..." : "บันทึกโปรไฟล์"}
-    </Button></CardFooter>
-  </Card>;
+  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>
+                <Input
+                  id="profile-image"
+                  type="file"
+                  accept="image/png,image/jpeg,image/webp"
+                  onChange={(event) => {
+                    const selected = event.target.files?.[0] ?? null;
+                    chooseFile(selected);
+                    if (
+                      selected &&
+                      (selected.size > 6 * 1024 * 1024 ||
+                        !["image/png", "image/jpeg", "image/webp"].includes(
+                          selected.type,
+                        ))
+                    )
+                      event.target.value = "";
+                  }}
+                  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 && (
+          <Button
+            variant="ghost"
+            nativeButton={false}
+            render={<Link href={nextPath} />}
+          >
+            ไว้ก่อน
+          </Button>
+        )}
+      </CardFooter>
+    </Card>
+  );
 }