feat: mii editing

src/app/api/mii/[id]/delete/route.ts

@@ -1,5 +1,4 @@
 import { NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
 
 import fs from "fs/promises";
 import path from "path";

src/app/api/mii/[id]/edit/route.ts

@@ -0,0 +1,124 @@
+import { NextResponse } from "next/server";
+import { z } from "zod";
+import { Mii } from "@prisma/client";
+
+import fs from "fs/promises";
+import path from "path";
+import sharp from "sharp";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { idSchema, nameSchema, tagsSchema } from "@/lib/schemas";
+
+import { validateImage } from "@/lib/images";
+
+const uploadsDirectory = path.join(process.cwd(), "public", "mii");
+
+const editSchema = z.object({
+	name: nameSchema.optional(),
+	tags: tagsSchema.optional(),
+	image1: z.union([z.instanceof(File), z.any()]).optional(),
+	image2: z.union([z.instanceof(File), z.any()]).optional(),
+	image3: z.union([z.instanceof(File), z.any()]).optional(),
+});
+
+export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) {
+	const session = await auth();
+	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+	// Get Mii ID
+	const { id: slugId } = await params;
+	const parsedId = idSchema.safeParse(slugId);
+
+	if (!parsedId.success) return NextResponse.json({ error: parsedId.error.errors[0].message }, { status: 400 });
+	const miiId = parsedId.data;
+
+	// Check ownership of Mii
+	const mii = await prisma.mii.findUnique({
+		where: {
+			id: miiId,
+		},
+	});
+
+	if (!mii) return NextResponse.json({ error: "Mii not found" }, { status: 404 });
+	if (Number(session.user.id) !== mii.userId) return NextResponse.json({ error: "You don't have ownership of that Mii" }, { status: 403 });
+
+	// Parse form data
+	const formData = await request.formData();
+
+	let rawTags: string[] | undefined = undefined;
+	try {
+		const value = formData.get("tags");
+		if (value) rawTags = JSON.parse(value as string);
+	} catch {
+		return NextResponse.json({ error: "Invalid JSON in tags" }, { status: 400 });
+	}
+
+	const parsed = editSchema.safeParse({
+		name: formData.get("name") ?? undefined,
+		tags: rawTags,
+		image1: formData.get("image1"),
+		image2: formData.get("image2"),
+		image3: formData.get("image3"),
+	});
+
+	if (!parsed.success) return NextResponse.json({ error: parsed.error.errors[0].message }, { status: 400 });
+	const { name, tags, image1, image2, image3 } = parsed.data;
+
+	// Validate image files
+	const images: File[] = [];
+
+	for (const img of [image1, image2, image3]) {
+		if (!img) continue;
+
+		const imageValidation = await validateImage(img);
+		if (imageValidation.valid) {
+			images.push(img);
+		} else {
+			return NextResponse.json({ error: imageValidation.error }, { status: imageValidation.status ?? 400 });
+		}
+	}
+
+	// Edit Mii in database
+	const updateData: Partial<Mii> = {};
+	if (name !== undefined) updateData.name = name;
+	if (tags !== undefined) updateData.tags = tags;
+	if (images.length > 0) updateData.imageCount = images.length;
+
+	if (Object.keys(updateData).length == 0) return NextResponse.json({ error: "Nothing was changed" }, { status: 400 });
+	await prisma.mii.update({
+		where: {
+			id: miiId,
+		},
+		data: updateData,
+	});
+
+	// Only touch files if new images were uploaded
+	if (images.length > 0) {
+		// Ensure directories exist
+		const miiUploadsDirectory = path.join(uploadsDirectory, miiId.toString());
+		await fs.mkdir(miiUploadsDirectory, { recursive: true });
+
+		// Delete all custom images
+		const files = await fs.readdir(miiUploadsDirectory);
+		await Promise.all(files.filter((file) => file.startsWith("image")).map((file) => fs.unlink(path.join(miiUploadsDirectory, file))));
+
+		// Compress and upload new images
+		try {
+			await Promise.all(
+				images.map(async (image, index) => {
+					const buffer = Buffer.from(await image.arrayBuffer());
+					const webpBuffer = await sharp(buffer).webp({ quality: 85 }).toBuffer();
+					const fileLocation = path.join(miiUploadsDirectory, `image${index}.webp`);
+
+					await fs.writeFile(fileLocation, webpBuffer);
+				})
+			);
+		} catch (error) {
+			console.error("Error uploading user images:", error);
+			return NextResponse.json({ error: "Failed to store user images" }, { status: 500 });
+		}
+	}
+
+	return NextResponse.json({ success: true });
+}

