feat: working like button

src/app/components/like-button.tsx

@@ -6,26 +6,32 @@ import { Icon } from "@iconify/react";
 
 interface Props {
 	likes: number;
+	miiId: number | undefined;
+	isLiked: boolean;
 	isLoggedIn: boolean;
 	big?: boolean;
 }
 
-export default function LikeButton({ likes, isLoggedIn, big }: Props) {
-	const [isLiked, setIsLiked] = useState(false);
+export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, big }: Props) {
+	const [isLikedState, setIsLikedState] = useState(isLiked);
 	const [likesState, setLikesState] = useState(likes);
 
-	const onClick = () => {
+	const onClick = async () => {
 		if (!isLoggedIn) redirect("/login");
 
-		setIsLiked((prev) => !prev);
+		setIsLikedState((prev) => !prev);
 		setLikesState((prev) => (isLiked ? prev - 1 : prev + 1));
 
-		// todo: update database
+		const response = await fetch("/api/like", { method: "PATCH", body: JSON.stringify({ miiId }) });
+		const { liked, count } = await response.json();
+
+		setIsLikedState(liked);
+		setLikesState(count);
 	};
 
 	return (
 		<button onClick={onClick} className={`flex items-center gap-2 text-red-400 cursor-pointer ${big ? "text-3xl" : "text-xl"}`}>
-			<Icon icon={isLiked ? "icon-park-solid:like" : "icon-park-outline:like"} />
+			<Icon icon={isLikedState ? "icon-park-solid:like" : "icon-park-outline:like"} />
 			<span>{likesState}</span>
 		</button>
 	);

src/app/components/mii-list.tsx

@@ -8,6 +8,7 @@ import Link from "next/link";
 
 interface Props {
 	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+	// for use on profiles
 	userId?: number;
 }
 
@@ -38,7 +39,7 @@ export default async function MiiList({ searchParams, userId }: Props) {
 	const whereTags = tagFilter.length > 0 ? { tags: { hasSome: tagFilter } } : undefined;
 
 	// If the mii list is on a user's profile, don't query for the username
-	const include =
+	const userInclude =
 		userId == null
 			? {
 					user: {
@@ -63,9 +64,24 @@ export default async function MiiList({ searchParams, userId }: Props) {
 			userId,
 		},
 		orderBy,
-		include,
+		include: {
+			...userInclude,
+			likedBy: {
+				where: {
+					userId: Number(session?.user.id),
+				},
+				select: {
+					userId: true,
+				},
+			},
+		},
 	});
 
+	const formattedMiis = miis.map((mii) => ({
+		...mii,
+		isLikedByUser: mii.likedBy.length > 0, // True if the user has liked the Mii
+	}));
+
 	return (
 		<div className="w-full">
 			<div className="flex justify-between items-end mb-2">
@@ -99,13 +115,13 @@ export default async function MiiList({ searchParams, userId }: Props) {
 			</div>
 
 			<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-sm:grid-cols-2 max-[25rem]:grid-cols-1">
-				{miis.map((mii) => (
+				{formattedMiis.map((mii) => (
 					<div
 						key={mii.id}
 						className="flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
 					>
 						<Link href={`/mii/${mii.id}`}>
-							<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />
+							<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl border-2 border-zinc-300" />
 						</Link>
 						<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 line-clamp-2" title={mii.name}>
@@ -120,7 +136,7 @@ export default async function MiiList({ searchParams, userId }: Props) {
 							</div>
 
 							<div className="mt-auto grid grid-cols-2 items-center">
-								<LikeButton likes={mii.likes} isLoggedIn={session?.user != null} />
+								<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLikedByUser} isLoggedIn={session?.user != null} />
 
 								{userId == null && (
 									<Link href={`/profile/${mii.user.id}`} className="text-sm text-right overflow-hidden text-ellipsis">