import axios from 'axios';
-import React, { useEffect } from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+import Header from './common/Header';
import Front from './pages/Front';
+import Tournament from './pages/Tournament';
+import UserContext from '../helpers/UserContext';
const App = () => {
+ const [user, setUser] = useState(null);
+
+ const checkAuth = async () => {
+ try {
+ const response = await axios.get('/api/user');
+ setUser(response.data);
+ } catch (e) {
+ setUser(null);
+ }
+ };
+
+ const doLogout = async () => {
+ await axios.post('/logout');
+ await checkAuth();
+ };
+
+ useEffect(() => {
+ let timer = null;
+ axios
+ .get('/sanctum/csrf-cookie')
+ .then(() => {
+ checkAuth();
+ timer = setInterval(checkAuth, 15 * 60 * 1000);
+ });
+ return () => {
+ if (timer) clearInterval(timer);
+ };
+ }, []);
+
useEffect(() => {
- axios.get('/sanctum/csrf-cookie');
+ window.Echo.channel('App.Control')
+ .listen('PleaseRefresh', () => {
+ location.reload();
+ });
+ return () => {
+ window.Echo.leave('App.Control');
+ };
}, []);
return <BrowserRouter>
- <Routes>
- <Route path="*" element={<Front />} />
- </Routes>
+ <UserContext.Provider value={user}>
+ <Header doLogout={doLogout} />
+ {user ?
+ <Routes>
+ <Route path="tournaments/:id" element={<Tournament />} />
+ <Route path="*" element={<Navigate to="/tournaments/1" />} />
+ </Routes>
+ : <Front />}
+ </UserContext.Provider>
</BrowserRouter>;
};