src/app/api/mii/[id]/like/route.ts

@@ -1,5 +1,4 @@
 import { NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
 
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";

src/app/edit/[slug]/page.tsx

@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import EditForm from "@/components/submit-form/edit-form";
+
+interface Props {
+	params: Promise<{ slug: string }>;
+}
+
+export default async function MiiPage({ params }: Props) {
+	const { slug } = await params;
+	const session = await auth();
+
+	const mii = await prisma.mii.findUnique({
+		where: {
+			id: Number(slug),
+		},
+		include: {
+			_count: {
+				select: { likedBy: true }, // Get total like count
+			},
+		},
+	});
+
+	// Check ownership
+	if (!mii || Number(session?.user.id) !== mii.userId) redirect("/404");
+
+	return <EditForm mii={mii} likes={mii._count.likedBy} />;
+}

src/app/mii/[slug]/page.tsx

@@ -19,7 +19,7 @@ export default async function MiiPage({ params }: Props) {
 	const { slug } = await params;
 	const session = await auth();
 
-	const mii = await prisma.mii.findFirst({
+	const mii = await prisma.mii.findUnique({
 		where: {
 			id: Number(slug),
 		},
@@ -55,10 +55,12 @@ export default async function MiiPage({ params }: Props) {
 	return (
 		<div>
 			<div className="relative grid grid-cols-5 gap-2 max-sm:grid-cols-1 max-lg:grid-cols-2">
+				{/* Carousel */}
 				<div className="min-w-full flex justify-center col-span-2 max-lg:col-span-1">
 					<Carousel images={images} className="shadow-lg" />
 				</div>
 
+				{/* Information */}
 				<div className="flex flex-col gap-1 p-4 col-span-2 max-lg:col-span-1">
 					<h1 className="text-4xl font-extrabold break-words">{mii.name}</h1>
 					<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
@@ -89,10 +91,11 @@ export default async function MiiPage({ params }: Props) {
 					</div>
 				</div>
 
+				{/* Extra information */}
 				<div className="flex flex-col gap-2">
 					<section className="p-6 bg-orange-100 rounded-2xl shadow-lg border-2 border-orange-400 h-min">
 						<legend className="text-lg font-semibold mb-2">Mii Info</legend>
-						<ul className="text-sm *:flex *:justify-between *:items-center">
+						<ul className="text-sm *:flex *:justify-between *:items-center *:my-1">
 							<li>
 								Name:{" "}
 								<span className="text-right">
@@ -103,7 +106,7 @@ export default async function MiiPage({ params }: Props) {
 								From: <span className="text-right">{mii.islandName} Island</span>
 							</li>
 							<li>
-								Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox" />
+								Copying: <input type="checkbox" checked={mii.allowedCopying} disabled className="checkbox !cursor-auto" />
 							</li>
 						</ul>
 					</section>
@@ -117,6 +120,7 @@ export default async function MiiPage({ params }: Props) {
 				</div>
 			</div>
 
+			{/* Images */}
 			<div className="overflow-x-scroll">
 				<div className="flex gap-2 w-max py-4">
 					{images.map((src, index) => (

src/app/profile/[slug]/page.tsx

@@ -17,7 +17,7 @@ export default async function ProfilePage({ params }: Props) {
 	const session = await auth();
 	const { slug } = await params;
 
-	const user = await prisma.user.findFirst({
+	const user = await prisma.user.findUnique({
 		where: {
 			id: Number(slug),
 		},

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>
+	);
+}