feat: mii editing

src/components/carousel.tsx

@@ -61,6 +61,7 @@ export default function Carousel({ images, className }: Props) {
 			{images.length > 1 && (
 				<>
 					<button
+						type="button"
 						onClick={() => emblaApi?.scrollPrev()}
 						disabled={!emblaApi?.canScrollPrev()}
 						className={`absolute left-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
@@ -70,6 +71,7 @@ export default function Carousel({ images, className }: Props) {
 						<Icon icon="ic:round-chevron-left" />
 					</button>
 					<button
+						type="button"
 						onClick={() => emblaApi?.scrollNext()}
 						disabled={!emblaApi?.canScrollNext()}
 						className={`absolute right-2 top-1/2 -translate-y-1/2 bg-white p-1 rounded-full shadow text-xl transition-opacity ${
@@ -83,6 +85,7 @@ export default function Carousel({ images, className }: Props) {
 						{scrollSnaps.map((_, index) => (
 							<button
 								key={index}
+								type="button"
 								onClick={() => emblaApi?.scrollTo(index)}
 								className={`size-1.5 cursor-pointer rounded-full ${index === selectedIndex ? "bg-black" : "bg-black/25"}`}
 							/>

src/components/image-viewer.tsx

@@ -99,7 +99,7 @@ export default function ImageViewer({ src, alt, width, height, className, images
 							}`}
 						>
 							<div className="z-50 absolute right-0 bg-amber-500 rounded-tr-xl rounded-bl-md p-1 flex justify-between items-center">
-								<button onClick={close} className="text-2xl cursor-pointer">
+								<button type="button" onClick={close} className="text-2xl cursor-pointer">
 									<Icon icon="material-symbols:close-rounded" />
 								</button>
 							</div>
@@ -131,6 +131,7 @@ export default function ImageViewer({ src, alt, width, height, className, images
 									}`}
 								>
 									<button
+										type="button"
 										onClick={() => emblaApi?.scrollPrev()}
 										disabled={!emblaApi?.canScrollPrev()}
 										className={`bg-white p-1 rounded-full shadow text-4xl transition-opacity ${
@@ -147,6 +148,7 @@ export default function ImageViewer({ src, alt, width, height, className, images
 									}`}
 								>
 									<button
+										type="button"
 										onClick={() => emblaApi?.scrollNext()}
 										disabled={!emblaApi?.canScrollNext()}
 										className={`bg-white p-1 rounded-full shadow text-4xl transition-opacity ${

src/components/submit-form/edit-form.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { redirect } from "next/navigation";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FileWithPath, useDropzone } from "react-dropzone";
+import { Icon } from "@iconify/react";
+import { Mii } from "@prisma/client";
+
+import { nameSchema, tagsSchema } from "@/lib/schemas";
+
+import TagSelector from "../tag-selector";
+import ImageList from "./image-list";
+import LikeButton from "../like-button";
+import Carousel from "../carousel";
+
+interface Props {
+	mii: Mii;
+	likes: number;
+}
+
+export default function EditForm({ mii, likes }: Props) {
+	const [files, setFiles] = useState<FileWithPath[]>([]);
+
+	const handleDrop = useCallback(
+		(acceptedFiles: FileWithPath[]) => {
+			if (files.length >= 3) return;
+			hasFilesChanged.current = true;
+
+			setFiles((prev) => [...prev, ...acceptedFiles]);
+		},
+		[files.length]
+	);
+
+	const { getRootProps, getInputProps } = useDropzone({
+		onDrop: handleDrop,
+		maxFiles: 3,
+		accept: {
+			"image/*": [".png", ".jpg", ".jpeg", ".bmp", ".webp"],
+		},
+	});
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const [name, setName] = useState(mii.name);
+	const [tags, setTags] = useState(mii.tags);
+	const hasFilesChanged = useRef(false);
+
+	const handleSubmit = async (event: React.FormEvent) => {
+		event.preventDefault();
+
+		// Validate before sending request
+		const nameValidation = nameSchema.safeParse(name);
+		if (!nameValidation.success) {
+			setError(nameValidation.error.errors[0].message);
+			return;
+		}
+		const tagsValidation = tagsSchema.safeParse(tags);
+		if (!tagsValidation.success) {
+			setError(tagsValidation.error.errors[0].message);
+			return;
+		}
+
+		// Send request to server
+		const formData = new FormData();
+		if (name != mii.name) formData.append("name", name);
+		if (tags != mii.tags) formData.append("tags", JSON.stringify(tags));
+		if (hasFilesChanged.current) {
+			files.forEach((file, index) => {
+				// image1, image2, etc.
+				formData.append(`image${index + 1}`, file);
+			});
+		}
+
+		const response = await fetch(`/api/mii/${mii.id}/edit`, {
+			method: "PATCH",
+			body: formData,
+		});
+		const { error } = await response.json();
+
+		if (!response.ok) {
+			setError(error);
+			return;
+		}
+
+		redirect(`/mii/${mii.id}`);
+	};
+
+	// Load existing images - converts image URLs to File objects
+	useEffect(() => {
+		const loadExistingImages = async () => {
+			try {
+				const existing = await Promise.all(
+					Array.from({ length: mii.imageCount }, async (_, index) => {
+						const path = `/mii/${mii.id}/image${index}.webp`;
+						const response = await fetch(path);
+						const blob = await response.blob();
+
+						return Object.assign(new File([blob], `image${index}.webp`, { type: "image/webp" }), { path });
+					})
+				);
+
+				setFiles(existing);
+			} catch (error) {
+				console.error("Error loading existing images:", error);
+			}
+		};
+
+		loadExistingImages();
+	}, [mii.id, mii.imageCount]);
+
+	return (
+		<form onSubmit={handleSubmit} className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
+			<div className="flex justify-center">
+				<div className="w-[18.75rem] h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
+					<Carousel images={[`/mii/${mii.id}/mii.webp`, `/mii/${mii.id}/qr-code.webp`, ...files.map((file) => URL.createObjectURL(file))]} />
+
+					<div className="p-4 flex flex-col gap-1 h-full">
+						<h1 className="font-bold text-2xl line-clamp-1" title={name}>
+							{name || "Mii name"}
+						</h1>
+						<div id="tags" className="flex flex-wrap gap-1">
+							{tags.length == 0 && <span className="px-2 py-1 bg-orange-300 rounded-full text-xs">tag</span>}
+							{tags.map((tag) => (
+								<span key={tag} className="px-2 py-1 bg-orange-300 rounded-full text-xs">
+									{tag}
+								</span>
+							))}
+						</div>
+
+						<div className="mt-auto">
+							<LikeButton likes={likes} isLiked={false} abbreviate disabled />
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div className="bg-amber-50 border-2 border-amber-500 rounded-2xl shadow-lg p-4 flex flex-col gap-2 max-w-2xl w-full">
+				<div>
+					<h2 className="text-2xl font-bold">Edit your Mii</h2>
+					<p className="text-sm text-zinc-500">Make changes to your existing Mii.</p>
+				</div>
+
+				{/* Separator */}
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium my-1">
+					<hr className="flex-grow border-zinc-300" />
+					<span>Info</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<div className="w-full grid grid-cols-3 items-center">
+					<label htmlFor="name" className="font-semibold">
+						Name
+					</label>
+					<input
+						name="name"
+						type="text"
+						className="pill input w-full col-span-2"
+						minLength={2}
+						maxLength={64}
+						placeholder="Type your mii's name here..."
+						value={name}
+						onChange={(e) => setName(e.target.value)}
+					/>
+				</div>
+
+				<div className="w-full grid grid-cols-3 items-center">
+					<label htmlFor="tags" className="font-semibold">
+						Tags
+					</label>
+					<TagSelector tags={tags} setTags={setTags} />
+				</div>
+
+				{/* Separator */}
+				<div className="flex items-center gap-4 text-zinc-500 text-sm font-medium mt-8 mb-2">
+					<hr className="flex-grow border-zinc-300" />
+					<span>Custom images</span>
+					<hr className="flex-grow border-zinc-300" />
+				</div>
+
+				<div className="max-w-md w-full self-center">
+					<div
+						{...getRootProps({
+							className:
+								"bg-orange-200 flex flex-col justify-center items-center gap-2 p-4 rounded-xl border border-2 border-dashed border-amber-500 select-none h-full",
+						})}
+					>
+						<input {...getInputProps()} />
+						<Icon icon="material-symbols:upload" fontSize={48} />
+						<p className="text-center text-sm">
+							Drag and drop your images here
+							<br />
+							or click to open
+						</p>
+					</div>
+				</div>
+
+				<ImageList files={files} setFiles={setFiles} />
+
+				<hr className="border-zinc-300 my-2" />
+				<div className="flex justify-between items-center">
+					{error && <span className="text-red-400 font-bold">Error: {error}</span>}
+
+					<button type="submit" className="pill button w-min ml-auto">
+						Edit
+					</button>
+				</div>
+			</div>
+		</form>
+	);
+}