refactor TopBar

src/renderer/components/TopBar.tsx

@@ -12,8 +12,6 @@ import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { useLocation, useNavigate } from 'react-router-dom';
 import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
 import { useEffect, useRef, useState } from 'react';
-import { Tooltip } from '@mui/material';
-import { fetchCoins } from '../api';
 import CustomTooltip from './Notifications/CustomTooltip';
 import CoinsDisplay from './CoinsDisplay';
 import { HeadAvatar } from './HeadAvatar';
@@ -45,17 +43,43 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   const isLoginPage = location.pathname === '/login';
   const [isAuthed, setIsAuthed] = useState(false);
   const isLaunchPage = location.pathname.startsWith('/launch');
-  const isVersionsExplorerPage = location.pathname.startsWith('/');
   const isRegistrationPage = location.pathname === '/registration';
   const navigate = useNavigate();
-  const [value, setValue] = useState<number | false>(false);
-  const [activePage, setActivePage] = useState('versions');
   const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
   const [skinUrl, setSkinUrl] = useState<string>('');
   const [avatarAnchorEl, setAvatarAnchorEl] = useState<null | HTMLElement>(
     null,
   );
-  const [menuOpen, setMenuOpen] = useState<boolean>(false);
+
+  const TAB_ROUTES: Array<{
+    value: number;
+    match: (p: string) => boolean;
+    to: string;
+  }> = [
+    {
+      value: 0,
+      match: (p) => p === '/news',
+      to: '/news',
+    },
+    {
+      value: 1,
+      match: (p) => p === '/',
+      to: '/',
+    },
+    {
+      value: 2,
+      match: (p) => p.startsWith('/shop'),
+      to: '/shop',
+    },
+    {
+      value: 3,
+      match: (p) => p.startsWith('/marketplace'),
+      to: '/marketplace',
+    },
+  ];
+
+  const selectedTab =
+    TAB_ROUTES.find((r) => r.match(location.pathname))?.value ?? false;
 
   useEffect(() => {
     const saved = localStorage.getItem('launcher_config');
@@ -77,40 +101,25 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
     setAvatarAnchorEl(null);
   };
 
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
-    if (newValue === 0) {
-      navigate('/news');
-    } else if (newValue === 1) {
-      navigate('/');
-    } else if (newValue === 2) {
-      navigate('/profile');
-    } else if (newValue === 3) {
-      navigate('/shop');
-    } else if (newValue === 4) {
-      navigate('/marketplace');
-    }
-  };
-
-  useEffect(() => {
-    if (location.pathname === '/news') {
-      setValue(0);
-      setActivePage('news');
-    } else if (location.pathname === '/') {
-      setValue(1);
-      setActivePage('versions');
-    } else if (location.pathname.startsWith('/shop')) {
-      setValue(3);
-      setActivePage('shop');
-    } else if (location.pathname.startsWith('/marketplace')) {
-      setValue(4);
-      setActivePage('marketplace');
-    } else {
-      // любые страницы не из TopBar: /profile, /daily, /dailyquests, и т.д.
-      setValue(false);
-      setActivePage('');
-    }
-  }, [location.pathname]);
+  // useEffect(() => {
+  //   if (location.pathname === '/news') {
+  //     setValue(0);
+  //     setActivePage('news');
+  //   } else if (location.pathname === '/') {
+  //     setValue(1);
+  //     setActivePage('versions');
+  //   } else if (location.pathname.startsWith('/shop')) {
+  //     setValue(3);
+  //     setActivePage('shop');
+  //   } else if (location.pathname.startsWith('/marketplace')) {
+  //     setValue(4);
+  //     setActivePage('marketplace');
+  //   } else {
+  //     // любые страницы не из TopBar: /profile, /daily, /dailyquests, и т.д.
+  //     setValue(false);
+  //     setActivePage('');
+  //   }
+  // }, [location.pathname]);
 
   const handleLaunchPage = () => {
     navigate('/');
@@ -158,29 +167,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   // };
 
   // Функция для получения количества монет
-  const fetchCoinsData = async () => {
-    if (!username) return;
-
-    try {
-      const coinsData = await fetchCoins(username);
-      setCoins(coinsData.coins);
-    } catch (error) {
-      console.error('Ошибка при получении количества монет:', error);
-    }
-  };
-
-  useEffect(() => {
-    if (username) {
-      fetchCoinsData();
-
-      // Создаем интервалы для периодического обновления данных
-      const coinsInterval = setInterval(fetchCoinsData, 60000);
-
-      return () => {
-        clearInterval(coinsInterval);
-      };
-    }
-  }, [username]);
 
   const logout = () => {
     localStorage.removeItem('launcher_config');
@@ -271,8 +257,13 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
               TransitionProps={{ timeout: 100 }}
             >
               <Tabs
-                value={value}
-                onChange={handleChange}
+                value={selectedTab}
+                onChange={(_, newValue) => {
+                  const route = TAB_ROUTES.find((r) => r.value === newValue);
+                  if (route) {
+                    navigate(route.to);
+                  }
+                }}
                 aria-label="basic tabs example"
                 variant="scrollable"
                 scrollButtons={false}
@@ -282,9 +273,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 <Tab
                   label="Новости"
                   disableRipple={true}
-                  onClick={() => {
-                    setActivePage('news');
-                  }}
                   sx={{
                     color: 'white',
                     fontFamily: 'Benzin-Bold',
@@ -301,9 +289,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 <Tab
                   label="Версии"
                   disableRipple={true}
-                  onClick={() => {
-                    setActivePage('versions');
-                  }}
                   sx={{
                     color: 'white',
                     fontFamily: 'Benzin-Bold',
@@ -320,9 +305,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 <Tab
                   label="Магазин"
                   disableRipple={true}
-                  onClick={() => {
-                    setActivePage('shop');
-                  }}
                   sx={{
                     color: 'white',
                     fontFamily: 'Benzin-Bold',
@@ -339,9 +321,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                 <Tab
                   label="Рынок"
                   disableRipple={true}
-                  onClick={() => {
-                    setActivePage('marketplace');
-                  }}
                   sx={{
                     color: 'white',
                     fontFamily: 'Benzin-Bold',
@@ -583,7 +562,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
             color="primary"
             onClick={() => {
               logout();
-              setMenuOpen(false);
             }}
             sx={{
               width: '8vw',