fix selected chain tab highlight

chain4travel · Feb 28, 2024 · cd9b0d2 · cd9b0d2
1 parent d5c2468
commit cd9b0d2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 32 deletions.
diff --git a/src/app/components/NavBar/Links.tsx b/src/app/components/NavBar/Links.tsx
@@ -1,13 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React, { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import Box from '@mui/material/Box'
-import { ChainType } from 'utils/types/chain-type'
-import { RoutesConfig } from 'utils/route-paths'
-import { STATISTICS_LINK } from '../../../utils/types/statistics-type'
 import Tab from '@mui/material/Tab'
 import Tabs from '@mui/material/Tabs'
-import { getChainTypeFromUrl } from 'utils/route-utils'
+import { RoutesConfig } from 'utils/route-paths'
+import { ChainType } from 'utils/types/chain-type'
+import { STATISTICS_LINK } from '../../../utils/types/statistics-type'
 
 function a11yProps(index: number) {
     return {
@@ -32,22 +31,18 @@ const activeTab = (path: string): number => {
 export default function Links() {
     const routes = RoutesConfig()
     const location = useLocation()
-    const [value, setValue] = useState(activeTab(getChainTypeFromUrl()))
     const handleChange = (event: React.SyntheticEvent, newValue: number) => {
         if (location.pathname !== routes.MAINNET) {
             if (newValue === 0) navigate(routes.CCHAIN)
             else if (newValue === 1) navigate(routes.XCHAIN)
             else if (newValue === 2) navigate(routes.PCHAIN)
             else if (newValue === 5) navigate(routes.STATISTICS)
-            if (newValue !== 3 && newValue !== 4) setValue(newValue)
         }
     }
-    useEffect(() => {
-        if (location.pathname === routes.MAINNET) setValue(0)
-        else if (location.pathname === routes.CCHAIN) setValue(0)
-        else if (location.pathname === routes.XCHAIN) setValue(1)
-        else if (location.pathname === routes.PCHAIN) setValue(2)
-        else if (location.pathname === routes.STATISTICS) setValue(5)
+
+    const activeChainTab = useMemo(() => {
+        let activeChain = location.pathname.split('/')[3]
+        return activeTab(activeChain)
     }, [location])
 
     let navigate = useNavigate()
@@ -61,7 +56,7 @@ export default function Links() {
             }}
         >
             <Tabs
-                value={value}
+                value={activeChainTab}
                 onChange={handleChange}
                 textColor="secondary"
                 // remove the underline

diff --git a/src/app/components/NavBar/SearchInput.tsx b/src/app/components/NavBar/SearchInput.tsx
@@ -1,36 +1,42 @@
-import React, { useEffect, useState } from 'react'
-import OutlinedInput from '@mui/material/OutlinedInput'
-import InputAdornment from '@mui/material/InputAdornment'
 import SearchIcon from '@mui/icons-material/Search'
+import {
+    Avatar,
+    ClickAwayListener,
+    ListItemIcon,
+    MenuItem,
+    MenuList,
+    useTheme,
+} from '@mui/material'
 import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
+import InputAdornment from '@mui/material/InputAdornment'
 import Modal from '@mui/material/Modal'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import Typography from '@mui/material/Typography'
+import { getChainID } from 'api/utils'
 import useWidth from 'app/hooks/useWidth'
 import axios, { AxiosError, AxiosResponse } from 'axios'
-import { MenuItem, MenuList, ListItemIcon, Avatar, ClickAwayListener } from '@mui/material'
-import { useTheme } from '@mui/material'
-import { ISearchMenu, SearchMenuItem } from 'types/search-menu'
-import { debounce } from './utils/debounce'
+import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { useAppSelector } from 'store/configureStore'
 import { selectMagellanAddress } from 'store/app-config'
-import { searchApi } from 'utils/magellan-api-utils'
+import { useAppSelector } from 'store/configureStore'
 import {
+    MagellanAddressResponse,
+    MagellanAddressSearchResult,
+    MagellanCBlockSearchResult,
+    MagellanCTransactionSearchResult,
     MagellanSearchResultElementType,
     MagellanXPTransactionSearchResult,
-    MagellanCTransactionSearchResult,
-    MagellanCBlockSearchResult,
-    MagellanAddressSearchResult,
-    MagellanAddressResponse,
 } from 'types/magellan-types'
+import { ISearchMenu, SearchMenuItem } from 'types/search-menu'
+import { searchApi } from 'utils/magellan-api-utils'
+import { RoutesConfig } from 'utils/route-paths'
 import {
-    GetBlockDetailsPath,
     GetAddressDetailsPath,
+    GetBlockDetailsPath,
     GetTransactionDetailsPath,
 } from 'utils/route-utils'
 import { ChainType } from 'utils/types/chain-type'
-import { getChainID } from 'api/utils'
-import { RoutesConfig } from 'utils/route-paths'
+import { debounce } from './utils/debounce'
 
 function OutlinedSearchInput() {
     const routesConfig = RoutesConfig()
@@ -374,7 +380,6 @@ const SearchResultMenu = ({ children }: { children?: React.ReactNode }) => {
 }
 
 const SearchResultMenuList = ({ menuItems }: { menuItems: SearchMenuItem[] }) => {
-    console.log(menuItems)
     const navigate = useNavigate()
     return (
         <MenuList>