From 2303fe299098c445754943e0a4f2ef7630e22bf5 Mon Sep 17 00:00:00 2001
From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com>
Date: Wed, 4 Sep 2024 11:57:44 +0300
Subject: refactor: update sidebar for core pages, small fix in modmenu

---
 frontend/src/components/ModMenu.tsx | 39 +++++++++++++++----------------------
 frontend/src/components/Sidebar.tsx | 30 ++++++++++++++--------------
 frontend/src/pages/Games.tsx        |  4 ----
 3 files changed, 31 insertions(+), 42 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/components/ModMenu.tsx b/frontend/src/components/ModMenu.tsx
index 1fe4239..a0945eb 100644
--- a/frontend/src/components/ModMenu.tsx
+++ b/frontend/src/components/ModMenu.tsx
@@ -15,7 +15,7 @@ interface ModMenuProps {
 const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
 
   const [menu, setMenu] = React.useState<number>(0);
-  const [showButton, setShowButton] = React.useState(1)
+  const [showButton, setShowButton] = React.useState<boolean>(true);
 
   const [routeContent, setRouteContent] = React.useState<ModMenuContent>({
     id: 0,
@@ -120,13 +120,13 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
 
     const modview_block = document.querySelector("#modview_block") as HTMLElement
     if (modview_block) {
-      showButton === 1 ? modview_block.style.display = "none" : modview_block.style.display = "block"// eslint-disable-next-line 
+      showButton ? modview_block.style.display = "none" : modview_block.style.display = "block"
     }
   }, [showButton])
 
   return (
-    <div id="modview_bdlock">
-
+    <>
+      <div id="modview_block" />
       <div id='modview'>
         <div>
           <button onClick={() => setMenu(1)}>Edit Image</button>
@@ -136,15 +136,13 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
         </div>
         <div>
           {showButton ? (
-            <button onClick={() => setShowButton(0)}>Show</button>
+            <button onClick={() => setShowButton(false)}>Show</button>
           ) : (
-            <button onClick={() => { setShowButton(1); setMenu(0) }}>Hide</button>
+            <button onClick={() => { setShowButton(true); setMenu(0); }}>Hide</button>
           )}
         </div>
-      </div>
-
-      <div id='modview-menu'>
-        { // Edit Image
+      </div><div id='modview-menu'>
+        {// Edit Image
           menu === 1 && (
             <div id='modview-menu-image'>
               <div>
@@ -157,19 +155,17 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
                   <input type="file" accept='image/*' onChange={e => {
                     if (e.target.files) {
                       compressImage(e.target.files[0])
-                        .then(d => setImage(d))
+                        .then(d => setImage(d));
                     }
-                  }
-                  } /></span>
+                  }} /></span>
                 {image ? (<button onClick={() => _edit_map_summary_image()}>upload</button>) : <span></span>}
                 <img src={image} alt="" id='modview-menu-image-file' />
 
               </div>
             </div>
-          )
-        }
+          )}
 
-        { // Edit Route
+        {// Edit Route
           menu === 2 && (
             <div id='modview-menu-edit'>
               <div id='modview-route-id'>
@@ -234,10 +230,9 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
                 </p>
               </div>
             </div>
-          )
-        }
+          )}
 
-        { // Add Route
+        {// Add Route
           menu === 3 && (
             <div id='modview-menu-add'>
               <div id='modview-route-category'>
@@ -313,11 +308,9 @@ const ModMenu: React.FC<ModMenuProps> = ({ data, selectedRun, mapID }) => {
                 </p>
               </div>
             </div>
-          )
-        }
+          )}
       </div>
-
-    </div>
+    </>
   );
 };
 
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index a8834b6..d303927 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -90,13 +90,13 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile }) => {
 
   React.useEffect(() => {
     if (path === "/") { handle_sidebar_click(1) }
-    else if (path.includes("news")) { handle_sidebar_click(2) }
-    else if (path.includes("games")) { handle_sidebar_click(3) }
-    else if (path.includes("leaderboards")) { handle_sidebar_click(4) }
-    else if (path.includes("scorelog")) { handle_sidebar_click(5) }
-    else if (path.includes("profile")) { handle_sidebar_click(6) }
-    else if (path.includes("rules")) { handle_sidebar_click(8) }
-    else if (path.includes("about")) { handle_sidebar_click(9) }
+    else if (path.includes("games")) { handle_sidebar_click(2) }
+    else if (path.includes("rankings")) { handle_sidebar_click(3) }
+    // else if (path.includes("news")) { handle_sidebar_click(4) }
+    // else if (path.includes("scorelog")) { handle_sidebar_click(5) }
+    else if (path.includes("profile")) { handle_sidebar_click(4) }
+    else if (path.includes("rules")) { handle_sidebar_click(5) }
+    else if (path.includes("about")) { handle_sidebar_click(6) }
   }, [path]);
 
   return (
@@ -121,21 +121,21 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile }) => {
             <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
           </Link>
 
-          <Link to="/news" tabIndex={-1}>
-            <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
-          </Link>
-
           <Link to="/games" tabIndex={-1}>
             <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
           </Link>
 
-          <Link to="/leaderboards" tabIndex={-1}>
-            <button className='sidebar-button'><img src={FlagIcon} alt="leaderboards" /><span>Leaderboards</span></button>
+          <Link to="/rankings" tabIndex={-1}>
+            <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button>
           </Link>
 
-          <Link to="/scorelog" tabIndex={-1}>
+          {/* <Link to="/news" tabIndex={-1}>
+            <button className='sidebar-button'><img src={NewsIcon} alt="news" /><span>News</span></button>
+          </Link> */}
+
+          {/* <Link to="/scorelog" tabIndex={-1}>
             <button className='sidebar-button'><img src={TableIcon} alt="scorelogs" /><span>Score&nbsp;Logs</span></button>
-          </Link>
+          </Link> */}
         </div>
         <div id='sidebar-bottomlist'>
           <span></span>
diff --git a/frontend/src/pages/Games.tsx b/frontend/src/pages/Games.tsx
index e4b33e5..ce3db76 100644
--- a/frontend/src/pages/Games.tsx
+++ b/frontend/src/pages/Games.tsx
@@ -31,10 +31,6 @@ const Games: React.FC = () => {
 
     return (
         <div className='games-page'>
-            <section className='games-page-header'>
-                <span><b>Games list</b></span>
-            </section>
-
             <section>
                 <div className='games-page-content'>
                     <div className='games-page-item-content'>
-- 
cgit v1.2.3