Added named dialog to replace new=1 (#2076)

(cherry picked from commit d6dee7a2c9)

apps/web/components/Dialog.tsx

@@ -1,11 +1,55 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React, { ReactNode } from "react";
+import { useRouter } from "next/router";
+import React, { ReactNode, useState } from "react";
 
-export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]>;
+export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]> & {
+  name?: string;
+  clearQueryParamsOnClose?: string[];
+};
 export function Dialog(props: DialogProps) {
-  const { children, ...other } = props;
+  const router = useRouter();
+  const { children, name, ...dialogProps } = props;
+  // only used if name is set
+  const [open, setOpen] = useState(!!dialogProps.open);
+
+  if (name) {
+    const clearQueryParamsOnClose = ["dialog", ...(props.clearQueryParamsOnClose || [])];
+    dialogProps.onOpenChange = (open) => {
+      if (props.onOpenChange) {
+        props.onOpenChange(open);
+      }
+      // toggles "dialog" query param
+      if (open) {
+        router.query["dialog"] = name;
+      } else {
+        clearQueryParamsOnClose.forEach((queryParam) => {
+          delete router.query[queryParam];
+        });
+      }
+      router.push(
+        {
+          pathname: router.pathname,
+          query: {
+            ...router.query,
+          },
+        },
+        undefined,
+        { shallow: true }
+      );
+      setOpen(open);
+    };
+    // handles initial state
+    if (!open && router.query["dialog"] === name) {
+      setOpen(true);
+    }
+    // allow overriding
+    if (!("open" in dialogProps)) {
+      dialogProps.open = open;
+    }
+  }
+
   return (
-    <DialogPrimitive.Root {...other}>
+    <DialogPrimitive.Root {...dialogProps}>
       <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
       {children}
     </DialogPrimitive.Root>

apps/web/components/eventtype/CreateEventType.tsx

@@ -10,7 +10,6 @@ import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
 
 import { HttpError } from "@lib/core/http/error";
 import { useLocale } from "@lib/hooks/useLocale";
-import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import showToast from "@lib/notification";
 import { slugify } from "@lib/slugify";
 import { trpc } from "@lib/trpc";
@@ -49,7 +48,6 @@ interface Props {
 export default function CreateEventTypeButton(props: Props) {
   const { t } = useLocale();
   const router = useRouter();
-  const modalOpen = useToggleQuery("new");
 
   // URL encoded params
   const teamId: number | undefined =
@@ -95,44 +93,33 @@ export default function CreateEventTypeButton(props: Props) {
 
   // inject selection data into url for correct router history
   const openModal = (option: EventTypeParent) => {
-    // setTimeout fixes a bug where the url query params are removed immediately after opening the modal
-    setTimeout(() => {
-      router.push(
-        {
-          pathname: router.pathname,
-          query: {
-            ...router.query,
-            new: "1",
-            eventPage: option.slug,
-            teamId: option.teamId || undefined,
-          },
-        },
-        undefined,
-        { shallow: true }
-      );
-    });
-  };
-
-  // remove url params after close modal to reset state
-  const closeModal = () => {
-    router.replace({
-      pathname: router.pathname,
-      query: { id: router.query.id || undefined },
-    });
+    const query = {
+      ...router.query,
+      dialog: "new-eventtype",
+      eventPage: option.slug,
+      teamId: option.teamId,
+    };
+    if (!option.teamId) {
+      delete query.teamId;
+    }
+    router.push(
+      {
+        pathname: router.pathname,
+        query,
+      },
+      undefined,
+      { shallow: true }
+    );
   };
 
   return (
-    <Dialog
-      open={modalOpen.isOn}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) closeModal();
-      }}>
+    <Dialog name="new-eventtype" clearQueryParamsOnClose={["eventPage", "teamId"]}>
       {!hasTeams || props.isIndividualTeam ? (
         <Button
           onClick={() => openModal(props.options[0])}
           data-testid="new-event-type"
           StartIcon={PlusIcon}
-          {...(props.canAddEvents ? { href: modalOpen.hrefOn } : { disabled: true })}>
+          disabled={!props.canAddEvents}>
           {t("new_event_type_btn")}
         </Button>
       ) : (