From 4627dec1be33a4dafbaf95be626ad6fee9207b69 Mon Sep 17 00:00:00 2001 From: FifthWit Date: Thu, 30 Jan 2025 10:59:23 -0600 Subject: fixed useCallback() funcs --- frontend/src/components/Sidebar.tsx | 41 ++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 19 deletions(-) (limited to 'frontend') diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index 71b79be..8216cff 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { @@ -39,22 +39,7 @@ const Sidebar: React.FC = ({ const location = useLocation(); 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(); - } - // 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'); - }; - - const _handle_sidebar_hide = () => { + const _handle_sidebar_hide = useCallback(() => { var btn = document.querySelectorAll( 'button.sidebar-button' ) as NodeListOf; @@ -115,7 +100,25 @@ const Sidebar: React.FC = ({ side.style.zIndex = '0'; }, 300); } - }; + }, [isSidebarOpen, profile]); + + const handle_sidebar_click = useCallback( + (clicked_sidebar_idx: number) => { + 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'); + }, + [isSidebarOpen, _handle_sidebar_hide] + ); const _handle_sidebar_lock = () => { if (!isSidebarLocked) { @@ -147,7 +150,7 @@ const Sidebar: React.FC = ({ } else if (path.includes('about')) { handle_sidebar_click(6); } - }, [path]); + }, [path, handle_sidebar_click]); return (