From adbb1f61ce5e817122496faaabf1b566652ee28d Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <mikaylaherself@gmail.com>
Date: Sat, 4 Jun 2022 16:20:26 -0500
Subject: [PATCH] problems with repetitive callbacks

---
 client/src/App.jsx | 37 ++++++++++++++++++++++---------------
 index.js           | 32 ++++++++++++++------------------
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8dc227f..fde00b4 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -6,11 +6,11 @@ import PlayerCard from './components/PlayerCard';
 import "./styles.css";
 
 function App() {
-  const [socket, setSocket] = useState();
   const [state, setState] = useState({
     socket: null,
-    players: null,
     id: null,
+    players: [],
+    name: '',
   })
 
   useEffect(() => {
@@ -22,20 +22,22 @@ function App() {
 
   useEffect(() => {
     if (state.socket) {
-      state.socket.on('connect', (data) => {
-        console.log("connection to Express successful!");
-        console.log(data);
-
-        setState({
-          ...state,
-          id: state.socket.id,
-          players: data
+      state.socket.on('fire', (data) => {
+        console.log(`fire: ${data}`);
+        if (!state.players.length || !state.players.includes(data)) setState(() => {
+          let newPlayers = state.players;
+          newPlayers.push(data);
+          return {
+            ...state, players: newPlayers
+          }
         });
-
-        // state.socket.emit('connect', null);
-      })
+      });
     }
-  }, [state.socket]);
+  }, [state]);
+
+  const handleJoin = () => {
+    state.socket.emit('join', state.name);
+  }
 
   return (
     <div className="App">
@@ -43,8 +45,13 @@ function App() {
       {<h2>Your socket ID is: {state.id || ''}</h2>}
       {<h3>Active players: {state.players || ''}</h3>}
 
+      <input type="text" onChange={(e) => setState({...state, name: e.target.value})} />
+      <button onClick={handleJoin}>Join</button>
+
       <div className="players">
-        <PlayerCard name="Me" votes={null} />
+        <div id="messages"></div>
+        <h3>Players:</h3>
+        {state.players ? state.players.map(player => <PlayerCard name={player} votes={null}/>) : null}
       </div>
     </div>
   )
diff --git a/index.js b/index.js
index 90fe7c2..5da867d 100644
--- a/index.js
+++ b/index.js
@@ -13,27 +13,23 @@ const io = socketIO(server, {
     }
 });
 
-let players = [];
+// for more persistent state, this could be incorporated into a database table
+io.on('connection', (socket) => {
+    console.log(`new client connected: ${socket.id}`);
+
+    socket.on('join', (data) => {
+        console.log(`${data} JOINS`)
+        io.emit('fire', data);
+    });
+    
+
+    socket.on('disconnect', () => {
+        console.log(`player ${socket.id} disconnected`);
+    })
+});
 
 server.listen(8000, (err) => {
     if (err) console.log(err);
     console.log("Listening on 8000");
     
-    io.on('connection', (socket) => {
-        if (players.length === 0) players.push(socket.id);
-
-        console.log('new client connected.');
-        console.log(`players: ${players}`);
-        console.log('');
-
-        socket.emit('connection', players);
-
-        socket.on('disconnect', () => {
-            let found = players.indexOf(socket.id);
-            players = players.splice(found, 0, '');
-            console.log(`player ${socket.id} disconnected`);
-            console.log(`players: ${players}`);
-            console.log('');
-        })
-    });
 })