From c38b9a8c103b0b9df3719bfb703418d020b6a7b9 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Thu, 11 Apr 2024 10:15:19 +0300
Subject: [PATCH] fix(left-sidebar): simplify by removing redux

---
 .../General/LeftSidebar/LeftSidebar.tsx       | 16 ++---
 .../LeftSidebarIconButton.stories.tsx         |  6 +-
 .../LeftSidebar/LeftSidebarIconButton.tsx     | 20 +++----
 src/redux/LeftSidebar/slice.ts                | 59 -------------------
 src/redux/store.ts                            |  2 -
 5 files changed, 17 insertions(+), 86 deletions(-)
 delete mode 100644 src/redux/LeftSidebar/slice.ts

diff --git a/src/components/General/LeftSidebar/LeftSidebar.tsx b/src/components/General/LeftSidebar/LeftSidebar.tsx
index b3901ee9..5879013f 100644
--- a/src/components/General/LeftSidebar/LeftSidebar.tsx
+++ b/src/components/General/LeftSidebar/LeftSidebar.tsx
@@ -9,12 +9,10 @@ import {
   SettingsIcon,
 } from '@status-im/icons'
 import { Stack, YStack } from 'tamagui'
-import { useSelector } from 'react-redux'
 import { Tooltip } from '@status-im/components'
 
 import LeftSidebarIconButton from './LeftSidebarIconButton'
-import { SidebarButton } from '../../../redux/LeftSidebar/slice'
-import { RootState } from '../../../redux/store'
+import { LEFT_SIDEBAR_ICONS } from '../../../constants'
 
 const iconMap = {
   '/dashboard': <DashboardIcon size={20} />,
@@ -28,8 +26,6 @@ const iconMap = {
 }
 
 const LeftSidebar = () => {
-  const buttons = useSelector((state: RootState) => state.leftSidebar.buttons)
-
   return (
     <YStack
       space={'$3'}
@@ -39,14 +35,12 @@ const LeftSidebar = () => {
         border: '1px solid #F0F2F5',
       }}
     >
-      {buttons.map((button: SidebarButton) => (
-        <Tooltip side="right" content={button.tooltip} key={button.path}>
+      {LEFT_SIDEBAR_ICONS.map(icon => (
+        <Tooltip side="right" content={icon.tooltip} key={icon.path}>
           <Stack>
             <LeftSidebarIconButton
-              iconEl={iconMap[button.path as keyof typeof iconMap]}
-              isDotOn={button.isDotOn}
-              isDisabled={button.isDisabled}
-              path={button.path}
+              iconEl={iconMap[icon.path as keyof typeof iconMap]}
+              path={icon.path}
             />
           </Stack>
         </Tooltip>
diff --git a/src/components/General/LeftSidebar/LeftSidebarIconButton.stories.tsx b/src/components/General/LeftSidebar/LeftSidebarIconButton.stories.tsx
index 9df5d747..cf32483c 100644
--- a/src/components/General/LeftSidebar/LeftSidebarIconButton.stories.tsx
+++ b/src/components/General/LeftSidebar/LeftSidebarIconButton.stories.tsx
@@ -20,17 +20,15 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     iconEl: <DashboardIcon size={20} />,
-    isDotOn: false,
     isDisabled: false,
     path: 'dashboard',
   },
 }
 
-export const DotOn: Story = {
+export const Disabled: Story = {
   args: {
     iconEl: <DashboardIcon size={20} />,
-    isDotOn: true,
-    isDisabled: false,
+    isDisabled: true,
     path: 'dashboard',
   },
 }
diff --git a/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx b/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx
index 12d32830..cdbdcfe4 100644
--- a/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx
+++ b/src/components/General/LeftSidebar/LeftSidebarIconButton.tsx
@@ -1,20 +1,20 @@
-import { IconButton } from '@status-im/components'
+import { IconAvatarProps, IconButton } from '@status-im/components'
 import { Stack } from 'tamagui'
 import { Link } from 'react-router-dom'
 
 type IconButtonWithDotProps = {
-  iconEl: any
-  isDotOn: boolean
-  isDisabled?: boolean
+  iconEl: IconAvatarProps['icon']
   path: string
 }
 
-const LeftSidebarIconButton = ({
-  iconEl,
-  isDotOn,
-  isDisabled,
-  path,
-}: IconButtonWithDotProps) => {
+const LeftSidebarIconButton = ({ iconEl, path }: IconButtonWithDotProps) => {
+  const isDotOn = path === '/notifications'
+  const isDisabled =
+    path === '/advanced-analytics' ||
+    path === '/community' ||
+    path === '/notifications' ||
+    path === '/settings'
+
   return (
     <Link to={path}>
       <IconButton
diff --git a/src/redux/LeftSidebar/slice.ts b/src/redux/LeftSidebar/slice.ts
deleted file mode 100644
index 83599b18..00000000
--- a/src/redux/LeftSidebar/slice.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit'
-
-export interface SidebarButton {
-  isDotOn: boolean
-  isDisabled?: boolean
-  path: string
-  tooltip?: string
-}
-
-interface LeftSidebarState {
-  buttons: SidebarButton[]
-}
-
-const initialState: LeftSidebarState = {
-  buttons: [
-    { isDotOn: false, path: '/dashboard', tooltip: 'Dashboard' },
-    {
-      isDotOn: false,
-      path: '/validator-management',
-      tooltip: 'Validator Management',
-    },
-    {
-      isDotOn: false,
-      isDisabled: true,
-      path: '/charts',
-    },
-    {
-      isDotOn: false,
-      path: '/device-health-check',
-      tooltip: 'Device Health Check',
-    },
-    { isDotOn: false, path: '/logs', tooltip: 'Logs' },
-    {
-      isDotOn: false,
-      isDisabled: true,
-      path: '/communities',
-    },
-    {
-      isDotOn: true,
-      isDisabled: true,
-      path: '/activityCenter',
-    },
-    {
-      isDotOn: false,
-      isDisabled: true,
-      path: '/settings',
-    },
-  ],
-}
-
-const leftSidebarSlice = createSlice({
-  name: 'leftSidebar',
-  initialState,
-  reducers: {},
-})
-
-export const {} = leftSidebarSlice.actions
-
-export default leftSidebarSlice.reducer
diff --git a/src/redux/store.ts b/src/redux/store.ts
index c6979af6..a03a2ad6 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -6,7 +6,6 @@ import pinnedMessageReducer from './PinnedMessage/slice'
 import execClientReducer from './ValidatorOnboarding/ClientSetup/slice'
 import keyGenerationReducer from './ValidatorOnboarding/KeyGeneration/slice'
 import depositReducer from './Deposit/slice'
-import leftSidebarReducer from './LeftSidebar/slice'
 import rightSidebarReducer from './RightSidebar/slice'
 import validatorOnboardingReducer from './ValidatorOnboarding/slice'
 import advisoriesReducer from './ValidatorOnboarding/Advisories/slice'
@@ -26,7 +25,6 @@ const store = configureStore({
     theme: themeReducer,
     keyGeneration: keyGenerationReducer,
     deposit: depositReducer,
-    leftSidebar: leftSidebarReducer,
     rightSidebar: rightSidebarReducer,
     validatorOnboarding: validatorOnboardingReducer,
     advisories: advisoriesReducer,