DRY

src/tictactoe/TicTacToe.tsx

@@ -18,18 +18,7 @@ export default function TicTacToe() {
   // const [openMatches, setOpenMatches] = useState<Match[]>([]);
   const [players, setPlayers] = useState<string[]>([]);
 
-  const {
-    loginOrRegister,
-    joinMatchmaker,
-    onMatchData,
-    sendMatchData,
-    listOpenMatches,
-    matchId,
-    session,
-  } = useNakama();
-
-  useEffect(() => {
-    onMatchData((msg) => {
+  function onMatchDataCallback(msg: { opCode: number; data: any }) {
     console.log("[Match Data]", msg);
 
     if (msg.opCode === 2) {
@@ -43,7 +32,19 @@ export default function TicTacToe() {
       // new:
       setPlayers(state.players || []);
     }
-    });
+  }
+  const {
+    loginOrRegister,
+    joinMatchmaker,
+    onMatchData,
+    sendMatchData,
+    listOpenMatches,
+    matchId,
+    session,
+  } = useNakama();
+
+  useEffect(() => {
+    onMatchData(onMatchDataCallback);
   }, [onMatchData]);
 
   // useEffect(() => {
@@ -72,21 +73,7 @@ export default function TicTacToe() {
     await loginOrRegister(username);
 
     // Match data listener
-    onMatchData((msg) => {
-      console.log("[Match Data]", msg);
-
-      if (msg.opCode === 2) {
-        const state = msg.data;
-        console.log("Match state:", state);
-
-        setBoard(state.board);
-        setTurn(state.turn);
-        setWinner(state.winner || null);
-
-        // new:
-        setPlayers(state.players || []);
-      }
-    });
+    onMatchData(onMatchDataCallback);
   }
 
   // ------------------------------------------