From e26889cd2762c29b34cc09e3bb824f45ca0bcb3b Mon Sep 17 00:00:00 2001
From: Stanleyowskiki <s.t.malinski@gmail.com>
Date: Wed, 27 Mar 2024 09:21:46 +0100
Subject: [PATCH] Fixing links and moving about to appropriete place

---
 src/App.js   | 81 +++++++++++++++++++++++++++++++++++-----------------
 src/App.scss |  3 +-
 src/index.js |  5 ++--
 3 files changed, 59 insertions(+), 30 deletions(-)

diff --git a/src/App.js b/src/App.js
index 533fec4..b8993b4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,38 +1,67 @@
+import { useEffect, useState} from 'react';
 import './App.scss'
 import User from "./User/User";
 import {Link} from "react-router-dom";
+import About from './about';
+
+function Content(mode) {
+    if (mode === 'home') {
+        return <div>Home</div>
+    } else if (mode === 'tournaments') {
+        return <div>Tournaments</div>
+    } else if (mode === 'games') {
+        return <div>Games</div>
+    } else if (mode === 'about') {
+        return <About/>
+    } else {
+        return <div>Home</div>
+    }
+
+}
+
+function App(props) {
+    const {mode} = props
+    const [content, setContent] = useState('home')
+
+    useEffect(() => {
+        setContent(Content(mode))
+    }, [mode])
 
-function App() {
     return (
         <div className="app">
-            <div className="title">
-                <h1>Bot-Wars</h1>
-                <div className="login-btns">
-                    <User isLoggedIn={false}/>
+            <div className='topper'>
+                <div className="title">
+                    <h1>Bot-Wars</h1>
+                    <div className="login-btns">
+                        <User isLoggedIn={false}/>
+                    </div>
                 </div>
-            </div>
-            <div className="menu-btns">
-                <div className="menu-btn">
-                    <Link to="index.html">
-                        <button className="btn">Home</button>
-                    </Link>
-                </div>
-                <div className="menu-btn">
-                    <Link to="tournaments">
-                        <button className="btn">Tournaments</button>
-                    </Link>
-                </div>
-                <div className="menu-btn">
-                    <Link to="games">
-                        <button className="btn">Games</button>
-                    </Link>
-                </div>
-                <div className="menu-btn">
-                    <Link to="about">
-                        <button className="btn">About</button>
-                    </Link>
+                <div className="menu-btns">
+                    <div className="menu-btn">
+                        <Link to="/" replace={true}>
+                            <button className="btn">Home</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="/tournaments" replace={true}>
+                            <button className="btn">Tournaments</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="/games" replace={true}>
+                            <button className="btn">Games</button>
+                        </Link>
+                    </div>
+                    <div className="menu-btn">
+                        <Link to="/about" replace={true}>
+                            <button className="btn">About</button>
+                        </Link>
+                    </div>
                 </div>
             </div>
+            <div className="content">
+                {content}
+            </div>
         </div>
     )
 }
diff --git a/src/App.scss b/src/App.scss
index 831be03..d159702 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,7 +5,6 @@
 }
 
 .app {
-
   h1:hover {
     cursor: default;
   }
@@ -45,4 +44,6 @@
   .login-btn {
     width: 100%;
   }
+
+  height: 100vh;
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e2ffd64..f1ed2c4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,7 +16,6 @@ import AddTournamentForm from "./forms/AddTournamentForm";
 import EditTournamentForm from "./forms/EditTournamentForm";
 import TournamentDetails from "./Tournaments/TournamentDetails";
 import ProfileView from "./User/ProfileView/ProfileView";
-import About from "./about.js";
 import { Provider } from 'react-redux';
 import store from './User/store';
 import { getListOfTournaments } from './Tournaments/getListOfTournaments';
@@ -29,7 +28,7 @@ const tournaments = getListOfTournaments();
 const router = createBrowserRouter([
     {
         path: "/",
-        element: <App/>,
+        element: <App mode={"home"}/>,
     },
     {
         path: "/player/:id",
@@ -76,7 +75,7 @@ const router = createBrowserRouter([
     },
     {
         path: "/about",
-        element: <About/>,
+        element: <App mode={"about"}/>,
     }
 ]);