From 6c03f62add1ffee55a3bf9f31bee6d040e8b577a Mon Sep 17 00:00:00 2001
From: Adam Chmara <adam@novu.co>
Date: Thu, 9 May 2024 09:47:24 +0200
Subject: [PATCH] fix: auto-scroll on provider sidebar

---
 .../multi-provider/SelectProviderSidebar.tsx  | 40 +++++++++++--------
 1 file changed, 23 insertions(+), 17 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 5a8d5a12e86..ee81f8aeb17 100644
--- a/apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx
+++ b/apps/web/src/pages/integrations/components/multi-provider/SelectProviderSidebar.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import styled from '@emotion/styled';
 import { Group, Image, Space, Stack, Tabs, TabsValue, useMantineColorScheme } from '@mantine/core';
 import { ChannelTypeEnum, InAppProviderIdEnum } from '@novu/shared';
@@ -25,6 +25,8 @@ 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 { ROUTES } from '../../../../constants/routes.enum';
 
 const filterSearch = (list, search: string) =>
   list.filter((prov) => prov.displayName.toLowerCase().includes(search.toLowerCase()));
@@ -43,6 +45,7 @@ export function SelectProviderSidebar({
   const [providersList, setProvidersList] = useState(initialProvidersList);
   const [selectedTab, setSelectedTab] = useState(ChannelTypeEnum.IN_APP);
   const { isLoading: isIntegrationsLoading, providers: integrations } = useProviders();
+  const navigate = useNavigate();
 
   const inAppCount: number = useMemo(() => {
     const count = integrations.filter(
@@ -75,21 +78,11 @@ export function SelectProviderSidebar({
   const onProviderClick = (provider) => () => setSelectedProvider(provider);
 
   const onTabChange = useCallback(
-    (elementId?: TabsValue) => {
-      if (!elementId) {
-        return;
-      }
-
-      setSelectedTab(elementId as ChannelTypeEnum);
-
-      const element = document.getElementById(elementId);
-
-      element?.parentElement?.scrollTo({
-        behavior: 'smooth',
-        top: element?.offsetTop ? element?.offsetTop - 250 : undefined,
-      });
+    (channel: ChannelTypeEnum) => {
+      navigate(`${ROUTES.INTEGRATIONS_CREATE}?scrollTo=${channel}`);
+      setSelectedTab(scrollTo as ChannelTypeEnum);
     },
-    [setSelectedTab]
+    [navigate, scrollTo]
   );
 
   const onSidebarClose = () => {
@@ -98,9 +91,22 @@ export function SelectProviderSidebar({
     setSelectedTab(inAppCount < 2 ? ChannelTypeEnum.IN_APP : ChannelTypeEnum.EMAIL);
   };
 
+  const scrollToElement = (elementId: string) => {
+    const element = document.getElementById(elementId);
+    if (element && element.parentElement) {
+      element.parentElement.scrollTo({
+        behavior: 'smooth',
+        top: element.offsetTop - 250,
+      });
+    }
+  };
+
   useEffect(() => {
-    onTabChange(scrollTo?.toString());
-  }, [onTabChange, scrollTo]);
+    if (scrollTo && !isIntegrationsLoading) {
+      onTabChange(scrollTo);
+      scrollToElement(scrollTo);
+    }
+  }, [selectedTab, isIntegrationsLoading, scrollTo, onTabChange]);
 
   return (
     <Sidebar