diff options
| author | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
|---|---|---|
| committer | FifthWit <fifthwitbusiness@gmail.com> | 2025-01-30 13:11:48 -0600 |
| commit | 81342e2579165ebfdb28c749dc5225141721a419 (patch) | |
| tree | 8e5759c20b92408048fe5ac44f48e2df2a00ab9b /frontend/src/components/Sidebar.tsx | |
| parent | fixed issues with useCallback (diff) | |
| download | lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.gz lphub-81342e2579165ebfdb28c749dc5225141721a419.tar.bz2 lphub-81342e2579165ebfdb28c749dc5225141721a419.zip | |
switched to double quotes
Diffstat (limited to 'frontend/src/components/Sidebar.tsx')
| -rw-r--r-- | frontend/src/components/Sidebar.tsx | 100 |
1 files changed, 50 insertions, 50 deletions
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 8216cff..b55d56b 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx | |||
| @@ -1,5 +1,5 @@ | |||
| 1 | import React, { useCallback } from 'react'; | 1 | import React, { useCallback } from "react"; |
| 2 | import { Link, useLocation } from 'react-router-dom'; | 2 | import { Link, useLocation } from "react-router-dom"; |
| 3 | 3 | ||
| 4 | import { | 4 | import { |
| 5 | BookIcon, | 5 | BookIcon, |
| @@ -10,12 +10,12 @@ import { | |||
| 10 | PortalIcon, | 10 | PortalIcon, |
| 11 | SearchIcon, | 11 | SearchIcon, |
| 12 | UploadIcon, | 12 | UploadIcon, |
| 13 | } from '@images/Images'; | 13 | } from "@images/Images"; |
| 14 | import Login from '@components/Login'; | 14 | import Login from "@components/Login"; |
| 15 | import { UserProfile } from '@customTypes/Profile'; | 15 | import { UserProfile } from "@customTypes/Profile"; |
| 16 | import { Search } from '@customTypes/Search'; | 16 | import { Search } from "@customTypes/Search"; |
| 17 | import { API } from '@api/Api'; | 17 | import { API } from "@api/Api"; |
| 18 | import '@css/Sidebar.css'; | 18 | import "@css/Sidebar.css"; |
| 19 | 19 | ||
| 20 | interface SidebarProps { | 20 | interface SidebarProps { |
| 21 | setToken: React.Dispatch<React.SetStateAction<string | undefined>>; | 21 | setToken: React.Dispatch<React.SetStateAction<string | undefined>>; |
| @@ -41,81 +41,81 @@ const Sidebar: React.FC<SidebarProps> = ({ | |||
| 41 | 41 | ||
| 42 | const _handle_sidebar_hide = useCallback(() => { | 42 | const _handle_sidebar_hide = useCallback(() => { |
| 43 | var btn = document.querySelectorAll( | 43 | var btn = document.querySelectorAll( |
| 44 | 'button.sidebar-button' | 44 | "button.sidebar-button" |
| 45 | ) as NodeListOf<HTMLElement>; | 45 | ) as NodeListOf<HTMLElement>; |
| 46 | const span = document.querySelectorAll( | 46 | const span = document.querySelectorAll( |
| 47 | 'button.sidebar-button>span' | 47 | "button.sidebar-button>span" |
| 48 | ) as NodeListOf<HTMLElement>; | 48 | ) as NodeListOf<HTMLElement>; |
| 49 | const side = document.querySelector('#sidebar-list') as HTMLElement; | 49 | const side = document.querySelector("#sidebar-list") as HTMLElement; |
| 50 | const searchbar = document.querySelector('#searchbar') as HTMLInputElement; | 50 | const searchbar = document.querySelector("#searchbar") as HTMLInputElement; |
| 51 | const uploadRunBtn = document.querySelector( | 51 | const uploadRunBtn = document.querySelector( |
| 52 | '#upload-run' | 52 | "#upload-run" |
| 53 | ) as HTMLInputElement; | 53 | ) as HTMLInputElement; |
| 54 | const uploadRunSpan = document.querySelector( | 54 | const uploadRunSpan = document.querySelector( |
| 55 | '#upload-run>span' | 55 | "#upload-run>span" |
| 56 | ) as HTMLInputElement; | 56 | ) as HTMLInputElement; |
| 57 | 57 | ||
| 58 | if (isSidebarOpen) { | 58 | if (isSidebarOpen) { |
| 59 | if (profile) { | 59 | if (profile) { |
| 60 | const login = document.querySelectorAll( | 60 | const login = document.querySelectorAll( |
| 61 | '.login>button' | 61 | ".login>button" |
| 62 | )[1] as HTMLElement; | 62 | )[1] as HTMLElement; |
| 63 | login.style.opacity = '1'; | 63 | login.style.opacity = "1"; |
| 64 | uploadRunBtn.style.width = '310px'; | 64 | uploadRunBtn.style.width = "310px"; |
| 65 | uploadRunBtn.style.padding = '0.4em 0 0 11px'; | 65 | uploadRunBtn.style.padding = "0.4em 0 0 11px"; |
| 66 | uploadRunSpan.style.opacity = '0'; | 66 | uploadRunSpan.style.opacity = "0"; |
| 67 | setTimeout(() => { | 67 | setTimeout(() => { |
| 68 | uploadRunSpan.style.opacity = '1'; | 68 | uploadRunSpan.style.opacity = "1"; |
| 69 | }, 100); | 69 | }, 100); |
| 70 | } | 70 | } |
| 71 | setSidebarOpen(false); | 71 | setSidebarOpen(false); |
| 72 | side.style.width = '320px'; | 72 | side.style.width = "320px"; |
| 73 | btn.forEach((e, i) => { | 73 | btn.forEach((e, i) => { |
| 74 | e.style.width = '310px'; | 74 | e.style.width = "310px"; |
| 75 | e.style.padding = '0.4em 0 0 11px'; | 75 | e.style.padding = "0.4em 0 0 11px"; |
| 76 | setTimeout(() => { | 76 | setTimeout(() => { |
| 77 | span[i].style.opacity = '1'; | 77 | span[i].style.opacity = "1"; |
| 78 | }, 100); | 78 | }, 100); |
| 79 | }); | 79 | }); |
| 80 | side.style.zIndex = '2'; | 80 | side.style.zIndex = "2"; |
| 81 | } else { | 81 | } else { |
| 82 | if (profile) { | 82 | if (profile) { |
| 83 | const login = document.querySelectorAll( | 83 | const login = document.querySelectorAll( |
| 84 | '.login>button' | 84 | ".login>button" |
| 85 | )[1] as HTMLElement; | 85 | )[1] as HTMLElement; |
| 86 | login.style.opacity = '0'; | 86 | login.style.opacity = "0"; |
| 87 | uploadRunBtn.style.width = '40px'; | 87 | uploadRunBtn.style.width = "40px"; |
| 88 | uploadRunBtn.style.padding = '0.4em 0 0 5px'; | 88 | uploadRunBtn.style.padding = "0.4em 0 0 5px"; |
| 89 | uploadRunSpan.style.opacity = '0'; | 89 | uploadRunSpan.style.opacity = "0"; |
| 90 | } | 90 | } |
| 91 | setSidebarOpen(true); | 91 | setSidebarOpen(true); |
| 92 | side.style.width = '40px'; | 92 | side.style.width = "40px"; |
| 93 | searchbar.focus(); | 93 | searchbar.focus(); |
| 94 | btn.forEach((e, i) => { | 94 | btn.forEach((e, i) => { |
| 95 | e.style.width = '40px'; | 95 | e.style.width = "40px"; |
| 96 | e.style.padding = '0.4em 0 0 5px'; | 96 | e.style.padding = "0.4em 0 0 5px"; |
| 97 | span[i].style.opacity = '0'; | 97 | span[i].style.opacity = "0"; |
| 98 | }); | 98 | }); |
| 99 | setTimeout(() => { | 99 | setTimeout(() => { |
| 100 | side.style.zIndex = '0'; | 100 | side.style.zIndex = "0"; |
| 101 | }, 300); | 101 | }, 300); |
| 102 | } | 102 | } |
| 103 | }, [isSidebarOpen, profile]); | 103 | }, [isSidebarOpen, profile]); |
| 104 | 104 | ||
| 105 | const handle_sidebar_click = useCallback( | 105 | const handle_sidebar_click = useCallback( |
| 106 | (clicked_sidebar_idx: number) => { | 106 | (clicked_sidebar_idx: number) => { |
| 107 | const btn = document.querySelectorAll('button.sidebar-button'); | 107 | const btn = document.querySelectorAll("button.sidebar-button"); |
| 108 | if (isSidebarOpen) { | 108 | if (isSidebarOpen) { |
| 109 | setSidebarOpen(false); | 109 | setSidebarOpen(false); |
| 110 | _handle_sidebar_hide(); | 110 | _handle_sidebar_hide(); |
| 111 | } | 111 | } |
| 112 | // clusterfuck | 112 | // clusterfuck |
| 113 | btn.forEach((e, i) => { | 113 | btn.forEach((e, i) => { |
| 114 | btn[i].classList.remove('sidebar-button-selected'); | 114 | btn[i].classList.remove("sidebar-button-selected"); |
| 115 | btn[i].classList.add('sidebar-button-deselected'); | 115 | btn[i].classList.add("sidebar-button-deselected"); |
| 116 | }); | 116 | }); |
| 117 | btn[clicked_sidebar_idx].classList.add('sidebar-button-selected'); | 117 | btn[clicked_sidebar_idx].classList.add("sidebar-button-selected"); |
| 118 | btn[clicked_sidebar_idx].classList.remove('sidebar-button-deselected'); | 118 | btn[clicked_sidebar_idx].classList.remove("sidebar-button-deselected"); |
| 119 | }, | 119 | }, |
| 120 | [isSidebarOpen, _handle_sidebar_hide] | 120 | [isSidebarOpen, _handle_sidebar_hide] |
| 121 | ); | 121 | ); |
| @@ -134,20 +134,20 @@ const Sidebar: React.FC<SidebarProps> = ({ | |||
| 134 | }; | 134 | }; |
| 135 | 135 | ||
| 136 | React.useEffect(() => { | 136 | React.useEffect(() => { |
| 137 | if (path === '/') { | 137 | if (path === "/") { |
| 138 | handle_sidebar_click(1); | 138 | handle_sidebar_click(1); |
| 139 | } else if (path.includes('games')) { | 139 | } else if (path.includes("games")) { |
| 140 | handle_sidebar_click(2); | 140 | handle_sidebar_click(2); |
| 141 | } else if (path.includes('rankings')) { | 141 | } else if (path.includes("rankings")) { |
| 142 | handle_sidebar_click(3); | 142 | handle_sidebar_click(3); |
| 143 | } | 143 | } |
| 144 | // else if (path.includes("news")) { handle_sidebar_click(4) } | 144 | // else if (path.includes("news")) { handle_sidebar_click(4) } |
| 145 | // else if (path.includes("scorelog")) { handle_sidebar_click(5) } | 145 | // else if (path.includes("scorelog")) { handle_sidebar_click(5) } |
| 146 | else if (path.includes('profile')) { | 146 | else if (path.includes("profile")) { |
| 147 | handle_sidebar_click(4); | 147 | handle_sidebar_click(4); |
| 148 | } else if (path.includes('rules')) { | 148 | } else if (path.includes("rules")) { |
| 149 | handle_sidebar_click(5); | 149 | handle_sidebar_click(5); |
| 150 | } else if (path.includes('about')) { | 150 | } else if (path.includes("about")) { |
| 151 | handle_sidebar_click(6); | 151 | handle_sidebar_click(6); |
| 152 | } | 152 | } |
| 153 | }, [path, handle_sidebar_click]); | 153 | }, [path, handle_sidebar_click]); |
| @@ -156,9 +156,9 @@ const Sidebar: React.FC<SidebarProps> = ({ | |||
| 156 | <div id="sidebar"> | 156 | <div id="sidebar"> |
| 157 | <Link to="/" tabIndex={-1}> | 157 | <Link to="/" tabIndex={-1}> |
| 158 | <div id="logo"> | 158 | <div id="logo"> |
| 159 | {' '} | 159 | {" "} |
| 160 | {/* logo */} | 160 | {/* logo */} |
| 161 | <img src={LogoIcon} alt="" height={'80px'} /> | 161 | <img src={LogoIcon} alt="" height={"80px"} /> |
| 162 | <div id="logo-text"> | 162 | <div id="logo-text"> |
| 163 | <span> | 163 | <span> |
| 164 | <b>PORTAL 2</b> | 164 | <b>PORTAL 2</b> |
| @@ -169,10 +169,10 @@ const Sidebar: React.FC<SidebarProps> = ({ | |||
| 169 | </div> | 169 | </div> |
| 170 | </Link> | 170 | </Link> |
| 171 | <div id="sidebar-list"> | 171 | <div id="sidebar-list"> |
| 172 | {' '} | 172 | {" "} |
| 173 | {/* List */} | 173 | {/* List */} |
| 174 | <div id="sidebar-toplist"> | 174 | <div id="sidebar-toplist"> |
| 175 | {' '} | 175 | {" "} |
| 176 | {/* Top */} | 176 | {/* Top */} |
| 177 | <button | 177 | <button |
| 178 | className="sidebar-button" | 178 | className="sidebar-button" |