djmil/corda-checkers
djmil/corda-checkers
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

front: use ReactRouting to manage Component's contetnt

Browse Source
This commit is contained in:
djmil 2023-10-25 10:28:56 +02:00
parent 6c46e8fb98
commit 9f4bb9454e
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/src/App.js
View File

@ -6,7 +6,6 @@ import Header from "./components/Header"
import Leaderboard from "./components/Leaderboard" import Leaderboard from "./components/Leaderboard"
import Game from "./components/Game" import Game from "./components/Game"
import About from "./components/About" import About from "./components/About"
import GameProposal from './components/Game/Proposal'
function App() { function App() {
@ -15,10 +14,13 @@ function App() {
<Header/> <Header/>
<div className="Container"> <div className="Container">
<Routes> <Routes>
<Route path="/leaderboard" element={<Leaderboard/>} />
<Route path="/game" element={<Game/>} /> <Route path="/game" element={<Game/>} />
<Route path="/game/proposal" element={<Game/>} />
<Route path="/game/active" element={<Game/>} />
<Route path="/game/archive" element={<Game/>} />
<Route path="/leaderboard" element={<Leaderboard/>} />
<Route path="/about" element={<About/>} /> <Route path="/about" element={<About/>} />
<Route path="/game/proposal" element={<GameProposal/>} />
</Routes> </Routes>
</div> </div>
</BrowserRouter> </BrowserRouter>

8
webapp/src/components/GameSelector/index.jsx
View File

@ -1,11 +1,19 @@
import './index.css'; import './index.css';
import React from 'react'; import React from 'react';
import { useLocation, matchPath } from "react-router";
import { AppData } from "../../context/data" import { AppData } from "../../context/data"
export default function Game() { export default function Game() {
const [data] = React.useContext(AppData) const [data] = React.useContext(AppData)
const { pathname } = useLocation();
const isProposalPath = matchPath("/game/proposal/*", pathname);
const isActivelPath = matchPath("/game/active/*", pathname);
const isArchivePath = matchPath("/game/archive/*", pathname);
console.log("path: Proposal ", isProposalPath != null, "Active", isActivelPath != null, "Archive", isArchivePath != null )
if (!data?.games) if (!data?.games)
return <div>Loading..</div> return <div>Loading..</div>