public games list functionality

client/src/components/home/PublicGames.tsx

@@ -1,51 +0,0 @@
-import { IconRefresh } from "@tabler/icons-react";
-
-export default function PublicGames() {
-  return (
-    <div className="flex flex-col items-center">
-      <h2 className="mb-2 text-2xl font-bold leading-tight">
-        Public games{" "}
-        <div className="btn btn-sm btn-ghost">
-          <IconRefresh size={16} className="" />
-        </div>
-      </h2>
-
-      <div className="bg-base-100 h-80 max-h-80 overflow-y-auto">
-        <table className="table-compact lg:table-normal table rounded-none">
-          <thead>
-            <tr>
-              <th className="w-48">Host</th>
-              <th className="w-48">Opponent</th>
-              <th className="w-24"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>(empty)</td>
-              <td></td>
-              <td></td>
-            </tr>
-            {/* <tr className="group">
-              <td>nize</td>
-              <td>nize</td>
-              <th>
-                <button className="btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
-                  Join
-                </button>
-              </th>
-            </tr> */}
-            {/* <tr className="group">
-              <td>WPlaceholder_Text</td>
-              <td>WPlaceholder_Text</td>
-              <th>
-                <button className="btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
-                  Join
-                </button>
-              </th>
-            </tr> */}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

client/src/components/home/PublicGames/JoinButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+
+export default function JoinButton({ code }: { code: string }) {
+  const router = useRouter();
+  const [isLoading, startTransition] = useTransition();
+
+  function handleJoin() {
+    startTransition(() => {
+      router.push(`/game/${code}`);
+    });
+  }
+
+  return (
+    <button
+      className={
+        "btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100" +
+        (isLoading ? " btn-disabled" : "")
+      }
+      onClick={handleJoin}
+    >
+      Join
+    </button>
+  );
+}

client/src/components/home/PublicGames/PublicGames.tsx

@@ -0,0 +1,48 @@
+import { getPublicGames } from "@/lib/game";
+import JoinButton from "./JoinButton";
+import RefreshButton from "./RefreshButton";
+
+export default async function PublicGames() {
+  const games = await getPublicGames();
+
+  return (
+    <div className="flex flex-col items-center">
+      <h2 className="mb-2 text-2xl font-bold leading-tight">
+        Public games <RefreshButton />
+      </h2>
+
+      <div className="bg-base-100 h-80 max-h-80 overflow-y-auto">
+        <table className="table-compact lg:table-normal table rounded-none">
+          <thead>
+            <tr>
+              <th className="w-48">Host</th>
+              <th className="w-48">Opponent</th>
+              <th className="w-24"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {games && games.length > 0 ? (
+              games.map((game) => (
+                <tr key={game.code} className="group">
+                  <td>{game.host?.name}</td>
+                  <td>
+                    {(game.host?.id === game.white?.id ? game.black?.name : game.white?.name) || ""}
+                  </td>
+                  <th>
+                    <JoinButton code={game.code as string} />
+                  </th>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td>(empty)</td>
+                <td></td>
+                <td></td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

client/src/components/home/PublicGames/RefreshButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { IconRefresh } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+
+export default function RefreshButton() {
+  const router = useRouter();
+  const [isLoading, startTransition] = useTransition();
+
+  function handleRefresh() {
+    startTransition(() => {
+      router.refresh();
+    });
+  }
+
+  return (
+    <button
+      className={"btn btn-sm btn-ghost" + (isLoading ? " loading" : "")}
+      onClick={handleRefresh}
+    >
+      <IconRefresh size={16} />
+    </button>
+  );
+}