edited ready button

src/App.js

@@ -9,19 +9,20 @@ import Navbar from './components/Navbar'
 import NameInput from './components/NameInput';
 
 function App() {
-  useEffect(()=>{
+
+  const [id, setId] = useState('')
+  const [redirect, setRedirect] = useState()
+
+  useEffect(() => {
     axios.get('http://localhost:3000', {
       withCredentials:true,
       mode: 'cors'
     })
     .then( response => {
-      response.data.roomId!=null ? setRedirect(true) : setRedirect(false)
+      response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
     });
   })
 
-  const [id, setId] = useState('')
-  const [redirect, setRedirect] = useState(false)
-  
   const handleExit = e => {
     e.preventDefault();
     window.addEventListener('unload', () => {
@@ -39,11 +40,15 @@ function App() {
     })
     .then(()=> setRedirect(true))
   }
+
   return (
     <Router>
-      {redirect ?  <Redirect to="/game"/> : <Redirect to="/"/>}
+      {redirect ?  <Redirect to="/game"/> : <Redirect to="/login"/>}
       <Switch>
-          <Route exact path="/">
+        <Route exact path = "/">
+          LOADING...
+        </Route>
+          <Route path="/login">
             <NameInput idCallback = {idCallback}/>
           </Route>
           <Route path="/game">

src/components/navbar-components/ReadyButton.jsx

@@ -1,18 +1,21 @@
 import React, { useState } from 'react';
+import Switch from '@material-ui/core/Switch';
 import axios from 'axios';
-const ReadyButton = ( {ready} ) => {
-    const [checked, setChecked] = useState(ready);
+
+const ReadyButton = () => {
+
+    const [checked, setChecked] = useState(false)
 
     const handleCheckboxChange = () => {
         axios.post('http://localhost:3000/player/ready',{},{withCredentials: true});
-        setChecked(state => state = !checked);
+        setChecked(!checked);
     }
     
     return(
-    <>
+    <div>
         <label>Ready: </label>
-        <input type="checkbox" onClick={handleCheckboxChange} checked={checked}/>
-    </>
+        <Switch onClick={handleCheckboxChange} checked={checked}/>
+    </div>
     )
 
 }

src/index.css

@@ -3,5 +3,4 @@ body{
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
 }