From e40f07211f5f15dcb138e2520a76d13afd3c0cfd Mon Sep 17 00:00:00 2001 From: FifthWit Date: Thu, 30 Jan 2025 10:44:30 -0600 Subject: formatted with prettier --- frontend/src/components/Sidebar.tsx | 262 +++++++++++++++++++++++------------- 1 file changed, 171 insertions(+), 91 deletions(-) (limited to 'frontend/src/components/Sidebar.tsx') 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>; profile?: UserProfile; setProfile: React.Dispatch>; onUploadRun: () => void; -}; - -const Sidebar: React.FC = ({ setToken, profile, setProfile, onUploadRun }) => { +} - const [searchData, setSearchData] = React.useState(undefined); +const Sidebar: React.FC = ({ + setToken, + profile, + setProfile, + onUploadRun, +}) => { + const [searchData, setSearchData] = React.useState( + undefined + ); const [isSidebarLocked, setIsSidebarLocked] = React.useState(false); const [isSidebarOpen, setSidebarOpen] = React.useState(true); @@ -25,71 +40,86 @@ const Sidebar: React.FC = ({ 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 - const span = document.querySelectorAll("button.sidebar-button>span") as NodeListOf - 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; + const span = document.querySelectorAll( + 'button.sidebar-button>span' + ) as NodeListOf; + 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 = ({ 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 ( -