fix(left-sidebar): remove useless props and handlers

src/components/General/LeftSidebar/LeftSidebar.tsx

@@ -16,23 +16,23 @@ import LeftSidebarIconButton from './LeftSidebarIconButton'
 const LeftSidebar = () => {
   const buttons = useSelector((state: any) => state.leftSidebar.buttons)
 
-  const renderIcon = (id: string) => {
+  const renderIcon = (path: string) => {
-    switch (id) {
+    switch (path) {
-      case 'dashboard':
+      case '/dashboard':
         return <DashboardIcon size={20} />
-      case 'speed':
+      case '/validator-management':
         return <SpeedIcon size={20} />
-      case 'chart':
+      case '/charts':
         return <ChartIcon size={20} />
-      case 'heart':
+      case '/device-health-check':
         return <HeartIcon size={20} />
-      case 'codeBlock':
+      case '/logs':
         return <CodeBlockIcon size={20} />
-      case 'communities':
+      case '/communities':
         return <CommunitiesIcon size={20} />
-      case 'activityCenter':
+      case '/activityCenter':
         return <ActivityCenterIcon size={20} />
-      case 'settings':
+      case '/settings':
         return <SettingsIcon size={20} />
       default:
         return null
@@ -66,12 +66,10 @@ const LeftSidebar = () => {
         >
           <div style={{ padding: '3px', cursor: 'pointer' }}>
             <LeftSidebarIconButton
-              key={button.id}
+              key={button.path}
-              iconEl={renderIcon(button.id)}
+              iconEl={renderIcon(button.path)}
               isDotOn={button.isDotOn}
-              isSelected={button.isSelected}
               isDisabled={button.isDisabled}
-              id={button.id}
               path={button.path}
             />
           </div>

src/components/General/LeftSidebar/LeftSidebarIconButton.tsx

@@ -1,35 +1,22 @@
 import { IconButton } from '@status-im/components'
-import { useDispatch } from 'react-redux'
 import { Stack } from 'tamagui'
 import { Link } from 'react-router-dom'
 
-import { toggleButtonSelection } from '../../../redux/LeftSidebar/slice'
-
 type IconButtonWithDotProps = {
   iconEl: any
   isDotOn: boolean
-  isSelected: boolean
   isDisabled?: boolean
-  id: string
   path: string
 }
 
 const LeftSidebarIconButton = ({
   iconEl,
   isDotOn,
-  isSelected,
   isDisabled,
-  id,
   path,
 }: IconButtonWithDotProps) => {
-  const dispatch = useDispatch()
-
-  const onClickHandler = () => {
-    isDisabled ? null : dispatch(toggleButtonSelection(id))
-  }
-
   return (
-    <Link to={path} onClick={onClickHandler}>
+    <Link to={path}>
       <Stack style={{ position: 'relative', display: 'inline-block' }}>
         <IconButton
           icon={iconEl}

src/redux/LeftSidebar/slice.ts

@@ -1,9 +1,7 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 
 interface SidebarButton {
-  id: string
   isDotOn: boolean
-  isSelected: boolean
   isDisabled?: boolean
   path: string
 }
@@ -14,47 +12,35 @@ interface LeftSidebarState {
 
 const initialState: LeftSidebarState = {
   buttons: [
-    { id: 'dashboard', isDotOn: false, isSelected: true, path: '/dashboard' },
+    { isDotOn: false, path: '/dashboard' },
     {
-      id: 'speed',
       isDotOn: false,
-      isSelected: false,
       path: '/validator-management',
     },
     {
-      id: 'chart',
       isDotOn: false,
-      isSelected: false,
       isDisabled: true,
-      path: '/',
+      path: '/charts',
     },
     {
-      id: 'heart',
       isDotOn: false,
-      isSelected: false,
       path: '/device-health-check',
     },
-    { id: 'codeBlock', isDotOn: false, isSelected: false, path: '/logs' },
+    { isDotOn: false, path: '/logs' },
     {
-      id: 'communities',
       isDotOn: false,
-      isSelected: false,
       isDisabled: true,
-      path: '/',
+      path: '/communities',
     },
     {
-      id: 'activityCenter',
       isDotOn: true,
-      isSelected: false,
       isDisabled: true,
-      path: '/',
+      path: '/activityCenter',
     },
     {
-      id: 'settings',
       isDotOn: false,
-      isSelected: false,
       isDisabled: true,
-      path: '/',
+      path: '/settings',
     },
   ],
 }
@@ -62,21 +48,9 @@ const initialState: LeftSidebarState = {
 const leftSidebarSlice = createSlice({
   name: 'leftSidebar',
   initialState,
-  reducers: {
+  reducers: {},
-    toggleButtonSelection: (state, action: PayloadAction<string>) => {
-      state.buttons.forEach(button => {
-        button.isSelected = button.id === action.payload
-      })
-    },
-    toggleDot: (state, action: PayloadAction<string>) => {
-      const button = state.buttons.find(button => button.id === action.payload)
-      if (button) {
-        button.isDotOn = !button.isDotOn
-      }
-    },
-  },
 })
 
-export const { toggleButtonSelection, toggleDot } = leftSidebarSlice.actions
+export const {} = leftSidebarSlice.actions
 
 export default leftSidebarSlice.reducer