refactor: Separate concerns + prop-driven tabs

apps/web/src/pages/get-started/GetStartedPage.tsx

@@ -1,19 +1,30 @@
-import React from 'react';
-
 import { HeaderLayout } from './layout/HeaderLayout';
 import PageContainer from '../../components/layout/components/PageContainer';
 import PageHeader from '../../components/layout/components/PageHeader';
 import { GetStartedTabs } from './components/get-started-tabs/GetStartedTabs';
+import { useAuthContext } from '../../components/providers/AuthProvider';
+import { Center, Loader } from '@mantine/core';
+import { colors } from '@novu/design-system';
+import { useTabSearchParams } from './components/get-started-tabs/useGetStartedTabs';
 
 const PAGE_TITLE = 'Get started';
 
 export function GetStartedPage() {
+  const { currentOrganization } = useAuthContext();
+  const { currentTab, setTab } = useTabSearchParams();
+
   return (
     <PageContainer title={PAGE_TITLE}>
       <HeaderLayout>
         <PageHeader title={PAGE_TITLE} />
       </HeaderLayout>
-      <GetStartedTabs />
+      {currentOrganization ? (
+        <GetStartedTabs currentTab={currentTab} setTab={setTab} />
+      ) : (
+        <Center>
+          <Loader color={colors.error} size={32} />
+        </Center>
+      )}
     </PageContainer>
   );
 }

apps/web/src/pages/get-started/components/get-started-tabs/GetStartedTabs.tsx

@@ -1,53 +1,19 @@
-import { Outlet, URLSearchParamsInit, useSearchParams } from 'react-router-dom';
-import { Center, Container, Loader, Tabs } from '@mantine/core';
-
-import { colors } from '@novu/design-system';
-
-import { useAuthContext } from '../../../../components/providers/AuthProvider';
-import useStyles from './GetStartedTabs.style';
-import { GetStartedTab } from '../../layout/GetStartedTab';
-import { UseCasesConst } from '../../consts/UseCases.const';
+import { Container, Tabs } from '@mantine/core';
+import { Outlet } from 'react-router-dom';
 import { OnboardingUseCasesTabsEnum } from '../../consts/OnboardingUseCasesTabsEnum';
+import { UseCasesConst } from '../../consts/UseCases.const';
+import { GetStartedTab } from '../../layout/GetStartedTab';
 import { GetStartedTabConfig, TAB_CONFIGS } from './GetStartedTabs.const';
+import useStyles from './GetStartedTabs.style';
 
-const TAB_SEARCH_PARAM_NAME = 'tab';
-const DEFAULT_TAB: OnboardingUseCasesTabsEnum = OnboardingUseCasesTabsEnum.IN_APP;
-
-interface GetStartedTabSearchParams {
-  [TAB_SEARCH_PARAM_NAME]: OnboardingUseCasesTabsEnum;
+interface IGetStartedTabsProps {
+  tabConfigs?: GetStartedTabConfig[];
+  currentTab: OnboardingUseCasesTabsEnum;
+  setTab: (tab: OnboardingUseCasesTabsEnum) => void;
 }
 
-const DEFAULT_PARAMS: GetStartedTabSearchParams = {
-  [TAB_SEARCH_PARAM_NAME]: DEFAULT_TAB,
-} satisfies URLSearchParamsInit;
-
-const useTabSearchParams = () => {
-  const [params, setParams] = useSearchParams(DEFAULT_PARAMS as unknown as URLSearchParamsInit);
-
-  const setTab = (tab: OnboardingUseCasesTabsEnum) => {
-    setParams({ [TAB_SEARCH_PARAM_NAME]: tab });
-  };
-
-  const currentTab = (params.get(TAB_SEARCH_PARAM_NAME) as OnboardingUseCasesTabsEnum) ?? DEFAULT_TAB;
-
-  return {
-    currentTab,
-    setTab,
-  };
-};
-
-export function GetStartedTabs({ tabConfigs = TAB_CONFIGS }: { tabConfigs?: GetStartedTabConfig[] }) {
-  const { currentOrganization } = useAuthContext();
+export const GetStartedTabs: React.FC<IGetStartedTabsProps> = ({ tabConfigs = TAB_CONFIGS, currentTab, setTab }) => {
   const { classes } = useStyles();
-  const { currentTab, setTab } = useTabSearchParams();
-
-  if (!currentOrganization) {
-    return (
-      <Center>
-        <Loader color={colors.error} size={32} />
-      </Center>
-    );
-  }
 
   return (
     <Container fluid mt={15} ml={5}>
@@ -78,4 +44,4 @@ export function GetStartedTabs({ tabConfigs = TAB_CONFIGS }: { tabConfigs?: GetS
       <Outlet />
     </Container>
   );
-}
+};

apps/web/src/pages/get-started/components/get-started-tabs/useGetStartedTabs.ts

@@ -0,0 +1,28 @@
+import { URLSearchParamsInit, useSearchParams } from 'react-router-dom';
+import { OnboardingUseCasesTabsEnum } from '../../consts/OnboardingUseCasesTabsEnum';
+
+const TAB_SEARCH_PARAM_NAME = 'tab';
+const DEFAULT_TAB: OnboardingUseCasesTabsEnum = OnboardingUseCasesTabsEnum.IN_APP;
+
+interface GetStartedTabSearchParams {
+  [TAB_SEARCH_PARAM_NAME]: OnboardingUseCasesTabsEnum;
+}
+
+const DEFAULT_PARAMS: GetStartedTabSearchParams = {
+  [TAB_SEARCH_PARAM_NAME]: DEFAULT_TAB,
+} satisfies URLSearchParamsInit;
+
+export const useTabSearchParams = () => {
+  const [params, setParams] = useSearchParams(DEFAULT_PARAMS as unknown as URLSearchParamsInit);
+
+  const setTab = (tab: OnboardingUseCasesTabsEnum) => {
+    setParams({ [TAB_SEARCH_PARAM_NAME]: tab });
+  };
+
+  const currentTab = (params.get(TAB_SEARCH_PARAM_NAME) as OnboardingUseCasesTabsEnum) ?? DEFAULT_TAB;
+
+  return {
+    currentTab,
+    setTab,
+  };
+};