open matches listing with available players

src/tictactoe/TicTacToe.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import { useNakama } from "./providers/NakamaProvider";
+import { Match } from "@heroiclabs/nakama-js";
 import Board from "./Board";
+import MatchList from "./MatchList";
 
 export default function TicTacToe() {
   const [username, setUsername] = useState("");
@@ -11,12 +13,14 @@ export default function TicTacToe() {
   ]);
   const [turn, setTurn] = useState<number>(0);
   const [winner, setWinner] = useState<string | null>(null);
+  const [openMatches, setOpenMatches] = useState<Match[]>([]);
 
   const {
     loginOrRegister,
     joinMatchmaker,
     onMatchData,
     sendMatchData,
+    listOpenMatches,
     matchId,
   } = useNakama();
 
@@ -32,6 +36,25 @@ export default function TicTacToe() {
     });
   }, [onMatchData]);
 
+  useEffect(() => {
+    let active = true;
+
+    async function refreshLoop() {
+      while (active) {
+        const matches = await listOpenMatches();
+        setOpenMatches(matches);
+
+        await new Promise(res => setTimeout(res, 500)); // 0.5s refresh
+      }
+    }
+
+    refreshLoop();
+
+    return () => {
+      active = false;
+    };
+  }, [listOpenMatches]);
+
   // ------------------------------------------
   // CONNECT
   // ------------------------------------------
@@ -82,6 +105,9 @@ export default function TicTacToe() {
           />
           <button onClick={connect}>Connect</button>
           <button onClick={startQueue}>Join Matchmaking</button>
+          <MatchList
+            matches={openMatches}
+          />
         </>
       )}