added socket listener

src/App.js

@@ -3,6 +3,7 @@ import "../node_modules/leaflet-draw/dist/leaflet.draw.css";
 import "./App.css";
 import UserMap from "./components/UserMap";
 import Header from "./components/Header";
+import ClientSocket from "./components/Socket";
 
 class App extends Component {
   constructor() {
@@ -57,6 +58,10 @@ class App extends Component {
           handleLayerChange={this.handleLayerChange}
           handleGameChange={this.handleGameChange}
         />
+        ,
+        {this.state.currentGameId && (
+          <ClientSocket gameId={this.state.currentGameId} />
+        )}
       </div>
     );
   }

src/components/Socket.js

+import React from "react";
+import io from "socket.io-client";
+
+const socketUrl = process.env.REACT_APP_API_URL;
+export default class ClientSocket extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      // stores the socket object for notifications
+      sock: null,
+      // stores updates sent by socket
+      update: null
+    };
+  }
+
+  // iniate the socket on component mount
+  componentWillMount() {
+    console.log("iniated socket");
+    this.initSocket();
+  }
+
+  // disconnect the socket on component dismount
+  componentWillUnmount() {
+    this.state.sock.disconnect();
+  }
+
+  initSocket = () => {
+    const socket = io(socketUrl);
+    // set the socket to listen gameId-thread
+    socket.on(this.props.gameId, data => {
+      // check socket update type
+      this.setState({ update: data });
+      console.log(this.state.update);
+    });
+    this.setState({ sock: socket });
+  };
+
+  render() {
+    return null;
+  }
+}