formatted with prettier

1 files changed, 171 insertions, 91 deletions

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 67f7f3d..71b79be 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -1,23 +1,38 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
-import { BookIcon, FlagIcon, HelpIcon, HomeIcon, LogoIcon, PortalIcon, SearchIcon, UploadIcon } from '@images/Images';
+import {
+  BookIcon,
+  FlagIcon,
+  HelpIcon,
+  HomeIcon,
+  LogoIcon,
+  PortalIcon,
+  SearchIcon,
+  UploadIcon,
+} from '@images/Images';
 import Login from '@components/Login';
 import { UserProfile } from '@customTypes/Profile';
 import { Search } from '@customTypes/Search';
 import { API } from '@api/Api';
-import "@css/Sidebar.css";
+import '@css/Sidebar.css';
 
 interface SidebarProps {
   setToken: React.Dispatch<React.SetStateAction<string | undefined>>;
   profile?: UserProfile;
   setProfile: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
   onUploadRun: () => void;
-};
-
-const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUploadRun }) => {
+}
 
-  const [searchData, setSearchData] = React.useState<Search | undefined>(undefined);
+const Sidebar: React.FC<SidebarProps> = ({
+  setToken,
+  profile,
+  setProfile,
+  onUploadRun,
+}) => {
+  const [searchData, setSearchData] = React.useState<Search | undefined>(
+    undefined
+  );
   const [isSidebarLocked, setIsSidebarLocked] = React.useState<boolean>(false);
   const [isSidebarOpen, setSidebarOpen] = React.useState<boolean>(true);
 
@@ -25,71 +40,86 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
   const path = location.pathname;
 
   const handle_sidebar_click = (clicked_sidebar_idx: number) => {
-    const btn = document.querySelectorAll("button.sidebar-button");
-    if (isSidebarOpen) { setSidebarOpen(false); _handle_sidebar_hide() }
+    const btn = document.querySelectorAll('button.sidebar-button');
+    if (isSidebarOpen) {
+      setSidebarOpen(false);
+      _handle_sidebar_hide();
+    }
     // clusterfuck
     btn.forEach((e, i) => {
-      btn[i].classList.remove("sidebar-button-selected")
-      btn[i].classList.add("sidebar-button-deselected")
-    })
-    btn[clicked_sidebar_idx].classList.add("sidebar-button-selected")
-    btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected")
+      btn[i].classList.remove('sidebar-button-selected');
+      btn[i].classList.add('sidebar-button-deselected');
+    });
+    btn[clicked_sidebar_idx].classList.add('sidebar-button-selected');
+    btn[clicked_sidebar_idx].classList.remove('sidebar-button-deselected');
   };
 
   const _handle_sidebar_hide = () => {
-    var btn = document.querySelectorAll("button.sidebar-button") as NodeListOf<HTMLElement>
-    const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf<HTMLElement>
-    const side = document.querySelector("#sidebar-list") as HTMLElement;
-    const searchbar = document.querySelector("#searchbar") as HTMLInputElement;
-    const uploadRunBtn = document.querySelector("#upload-run") as HTMLInputElement;
-    const uploadRunSpan = document.querySelector("#upload-run>span") as HTMLInputElement;
+    var btn = document.querySelectorAll(
+      'button.sidebar-button'
+    ) as NodeListOf<HTMLElement>;
+    const span = document.querySelectorAll(
+      'button.sidebar-button>span'
+    ) as NodeListOf<HTMLElement>;
+    const side = document.querySelector('#sidebar-list') as HTMLElement;
+    const searchbar = document.querySelector('#searchbar') as HTMLInputElement;
+    const uploadRunBtn = document.querySelector(
+      '#upload-run'
+    ) as HTMLInputElement;
+    const uploadRunSpan = document.querySelector(
+      '#upload-run>span'
+    ) as HTMLInputElement;
 
     if (isSidebarOpen) {
       if (profile) {
-        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
-        login.style.opacity = "1"
-        uploadRunBtn.style.width = "310px"
-        uploadRunBtn.style.padding = "0.4em 0 0 11px"
-        uploadRunSpan.style.opacity = "0"
+        const login = document.querySelectorAll(
+          '.login>button'
+        )[1] as HTMLElement;
+        login.style.opacity = '1';
+        uploadRunBtn.style.width = '310px';
+        uploadRunBtn.style.padding = '0.4em 0 0 11px';
+        uploadRunSpan.style.opacity = '0';
         setTimeout(() => {
-          uploadRunSpan.style.opacity = "1"
-        }, 100)
+          uploadRunSpan.style.opacity = '1';
+        }, 100);
       }
       setSidebarOpen(false);
