pr refactoring suggestion

nym-wallet/src/components/Tabs.tsx

@@ -1,15 +1,25 @@
 import React from 'react';
 import { Tab, Tabs as MuiTabs, SxProps } from '@mui/material';
 
-export const Tabs: React.FC<{
-  tabs: string[];
-  selectedTab: number;
+type Props = {
+  tabs: readonly string[];
+  selectedTab: string;
   disabled?: boolean;
-  onChange?: (event: React.SyntheticEvent, tab: number) => void;
+  onChange?: (event: React.SyntheticEvent, tab: string) => void;
   disableActiveTabHighlight?: boolean;
   tabSx?: SxProps;
   tabIndicatorStyles?: {};
-}> = ({ tabs, selectedTab, disabled, disableActiveTabHighlight, onChange, tabSx, tabIndicatorStyles }) => (
+};
+
+export const Tabs = ({
+  tabs,
+  selectedTab,
+  disabled,
+  disableActiveTabHighlight,
+  onChange,
+  tabSx,
+  tabIndicatorStyles,
+}: Props) => (
   <MuiTabs
     value={selectedTab}
     onChange={onChange}
@@ -29,7 +39,7 @@ export const Tabs: React.FC<{
     }}
   >
     {tabs.map((tabName) => (
-      <Tab key={tabName} label={tabName} sx={{ textTransform: 'capitalize' }} disabled={disabled} />
+      <Tab key={tabName} label={tabName} sx={{ textTransform: 'capitalize' }} value={tabName} disabled={disabled} />
     ))}
   </MuiTabs>
 );

nym-wallet/src/pages/bonding/node-settings/NodeSettings.tsx

@@ -15,7 +15,7 @@ import { AppContext, urls } from 'src/context/main';
 
 import { NodeGeneralSettings } from './settings-pages/general-settings';
 import { NodeUnbondPage } from './settings-pages/NodeUnbondPage';
-import { nodeSettingsNav } from './node-settings.constant';
+import { navItems, NodeSettingsNav } from './node-settings.constant';
 
 export const NodeSettings = () => {
   const theme = useTheme();
@@ -25,15 +25,14 @@ export const NodeSettings = () => {
   const location = useLocation();
 
   const [confirmationDetails, setConfirmationDetails] = useState<ConfirmationDetailProps>();
-  const [value, setValue] = React.useState(0);
-  const handleChange = (event: React.SyntheticEvent, tab: number) => {
-    setValue(tab);
+  const [value, setValue] = React.useState<NodeSettingsNav>('General');
+  const handleChange = (event: React.SyntheticEvent, tab: string) => {
+    setValue(tab as NodeSettingsNav);
   };
 
   useEffect(() => {
     if (location.state === 'unbond') {
-      const unbondIndex = nodeSettingsNav.indexOf('Unbond');
-      setValue(unbondIndex);
+      setValue('Unbond');
     }
   }, [location]);
 
@@ -77,7 +76,7 @@ export const NodeSettings = () => {
             </Box>
             <Box sx={{ width: '100%' }}>
               <Tabs
-                tabs={nodeSettingsNav}
+                tabs={navItems}
                 selectedTab={value}
                 onChange={handleChange}
                 tabSx={{
@@ -113,8 +112,8 @@ export const NodeSettings = () => {
         }
       >
         <Divider />
-        {nodeSettingsNav[value] === 'General' && bondedNode && <NodeGeneralSettings bondedNode={bondedNode} />}
-        {nodeSettingsNav[value] === 'Unbond' && bondedNode && (
+        {value === 'General' && bondedNode && <NodeGeneralSettings bondedNode={bondedNode} />}
+        {value === 'Unbond' && bondedNode && (
           <NodeUnbondPage bondedNode={bondedNode} onConfirm={handleUnbond} onError={handleError} />
         )}
         {confirmationDetails && confirmationDetails.status === 'success' && (

nym-wallet/src/pages/bonding/node-settings/node-settings.constant.tsx

@@ -1,7 +1,3 @@
-enum Options {
-  General,
-  Unbond,
-}
-type NavItem = keyof typeof Options;
+export const navItems = ['General', 'Unbond'] as const;
 
-export const nodeSettingsNav: NavItem[] = ['General', 'Unbond'];
+export type NodeSettingsNav = typeof navItems[number]; // type NodeSettingsNav = 'General' | 'Unbond';