81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import './App.css';
|
|
import React from 'react';
|
|
import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom';
|
|
|
|
import OnlineToggle from './components/OnlineToggle';
|
|
import Wobler from './components/Wobler';
|
|
|
|
import About from "./container/About"
|
|
import Games from './container/Games';
|
|
import Leaderboard from './container/Leaderboard';
|
|
|
|
import useConfigReducer from './reducer/config';
|
|
|
|
import useUserApi from './api/user';
|
|
import useLeaderboardApi from './api/leaderboard';
|
|
import useGamesApi from './api/games';
|
|
|
|
export default function App() {
|
|
const [config, dispatcConfig] = useConfigReducer();
|
|
|
|
const user = useUserApi();
|
|
const leaderboard = useLeaderboardApi();
|
|
const games = useGamesApi();
|
|
|
|
user.api.useGetUser();
|
|
leaderboard.api.useTablePolling(config);
|
|
games.api.useGamesPolling(config);
|
|
|
|
|
|
const players = {
|
|
user: user.state,
|
|
leaderboard: leaderboard.state,
|
|
};
|
|
|
|
const isPolling = {
|
|
games: games.guide.isPolling,
|
|
leaderboard: leaderboard.guide.isPolling
|
|
}
|
|
|
|
return (
|
|
<BrowserRouter>
|
|
<Header configReducer={[config, dispatcConfig]} isPolling={isPolling}/>
|
|
<Routes>
|
|
<Route path='/about' element={<About />} />
|
|
<Route path='/games/*' element={<Games games={games} players={players} />} />
|
|
<Route path='/leaderboard' element={<Leaderboard players={players} />} />
|
|
<Route path="*" element={<Navigate to="/games" replace />}
|
|
/>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
)
|
|
}
|
|
|
|
function Header({ configReducer, isPolling }) {
|
|
const [config, dispatcConfig] = configReducer;
|
|
|
|
return (
|
|
<div className='Header'>
|
|
<h1>CordaCheckers</h1>
|
|
|
|
<OnlineToggle
|
|
isOnline={config.online}
|
|
onClick={() => dispatcConfig({ type: 'toggleOnline' })}
|
|
/>
|
|
|
|
<nav>
|
|
<NavLink to='/about'>
|
|
About
|
|
</NavLink>
|
|
|
|
<NavLink to='/games'>
|
|
<Wobler text="Games" dance={isPolling.games} />
|
|
</NavLink>
|
|
|
|
<NavLink to='/leaderboard'>
|
|
<Wobler text='Leaderboard' dance={isPolling.leaderboard} />
|
|
</NavLink>
|
|
</nav>
|
|
</div>
|
|
)
|
|
} |