fix: like buttons not working with cache rules

src/app/layout.tsx

@@ -93,14 +93,14 @@ export default function RootLayout({
 				)}
 
 				<Providers>
-					<Suspense fallback={<div>Loading header...</div>}>
-						<SessionProvider>
+					<SessionProvider>
+						<Suspense fallback={<div>Loading header...</div>}>
 							<Header />
-						</SessionProvider>
-					</Suspense>
-					<AdminBanner />
-					<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
-					<Footer />
+						</Suspense>
+						<AdminBanner />
+						<main className="px-4 py-8 max-w-7xl w-full grow flex flex-col">{children}</main>
+						<Footer />
+					</SessionProvider>
 				</Providers>
 			</body>
 		</html>

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

@@ -316,7 +316,7 @@ export default async function MiiPage({ params }: Props) {
 								{/* Submission name */}
 								<h1 className="text-4xl font-extrabold wrap-break-word text-amber-700">{mii.name}</h1>
 								{/* Like button */}
-								<LikeButton likes={mii._count.likedBy ?? 0} miiId={mii.id} isLiked={(mii.likedBy ?? []).length > 0} isLoggedIn={session?.user != null} big />
+								<LikeButton likes={mii._count.likedBy ?? 0} miiId={mii.id} isLiked={(mii.likedBy ?? []).length > 0} big />
 							</div>
 							{/* Tags */}
 							<div id="tags" className="flex flex-wrap gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">

src/components/like-button.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { Icon, loadIcons } from "@iconify/react";
@@ -9,13 +10,13 @@ interface Props {
 	likes: number;
 	miiId?: number | undefined;
 	isLiked: boolean;
-	isLoggedIn?: boolean;
 	disabled?: boolean;
 	abbreviate?: boolean;
 	big?: boolean;
 }
 
-export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled, abbreviate, big }: Props) {
+export default function LikeButton({ likes, isLiked, miiId, disabled, abbreviate, big }: Props) {
+	const session = useSession();
 	const router = useRouter();
 
 	const [isLikedState, setIsLikedState] = useState(isLiked);
@@ -24,7 +25,7 @@ export default function LikeButton({ likes, isLiked, miiId, isLoggedIn, disabled
 
 	const onClick = async () => {
 		if (disabled) return;
-		if (!isLoggedIn) {
+		if (!session.data?.user) {
 			router.push("/login");
 			return;
 		}

src/components/mii/list/index.tsx

@@ -224,7 +224,7 @@ export default async function MiiList({ searchParams, userId, inLikesPage }: Pro
 							</div>
 
 							<div className="mt-auto grid grid-cols-2 items-center">
-								<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} isLoggedIn={session?.user != null} abbreviate />
+								<LikeButton likes={mii.likes} miiId={mii.id} isLiked={mii.isLiked} abbreviate />
 
 								{!userId && (
 									<Link href={`/profile/${mii.user?.id}`} className="text-sm text-right overflow-hidden text-ellipsis">