feat: mii deletion

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

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+
+import fs from "fs/promises";
+import path from "path";
+
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+const uploadsDirectory = path.join(process.cwd(), "public", "mii");
+
+const slugSchema = z.coerce
+	.number({ message: "Mii ID must be a number" })
+	.int({ message: "Mii ID must be an integer" })
+	.positive({ message: "Mii ID must be valid" });
+
+export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+	const session = await auth();
+	if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+	const { id: slugId } = await params;
+	const parsed = slugSchema.safeParse(slugId);
+
+	if (!parsed.success) return NextResponse.json({ error: parsed.error.errors[0].message }, { status: 400 });
+	const miiId = parsed.data;
+
+	const miiUploadsDirectory = path.join(uploadsDirectory, miiId.toString());
+
+	try {
+		await prisma.mii.delete({
+			where: { id: miiId },
+		});
+	} catch (error) {
+		console.error("Failed to delete Mii from database:", error);
+		return NextResponse.json({ error: "Failed to delete Mii" }, { status: 500 });
+	}
+
+	try {
+		await fs.rm(miiUploadsDirectory, { recursive: true, force: true });
+	} catch (error) {
+		console.warn("Failed to delete Mii image files:", error);
+	}
+
+	return NextResponse.json({ success: true });
+}

src/app/components/delete-mii.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import Image from "next/image";
+
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { Icon } from "@iconify/react";
+
+import LikeButton from "./like-button";
+
+interface Props {
+	miiId: number;
+	miiName: string;
+	likes: number;
+}
+
+export default function DeleteMiiButton({ miiId, miiName, likes }: Props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isVisible, setIsVisible] = useState(false);
+
+	const [error, setError] = useState<string | undefined>(undefined);
+
+	const submit = async () => {
+		const response = await fetch(`/api/mii/${miiId}/delete`, { method: "DELETE" });
+		if (!response.ok) {
+			const { error } = await response.json();
+			setError(error);
+			return;
+		}
+
+		close();
+		window.location.reload(); // I would use router.refresh() here but the API data fetching breaks
+	};
+
+	const close = () => {
+		setIsVisible(false);
+		setTimeout(() => {
+			setIsOpen(false);
+		}, 300);
+	};
+
+	useEffect(() => {
+		if (isOpen) {
+			// slight delay to trigger animation
+			setTimeout(() => setIsVisible(true), 10);
+		}
+	}, [isOpen]);
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(true)} className="cursor-pointer">
+				<Icon icon="mdi:trash" />
+			</button>
+
+			{isOpen &&
+				createPortal(
+					<div className="fixed inset-0 flex items-center justify-center z-40">
+						<div
+							onClick={close}
+							className={`z-40 absolute inset-0 backdrop-brightness-75 backdrop-blur-xs transition-opacity duration-300 ${
+								isVisible ? "opacity-100" : "opacity-0"
+							}`}
+						/>
+
+						<div
+							className={`z-50 bg-orange-50 border-2 border-amber-500 rounded-2xl shadow-lg p-6 w-full max-w-md transition-discrete duration-300 flex flex-col ${
+								isVisible ? "scale-100 opacity-100" : "scale-75 opacity-0"
+							}`}
+						>
+							<div className="flex justify-between items-center mb-2">
+								<h2 className="text-xl font-bold">Delete Mii</h2>
+								<button onClick={close} className="text-red-400 hover:text-red-500 text-2xl cursor-pointer">
+									<Icon icon="material-symbols:close-rounded" />
+								</button>
+							</div>
+
+							<p className="text-sm text-zinc-500">Are you sure? This will delete your Mii permanently. This action cannot be undone.</p>
+
+							<div className="bg-orange-100 rounded-xl border-2 border-orange-400 mt-4 flex">
+								<Image src={`/mii/${miiId}/mii.webp`} alt="mii image" width={128} height={128} />
+								<div className="p-4">
+									<p className="text-xl font-bold line-clamp-1" title={miiName}>
+										{miiName}
+									</p>
+									<LikeButton likes={likes} isLiked={true} disabled />
+								</div>
+							</div>
+
+							{error && <span className="text-red-400 font-bold mt-2">Error: {error}</span>}
+
+							<div className="flex justify-end gap-2 mt-4">
+								<button onClick={close} className="pill button">
+									Cancel
+								</button>
+								<button onClick={submit} className="pill button !bg-red-400 !border-red-500 hover:!bg-red-500">
+									Delete
+								</button>
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
+		</>
+	);
+}

src/app/components/mii-list/index.tsx

@@ -4,12 +4,15 @@ import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import useSWR from "swr";
 
+import { Icon } from "@iconify/react";
+
+import Skeleton from "./skeleton";
+import FilterSelect from "./filter-select";
 import SortSelect from "./sort-select";
 import Carousel from "../carousel";
 import LikeButton from "../like-button";
-import FilterSelect from "./filter-select";
+import DeleteMiiButton from "../delete-mii";
 import Pagination from "./pagination";
-import Skeleton from "./skeleton";
 
 interface Props {
 	isLoggedIn: boolean;
@@ -86,7 +89,7 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
 								/>
 
 								<div className="p-4 flex flex-col gap-1 h-full">
-									<Link href={`/mii/${mii.id}`} className="font-bold text-2xl overflow-hidden text-ellipsis text-nowrap" title={mii.name}>
+									<Link href={`/mii/${mii.id}`} className="font-bold text-2xl line-clamp-1" title={mii.name}>
 										{mii.name}
 									</Link>
 									<div id="tags" className="flex flex-wrap gap-1">
@@ -100,10 +103,17 @@ export default function MiiList({ isLoggedIn, userId }: Props) {
 									<div className="mt-auto grid grid-cols-2 items-center">
 										<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} isLoggedIn={isLoggedIn} />
 
-										{userId == null && (
+										{!userId ? (
 											<Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis">
 												@{mii.user?.username}
 											</Link>
+										) : (
+											<div className="flex gap-1 text-2xl justify-end text-zinc-400">
+												<Link href={`/edit/${mii.id}`}>
+													<Icon icon="mdi:pencil" />
+												</Link>
+												<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii.likes} />
+											</div>
 										)}
 									</div>
 								</div>

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

@@ -1,12 +1,15 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 
+import { Icon } from "@iconify/react";
+
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
 import Carousel from "@/app/components/carousel";
 import LikeButton from "@/app/components/like-button";
 import ImageViewer from "@/app/components/image-viewer";
+import DeleteMiiButton from "@/app/components/delete-mii";
 
 interface Props {
 	params: Promise<{ slug: string }>;
@@ -86,6 +89,7 @@ export default async function MiiPage({ params }: Props) {
 					</div>
 				</div>
 
+				<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">
@@ -103,6 +107,14 @@ export default async function MiiPage({ params }: Props) {
 							</li>
 						</ul>
 					</section>
+
+					<div className="flex gap-1 text-4xl justify-end text-orange-400">
+						<Link href={`/edit/${mii.id}`}>
+							<Icon icon="mdi:pencil" />
+						</Link>
+						<DeleteMiiButton miiId={mii.id} miiName={mii.name} likes={mii._count.likedBy ?? 0} />
+					</div>
+				</div>
 			</div>
 
 			<div className="overflow-x-scroll">