From d8a463870bc56c7e85e4f58391682dae523f8cfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20=27birdy=27=20Danjou?= <clement@danjou.io>
Date: Fri, 8 Dec 2023 15:13:30 +0100
Subject: [PATCH] fix() fix player refresh

---
 src/modules/game/components/Game/Game.tsx | 79 +++++++++++++----------
 1 file changed, 46 insertions(+), 33 deletions(-)

diff --git a/src/modules/game/components/Game/Game.tsx b/src/modules/game/components/Game/Game.tsx
index 82ab310..ffcdef6 100644
--- a/src/modules/game/components/Game/Game.tsx
+++ b/src/modules/game/components/Game/Game.tsx
@@ -39,7 +39,7 @@ export const Game = ({ account, provider }: GameProps) => {
 
     if (!contractLoading && contractAddress) {
       setContractLoading(true);
-      void getContract(contractAddress!);
+      void getContract(contractAddress);
     }
   }, [contractAddress, provider]);
 
@@ -63,32 +63,6 @@ export const Game = ({ account, provider }: GameProps) => {
       setGameIsRunning(isRunning);
     };
 
-    const onPlayerNameChanged = (player: string, name: string) => {
-      const newPlayers = players.map((p) => {
-        if (p.address === getAddress(player)) {
-          return { ...p, name };
-        }
-        return p;
-      });
-      setPlayers(newPlayers);
-    };
-
-    const onPlayerJoined = async (address: string) => {
-      if (contract) {
-        const name = await getReadContract(contract).name(address);
-        const newPlayers = [...players, { address, name }];
-        console.log(newPlayers);
-        setPlayers(newPlayers);
-      }
-    };
-
-    const onPlayerLeave = (player: string) => {
-      const newPlayers = players.filter(({ address }) => address != player);
-
-      console.log(newPlayers);
-      setPlayers(newPlayers);
-    };
-
     const gameHasStarted = () => {
       onNextBlock(() => {
         void new Audio(begin).play();
@@ -120,9 +94,6 @@ export const Game = ({ account, provider }: GameProps) => {
       void getEventContract(contract).then((gameContract) => {
         void gameContract.on(gameContract.filters.GameOpen, gameHasBeenOpen);
         void gameContract.on(gameContract.filters.GameStart, gameHasStarted);
-        void gameContract.on(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
-        void gameContract.on(gameContract.filters.PlayerJoined, onPlayerJoined);
-        void gameContract.on(gameContract.filters.PlayerKicked, onPlayerLeave);
         void gameContract.on(gameContract.filters.GoodGuysWin, onGoodGuysWin);
         void gameContract.on(gameContract.filters.BadGuysWin, onBadGuysWin);
       });
@@ -131,9 +102,6 @@ export const Game = ({ account, provider }: GameProps) => {
         void getEventContract(contract).then((gameContract) => {
           void gameContract.off(gameContract.filters.GameOpen, gameHasBeenOpen);
           void gameContract.off(gameContract.filters.GameStart, gameHasStarted);
-          void gameContract.off(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
-          void gameContract.off(gameContract.filters.PlayerJoined, onPlayerJoined);
-          void gameContract.off(gameContract.filters.PlayerKicked, onPlayerLeave);
           void gameContract.off(gameContract.filters.GoodGuysWin, onGoodGuysWin);
           void gameContract.off(gameContract.filters.BadGuysWin, onBadGuysWin);
         });
@@ -141,6 +109,51 @@ export const Game = ({ account, provider }: GameProps) => {
     }
   }, [contract]);
 
+  useEffect(() => {
+    const onPlayerNameChanged = (player: string, name: string) => {
+      const newPlayers = players.map((p) => {
+        if (p.address === getAddress(player)) {
+          return { ...p, name };
+        }
+        return p;
+      });
+      setPlayers(newPlayers);
+    };
+
+    const onPlayerJoined = async (address: string) => {
+      if (contract) {
+        const name = await getReadContract(contract).name(address);
+        const newPlayers = [...players, { address, name }];
+        console.log(newPlayers);
+        setPlayers(newPlayers);
+      }
+    };
+
+    const onPlayerLeave = (player: string) => {
+      const newPlayers = players.filter(({ address }) => address != player);
+
+      console.log(newPlayers);
+      setPlayers(newPlayers);
+    };
+
+    if (contract && players.length) {
+      console.log('on players');
+      void getEventContract(contract).then((gameContract) => {
+        void gameContract.on(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
+        void gameContract.on(gameContract.filters.PlayerJoined, onPlayerJoined);
+        void gameContract.on(gameContract.filters.PlayerKicked, onPlayerLeave);
+      });
+      return () => {
+        console.log('off players');
+        void getEventContract(contract).then((gameContract) => {
+          void gameContract.off(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
+          void gameContract.off(gameContract.filters.PlayerJoined, onPlayerJoined);
+          void gameContract.off(gameContract.filters.PlayerKicked, onPlayerLeave);
+        });
+      };
+    }
+  }, [contract, players]);
+
   if (!contract || contractLoading) {
     return <div></div>;
   }