From 395f28219d89e278560a159fc985d61f347b0feb Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Tue, 26 Sep 2023 13:44:35 +0300
Subject: [PATCH] Add handler on each sidebar button

---
 src/pages/Dashboard/IconButtonWithDot.tsx | 65 +++++++++++++----------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/src/pages/Dashboard/IconButtonWithDot.tsx b/src/pages/Dashboard/IconButtonWithDot.tsx
index 271b7f96..db0acfb1 100644
--- a/src/pages/Dashboard/IconButtonWithDot.tsx
+++ b/src/pages/Dashboard/IconButtonWithDot.tsx
@@ -1,40 +1,47 @@
 import { IconButton } from '@status-im/components'
+import { useDispatch } from 'react-redux'
 import { Stack } from 'tamagui'
+import { toggleButtonSelection } from '../../redux/Sidebars/slice'
 
 type IconButtonWithDotProps = {
-  iconEl: any
-  variant: 'ghost' | 'outline'
-  isDotOn: boolean
-  selected?: boolean
-  disabled?: boolean
+    iconEl: any
+    variant: 'ghost' | 'outline'
+    isDotOn: boolean
+    selected?: boolean
+    disabled?: boolean
+    id: string
 }
 
 const IconButtonWithDot = ({
-  iconEl,
-  variant,
-  isDotOn,
-  selected,
-  disabled,
+    iconEl,
+    variant,
+    isDotOn,
+    selected,
+    disabled,
+    id
 }: IconButtonWithDotProps) => {
-  return (
-    <Stack style={{ position: 'relative', display: 'inline-block' }}>
-      <IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} />
-      {isDotOn && (
-        <Stack
-          style={{
-            position: 'absolute',
-            right: 7,
-            top: 5,
-            width: '9px',
-            height: '9px',
-            borderRadius: '50%',
-            backgroundColor: '#1992D7',
-            border: '1.5px solid #fff',
-          }}
-        />
-      )}
-    </Stack>
-  )
+    const dispatch = useDispatch()
+    const onClickHandler = (id) => { if (!disabled) dispatch(toggleButtonSelection(id)) }
+
+    return (
+        <Stack style={{ position: 'relative', display: 'inline-block' }}>
+            <IconButton icon={iconEl} variant={variant} selected={selected} disabled={disabled} onPress={() => onClickHandler(id)} />
+            {isDotOn && (
+                <Stack
+                    style={{
+                        position: 'absolute',
+                        right: 7,
+                        top: 5,
+                        width: '9px',
+                        height: '9px',
+                        borderRadius: '50%',
+                        backgroundColor: '#1992D7',
+                        border: '1.5px solid #fff',
+                    }}
+                />
+            )}
+        </Stack>
+    )
 }
 
 export default IconButtonWithDot