refactor: extract back button logic into dedicated wrapper component (calcom#25093)

* refactor: extract back button logic into dedicated wrapper component

* Added changeset

Author: ibex088

.changeset/happy-buckets-dance.md

@@ -0,0 +1,5 @@
+---
+"@calcom/atoms": minor
+---
+
+Refactor SettingsHeader to accept onBackButtonClick callback instead of using useRouter directly.

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/[id]/page.tsx

@@ -1,7 +1,7 @@
 import type { PageProps } from "app/_types";
-import { getTranslate, _generateMetadata } from "app/_utils";
+import { _generateMetadata, getTranslate } from "app/_utils";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
 import { WebhookRepository } from "@calcom/features/webhooks/lib/repository/WebhookRepository";
 import { EditWebhookView } from "@calcom/features/webhooks/pages/webhook-edit-view";
 import { APP_NAME } from "@calcom/lib/constants";
@@ -24,13 +24,12 @@ const Page = async ({ params: _params }: PageProps) => {
   const webhook = await webhookRepository.findByWebhookId(id);
 
   return (
-    <SettingsHeader
+    <SettingsHeaderWithBackButton
       title={t("edit_webhook")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={true}
-      backButton>
+      borderInShellHeader={true}>
       <EditWebhookView webhook={webhook} />
-    </SettingsHeader>
+    </SettingsHeaderWithBackButton>
   );
 };
 

packages/features/settings/appDir/SettingsHeader.tsx

@@ -6,17 +6,27 @@ import classNames from "@calcom/ui/classNames";
 import { Icon } from "@calcom/ui/components/icon";
 import { Button } from "@calcom/ui/components/button";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useRouter } from "next/navigation";
 
-interface HeaderProps {
+type HeaderPropsBase = {
   children: React.ReactNode;
   title?: string;
   description?: string;
   CTA?: React.ReactNode;
   ctaClassName?: string;
   borderInShellHeader?: boolean;
-  backButton?: boolean;
-}
+};
+
+type HeaderPropsWithBackButton = HeaderPropsBase & {
+  backButton: true;
+  onBackButtonClick: () => void;
+};
+
+type HeaderPropsWithoutBackButton = HeaderPropsBase & {
+  backButton?: false;
+  onBackButtonClick?: never;
+};
+
+type HeaderProps = HeaderPropsWithBackButton | HeaderPropsWithoutBackButton;
 
 export default function Header({
   children,
@@ -26,8 +36,8 @@ export default function Header({
   ctaClassName,
   borderInShellHeader,
   backButton,
+  onBackButtonClick,
 }: HeaderProps) {
-  const router = useRouter();
   const { t } = useLocale();
 
   return (
@@ -40,12 +50,12 @@ export default function Header({
         )}>
         <div className="flex w-full items-center justify-between gap-2">
           <div className="flex items-center">
-            {backButton && (
+            {backButton && onBackButtonClick && (
               <Button
                 variant="icon"
                 size="sm"
                 color="minimal"
-                onClick={() => router.back()}
+                onClick={onBackButtonClick}
                 className="rounded-md ltr:mr-2 rtl:ml-2"
                 StartIcon="arrow-left"
                 aria-label={t("go_back")}

packages/features/settings/appDir/SettingsHeaderWithBackButton.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type { ReactNode } from "react";
+
+import SettingsHeader from "./SettingsHeader";
+
+type SettingsHeaderWithBackButtonProps = {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  CTA?: ReactNode;
+  ctaClassName?: string;
+  borderInShellHeader?: boolean;
+};
+
+export default function SettingsHeaderWithBackButton(props: SettingsHeaderWithBackButtonProps) {
+  const router = useRouter();
+
+  return (
+    <SettingsHeader {...props} backButton={true} onBackButtonClick={() => router.back()} />
+  );
+}

packages/features/webhooks/pages/webhook-new-skeleton.tsx

@@ -1,24 +1,24 @@
 "use client";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
 
 export const SkeletonLoader = () => {
   const { t } = useLocale();
+  
   return (
-    <SettingsHeader
+    <SettingsHeaderWithBackButton
       title={t("add_webhook")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={true}
-      backButton={true}>
+      borderInShellHeader={true}>
       <SkeletonContainer>
         <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
       </SkeletonContainer>
-    </SettingsHeader>
+    </SettingsHeaderWithBackButton>
   );
 };

packages/features/webhooks/pages/webhook-new-view.tsx

@@ -3,7 +3,7 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 
-import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
+import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -76,17 +76,16 @@ export const NewWebhookView = ({ webhooks, installedApps }: Props) => {
   };
 
   return (
-    <SettingsHeader
+    <SettingsHeaderWithBackButton
       title={t("add_webhook")}
       description={t("add_webhook_description", { appName: APP_NAME })}
-      borderInShellHeader={true}
-      backButton={true}>
+      borderInShellHeader={true}>
       <WebhookForm
         noRoutingFormTriggers={false}
         onSubmit={onCreateWebhook}
         apps={installedApps?.items.map((app) => app.slug)}
       />
-    </SettingsHeader>
+    </SettingsHeaderWithBackButton>
   );
 };