From 9f4bb9454ec9c1a38d17ceb5b7ddebbf9f836d6e Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Wed, 25 Oct 2023 10:28:56 +0200
Subject: [PATCH] front: use ReactRouting to manage Component's contetnt

---
 webapp/src/App.js                            | 8 +++++---
 webapp/src/components/GameSelector/index.jsx | 8 ++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/src/App.js b/webapp/src/App.js
index c2cb1c7..e83c0e3 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -6,7 +6,6 @@ import Header from "./components/Header"
 import Leaderboard from "./components/Leaderboard"
 import Game from "./components/Game"
 import About from "./components/About"
-import GameProposal from './components/Game/Proposal'
 
 function App() { 
 
@@ -15,10 +14,13 @@ function App() {
         <Header/>
         <div className="Container">
           <Routes>
-            <Route path="/leaderboard" element={<Leaderboard/>} />
             <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="/game/proposal" element={<GameProposal/>} />
           </Routes>
         </div>
     </BrowserRouter>
diff --git a/webapp/src/components/GameSelector/index.jsx b/webapp/src/components/GameSelector/index.jsx
index fdd34c5..af4ff88 100644
--- a/webapp/src/components/GameSelector/index.jsx
+++ b/webapp/src/components/GameSelector/index.jsx
@@ -1,11 +1,19 @@
 import './index.css';
 import React from 'react';
+import { useLocation, matchPath } from "react-router";
 
 import { AppData } from "../../context/data"
 
 export default function Game() {
   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)
     return <div>Loading..</div>