added handler for login

src/App.js

@@ -1,73 +1,51 @@
-import React, { useEffect, useState, createContext } from "react";
-import axios from "axios";
-import { io } from "socket.io-client";
-import { Beforeunload } from "react-beforeunload";
-import {
-  BrowserRouter as Router,
-  Route,
-  Redirect,
-  Switch,
-} from "react-router-dom";
+import React, { useEffect, useState, createContext } from 'react';
+import { io } from 'socket.io-client';
+import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
 
-import Gameboard from "./components/Gameboard";
-import NameInput from "./components/NameInput";
+import Gameboard from './components/Gameboard';
+import NameInput from './components/NameInput';
 
 export const PlayerDataContext = createContext();
+export const SocketContext = createContext();
 
 function App() {
-  const [playerData, setPlayerData] = useState();
-  const [redirect, setRedirect] = useState();
+    const [playerData, setPlayerData] = useState();
+    const [playerSocket, setPlayerSocket] = useState();
+    const [redirect, setRedirect] = useState();
 
-  useEffect(() => {
-    const socket = io("http://localhost:5000", { withCredentials: true });
-    socket.on("client data", (data) => {
-      data = JSON.parse(data);
-      setPlayerData(data);
-      data.roomId != null ? setRedirect(true) : setRedirect(false);
-    });
-  }, []);
+    useEffect(() => {
+        const socket = io('http://localhost:8080', { withCredentials: true });
+        socket.on('player:data', data => {
+            console.log(data);
+            data = JSON.parse(data);
+            setPlayerData(data);
+            data.roomId != null ? setRedirect(true) : setRedirect(false);
+        });
+        setPlayerSocket(socket);
+    }, []);
 
-  const handleExit = (e) => {
-    e.preventDefault();
-    window.addEventListener("unload", () => {
-      axios.post("/player/exit", { withCredentials: true });
-    });
-  };
-
-  const idCallback = () => {
-    axios
-      .get("/player/", {
-        withCredentials: true,
-      })
-      .then((response) => {
-        setPlayerData(response.data);
-        console.log(response.data);
-        setRedirect(true);
-      });
-  };
-
-  return (
-    <Router>
-      {redirect ? <Redirect to="/game" /> : <Redirect to="/login" />}
-      <Switch>
-        <Route exact path="/">
-          LOADING...
-        </Route>
-        <Route path="/login">
-          <NameInput idCallback={idCallback} />
-        </Route>
-        <Route path="/game">
-          {playerData ? (
-            <Beforeunload onBeforeunload={handleExit}>
-              <PlayerDataContext.Provider value={playerData}>
-                <Gameboard />
-              </PlayerDataContext.Provider>
-            </Beforeunload>
-          ) : null}
-        </Route>
-      </Switch>
-    </Router>
-  );
+    return (
+        <SocketContext.Provider value={playerSocket}>
+            <Router>
+                {redirect ? <Redirect to='/game' /> : <Redirect to='/login' />}
+                <Switch>
+                    <Route exact path='/'>
+                        LOADING...
+                    </Route>
+                    <Route path='/login'>
+                        <NameInput />
+                    </Route>
+                    <Route path='/game'>
+                        {playerData ? (
+                            <PlayerDataContext.Provider value={playerData}>
+                                <Gameboard />
+                            </PlayerDataContext.Provider>
+                        ) : null}
+                    </Route>
+                </Switch>
+            </Router>
+        </SocketContext.Provider>
+    );
 }
 
 export default App;

src/components/NameInput.jsx

@@ -1,30 +1,25 @@
-import React, { useState } from 'react';
-import axios from 'axios';
+import React, { useState, useContext } from "react";
+import { SocketContext } from "../App";
 
-const NameInput = ({ idCallback }) => {
-    const [inputValue, setInputValue] = useState('');
-    const handleInputChange = (e) => {
-        setInputValue(e.target.value);
-    }
+const NameInput = () => {
+  const socket = useContext(SocketContext);
+  const [inputValue, setInputValue] = useState("");
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+  };
+  const handleButtonClick = () => {
+    socket.emit("player:login", { name: inputValue });
+  };
+  return (
+    <div>
+      <input
+        placeholder="Enter name"
+        type="text"
+        onChange={handleInputChange}
+      />
+      <input type="submit" onClick={handleButtonClick} />
+    </div>
+  );
+};
 
-    const handleButtonClick = () => {
-        axios.post('/room/add',{
-            name: inputValue
-        },{
-            withCredentials:true,
-            "Content-Type": "application/json" 
-        })
-        .then(response => {
-            console.log(response.data);
-            idCallback(response.data);
-        })
-    }
-    return(
-        <div>
-            <input placeholder = "Enter name" type="text" onChange={handleInputChange}/>
-            <input type="submit" onClick={handleButtonClick}/>
-        </div>
-    )
-}
-
-export default NameInput;
+export default NameInput;