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),
 		},