-      side.style.width = "320px"
+      side.style.width = '320px';
       btn.forEach((e, i) => {
-        e.style.width = "310px"
-        e.style.padding = "0.4em 0 0 11px"
+        e.style.width = '310px';
+        e.style.padding = '0.4em 0 0 11px';
         setTimeout(() => {
-          span[i].style.opacity = "1"
-        }, 100)
+          span[i].style.opacity = '1';
+        }, 100);
       });
-      side.style.zIndex = "2"
+      side.style.zIndex = '2';
     } else {
       if (profile) {
-        const login = document.querySelectorAll(".login>button")[1] as HTMLElement;
-        login.style.opacity = "0"
-        uploadRunBtn.style.width = "40px"
-        uploadRunBtn.style.padding = "0.4em 0 0 5px"
-        uploadRunSpan.style.opacity = "0"
+        const login = document.querySelectorAll(
+          '.login>button'
+        )[1] as HTMLElement;
+        login.style.opacity = '0';
+        uploadRunBtn.style.width = '40px';
+        uploadRunBtn.style.padding = '0.4em 0 0 5px';
+        uploadRunSpan.style.opacity = '0';
       }
       setSidebarOpen(true);
-      side.style.width = "40px";
+      side.style.width = '40px';
       searchbar.focus();
       btn.forEach((e, i) => {
-        e.style.width = "40px"
-        e.style.padding = "0.4em 0 0 5px"
-        span[i].style.opacity = "0"
-      })
+        e.style.width = '40px';
+        e.style.padding = '0.4em 0 0 5px';
+        span[i].style.opacity = '0';
+      });
       setTimeout(() => {
-        side.style.zIndex = "0"
+        side.style.zIndex = '0';
       }, 300);
     }
   };
 
   const _handle_sidebar_lock = () => {
     if (!isSidebarLocked) {
-      _handle_sidebar_hide()
+      _handle_sidebar_hide();
       setIsSidebarLocked(true);
       setTimeout(() => setIsSidebarLocked(false), 300);
     }
@@ -101,98 +131,148 @@ const Sidebar: React.FC<SidebarProps> = ({ setToken, profile, setProfile, onUplo
   };
 
   React.useEffect(() => {
-    if (path === "/") { handle_sidebar_click(1) }
-    else if (path.includes("games")) { handle_sidebar_click(2) }
-    else if (path.includes("rankings")) { handle_sidebar_click(3) }
+    if (path === '/') {
+      handle_sidebar_click(1);
+    } 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) }
+    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 (
-    <div id='sidebar'>
+    <div id="sidebar">
       <Link to="/" tabIndex={-1}>
-        <div id='logo'> {/* logo */}
-          <img src={LogoIcon} alt="" height={"80px"} />
-          <div id='logo-text'>
-            <span><b>PORTAL 2</b></span><br />
+        <div id="logo">
+          {' '}
+          {/* logo */}
+          <img src={LogoIcon} alt="" height={'80px'} />
+          <div id="logo-text">
+            <span>
+              <b>PORTAL 2</b>
+            </span>
+            <br />
             <span>Least Portals Hub</span>
           </div>
         </div>
       </Link>
-      <div id='sidebar-list'> {/* List */}
-        <div id='sidebar-toplist'> {/* Top */}
-
-          <button className='sidebar-button' onClick={() => _handle_sidebar_lock()}><img src={SearchIcon} alt="" /><span>Search</span></button>
-
+      <div id="sidebar-list">
+        {' '}
+        {/* List */}
+        <div id="sidebar-toplist">
+          {' '}
+          {/* Top */}
+          <button
+            className="sidebar-button"
+            onClick={() => _handle_sidebar_lock()}
+          >
+            <img src={SearchIcon} alt="" />
+            <span>Search</span>
+          </button>
           <span></span>
-
           <Link to="/" tabIndex={-1}>
-            <button className='sidebar-button'><img src={HomeIcon} alt="homepage" /><span>Home&nbsp;Page</span></button>
+            <button className="sidebar-button">
+              <img src={HomeIcon} alt="homepage" />
+              <span>Home&nbsp;Page</span>
+            </button>
           </Link>
-
           <Link to="/games" tabIndex={-1}>
-            <button className='sidebar-button'><img src={PortalIcon} alt="games" /><span>Games</span></button>
+            <button className="sidebar-button">
+              <img src={PortalIcon} alt="games" />
+              <span>Games</span>
+            </button>
           </Link>
-
           <Link to="/rankings" tabIndex={-1}>
-            <button className='sidebar-button'><img src={FlagIcon} alt="rankings" /><span>Rankings</span></button>
+            <button className="sidebar-button">
+              <img src={FlagIcon} alt="rankings" />
+              <span>Rankings</span>
+            </button>
           </Link>
-
           {/* <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> */}
         </div>
-        <div id='sidebar-bottomlist'>
+        <div id="sidebar-bottomlist">
           <span></span>
 
-          {
-            profile && profile.profile ?
-              <button id='upload-run' className='submit-run-button' onClick={() => onUploadRun()}><img src={UploadIcon} alt="upload" /><span>Upload&nbsp;Record</span></button>
-              : 
-              <span></span>
-          }
+          {profile && profile.profile ? (
+            <button
+              id="upload-run"
+              className="submit-run-button"
+              onClick={() => onUploadRun()}
+            >
+              <img src={UploadIcon} alt="upload" />
+              <span>Upload&nbsp;Record</span>
+            </button>
+          ) : (
+            <span></span>
+          )}
 
-          <Login setToken={setToken} profile={profile} setProfile={setProfile} />
+          <Login
+            setToken={setToken}
+            profile={profile}
+            setProfile={setProfile}
+          />
 
           <Link to="/rules" tabIndex={-1}>
-            <button className='sidebar-button'><img src={BookIcon} alt="rules" /><span>Leaderboard&nbsp;Rules</span></button>
+            <button className="sidebar-button">
+              <img src={BookIcon} alt="rules" />
+              <span>Leaderboard&nbsp;Rules</span>
+            </button>
           </Link>
 
           <Link to="/about" tabIndex={-1}>
-            <button className='sidebar-button'><img src={HelpIcon} alt="about" /><span>About&nbsp;LPHUB</span></button>
+            <button className="sidebar-button">
+              <img src={HelpIcon} alt="about" />
+              <span>About&nbsp;LPHUB</span>
+            </button>
           </Link>
         </div>
       </div>
       <div>
-        <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={(e) => _handle_search_change(e.target.value)} />
-
-        <div id='search-data'>
+        <input
+          type="text"
+          id="searchbar"
+          placeholder="Search for map or a player..."
+          onChange={e => _handle_search_change(e.target.value)}
+        />
 
+        <div id="search-data">
           {searchData?.maps.map((q, index) => (
-            <Link to={`/maps/${q.id}`} className='search-map' key={index}>
+            <Link to={`/maps/${q.id}`} className="search-map" key={index}>
               <span>{q.game}</span>
               <span>{q.chapter}</span>
               <span>{q.map}</span>
             </Link>
           ))}
-          {searchData?.players.map((q, index) =>
-          (
-            <Link to={
-              profile && q.steam_id === profile.steam_id ? `/profile` :
-                `/users/${q.steam_id}`
-            } className='search-player' key={index}>
-              <img src={q.avatar_link} alt='pfp'></img>
-              <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+          {searchData?.players.map((q, index) => (
+            <Link
+              to={
+                profile && q.steam_id === profile.steam_id
+                  ? `/profile`
+                  : `/users/${q.steam_id}`
+              }
+              className="search-player"
+              key={index}
+            >
+              <img src={q.avatar_link} alt="pfp"></img>
+              <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>
+                {q.user_name}
+              </span>
             </Link>
           ))}
-
         </div>
       </div>
     </div>