From 39592bd579aae04631fc5eee9792bb846cab8206 Mon Sep 17 00:00:00 2001
From: Michess <michess@mischlabs.de>
Date: Mon, 13 Apr 2026 13:45:43 +0200
Subject: [PATCH] fix: convert PublicGames to client component to avoid async
 server component in client tree

---
 .../home/PublicGames/PublicGames.tsx          | 21 +++++++++++++++----
 .../home/PublicGames/RefreshButton.tsx        |  5 +++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/src/components/home/PublicGames/PublicGames.tsx b/client/src/components/home/PublicGames/PublicGames.tsx
index 067b6bd..8b21762 100644
--- a/client/src/components/home/PublicGames/PublicGames.tsx
+++ b/client/src/components/home/PublicGames/PublicGames.tsx
@@ -1,14 +1,27 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { fetchPublicGames } from "@/lib/game";
+import type { Game } from "@michess/types";
 import JoinButton from "./JoinButton";
 import RefreshButton from "./RefreshButton";
 
-export default async function PublicGames() {
-  const games = await fetchPublicGames();
+export default function PublicGames() {
+  const [games, setGames] = useState<Game[]>([]);
+
+  async function load() {
+    const data = await fetchPublicGames();
+    setGames(data || []);
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
 
   return (
     <div className="flex flex-col items-center">
       <h2 className="mb-2 text-2xl font-bold leading-tight">
-        Public games <RefreshButton />
+        Public games <RefreshButton onRefresh={load} />
       </h2>
 
       <div className="bg-base-200 h-80 max-h-80 overflow-y-auto rounded-xl">
@@ -21,7 +34,7 @@ export default async function PublicGames() {
             </tr>
           </thead>
           <tbody>
-            {games && games.length > 0 ? (
+            {games.length > 0 ? (
               games.map((game) => (
                 <tr key={game.code} className="group">
                   <td className={typeof game.host?.id === "number" ? "text-primary" : ""}>
diff --git a/client/src/components/home/PublicGames/RefreshButton.tsx b/client/src/components/home/PublicGames/RefreshButton.tsx
index 7a3722e..33a1671 100644
--- a/client/src/components/home/PublicGames/RefreshButton.tsx
+++ b/client/src/components/home/PublicGames/RefreshButton.tsx
@@ -4,13 +4,14 @@ import { IconRefresh } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
 
-export default function RefreshButton() {
+export default function RefreshButton({ onRefresh }: { onRefresh?: () => void }) {
   const router = useRouter();
   const [isLoading, startTransition] = useTransition();
 
   function handleRefresh() {
     startTransition(() => {
-      router.refresh();
+      if (onRefresh) onRefresh();
+      else router.refresh();
     });
   }