From e43be8256531dd45b45827bdb0600e4cf799cc30 Mon Sep 17 00:00:00 2001
From: Adam Chmara <adam.chmara1@gmail.com>
Date: Thu, 9 May 2024 16:59:24 +0200
Subject: [PATCH] fix: provider sidebar from 'get-started' screen (#5535)

Co-authored-by: Adam Chmara <adam@novu.co>
---
 .../multi-provider/SelectProviderSidebar.tsx  | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx b/apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx
index 4b0b99cab51..bda90e28852 100644
--- a/apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx
+++ b/apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx
@@ -25,7 +25,7 @@ import { sortProviders } from './sort-providers';
 import { When } from '../../../../components/utils/When';
 import { CONTEXT_PATH } from '../../../../config';
 import { useProviders } from '../../useProviders';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { ROUTES } from '../../../../constants/routes.enum';
 
 const filterSearch = (list, search: string) =>
@@ -46,6 +46,7 @@ export function SelectProviderSidebar({
   const [selectedTab, setSelectedTab] = useState(ChannelTypeEnum.IN_APP);
   const { isLoading: isIntegrationsLoading, providers: integrations } = useProviders();
   const navigate = useNavigate();
+  const { pathname } = useLocation();
 
   const inAppCount: number = useMemo(() => {
     const count = integrations.filter(
@@ -79,10 +80,15 @@ export function SelectProviderSidebar({
 
   const onTabChange = useCallback(
     (channel: ChannelTypeEnum) => {
-      navigate(`${ROUTES.INTEGRATIONS_CREATE}?scrollTo=${channel}`);
-      setSelectedTab(scrollTo as ChannelTypeEnum);
+      setSelectedTab(channel as ChannelTypeEnum);
+
+      if (pathname.includes(ROUTES.INTEGRATIONS_CREATE)) {
+        navigate(`${ROUTES.INTEGRATIONS_CREATE}?scrollTo=${channel}`);
+
+        return;
+      }
     },
-    [navigate, scrollTo]
+    [navigate, pathname]
   );
 
   const onSidebarClose = () => {
@@ -101,12 +107,20 @@ export function SelectProviderSidebar({
     }
   };
 
+  // TODO: sometime the scrollTo url param needs to change and sometimes not (e.g. from /get-started)
+  useEffect(() => {
+    if (selectedTab && !isIntegrationsLoading) {
+      onTabChange(selectedTab);
+      scrollToElement(selectedTab);
+    }
+  }, [selectedTab, isIntegrationsLoading, onTabChange]);
+
   useEffect(() => {
     if (scrollTo && !isIntegrationsLoading) {
       onTabChange(scrollTo);
       scrollToElement(scrollTo);
     }
-  }, [selectedTab, isIntegrationsLoading, scrollTo, onTabChange]);
+  }, [scrollTo, isIntegrationsLoading, onTabChange]);
 
   return (
     <Sidebar