71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import axios from 'axios';
|
|
|
|
import { Beforeunload } from 'react-beforeunload';
|
|
import { BrowserRouter as Router , Route , Redirect, Switch } from 'react-router-dom';
|
|
|
|
import Gameboard from './components/Gameboard'
|
|
import Navbar from './components/Navbar'
|
|
import NameInput from './components/NameInput';
|
|
|
|
function App() {
|
|
|
|
const [id, setId] = useState('')
|
|
const [redirect, setRedirect] = useState()
|
|
|
|
useEffect(() => {
|
|
console.log("id", id);
|
|
axios.get('http://localhost:3000/player', {
|
|
withCredentials:true,
|
|
mode: 'cors'
|
|
})
|
|
.then( response => {
|
|
console.log(response);
|
|
setId(response.data.playerId);
|
|
response.data.roomId!=null ? setRedirect(true) : setRedirect(false);
|
|
});
|
|
},[id])
|
|
|
|
const handleExit = e => {
|
|
e.preventDefault();
|
|
window.addEventListener('unload', () => {
|
|
axios.post('http://localhost:3000/player/exit', {withCredentials:true, mode: 'cors'})
|
|
});
|
|
}
|
|
|
|
const idCallback = (id)=>{
|
|
console.log(id);
|
|
|
|
axios.get('http://localhost:3000/player/', {
|
|
withCredentials:true,
|
|
mode: 'cors',
|
|
headers: { "Content-Type": "application/json" },
|
|
})
|
|
.then(response => {
|
|
setId(response.data.playerId);
|
|
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">
|
|
<Beforeunload onBeforeunload={handleExit}>
|
|
<Gameboard id={id}/>
|
|
</Beforeunload>
|
|
</Route>
|
|
</Switch>
|
|
</Router>
|
|
);
|
|
}
|
|
|
|
export default App;
|