From ade1c57ff4a3cefacac2f7b706f3389cc84affe4 Mon Sep 17 00:00:00 2001
From: Khuddite <62555977+khuddite@users.noreply.github.com>
Date: Mon, 18 Nov 2024 03:41:14 -0500
Subject: [PATCH] Fix remove redundant onClick event in favor of Link component
 (#8540)

Fixes: #8531

1. Summary
There is `onClick` event handler defined for `NavigationDrawerItem`
component, and inside the handler, if `to` is not empty, we trigger
another navigation when it's already handled by `Link` component from
`react-router-dom`

2. Solution
Removed extra navigation logic from `NavigationDrawerItem`'s `onClick`
handler

3. Screen Recording


https://github.com/user-attachments/assets/cfefdd51-1663-4d96-acd2-57783ae9877f
---
 .../navigation-drawer/components/NavigationDrawerItem.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index 8421df168..7ecf7d4e5 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -8,8 +8,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import isPropValid from '@emotion/is-prop-valid';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { isNonEmptyString } from '@sniptt/guards';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import {
   IconComponent,
@@ -168,7 +167,6 @@ export const NavigationDrawerItem = ({
   const theme = useTheme();
   const isMobile = useIsMobile();
   const isSettingsPage = useIsSettingsPage();
-  const navigate = useNavigate();
   const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
     useRecoilState(isNavigationDrawerExpandedState);
   const showBreadcrumb = indentationLevel === 2;
@@ -182,10 +180,6 @@ export const NavigationDrawerItem = ({
       onClick();
       return;
     }
-
-    if (isNonEmptyString(to)) {
-      navigate(to);
-    }
   };
 
   return (