From 15da6902705dab5f86b3c32e565bffc89f95ee8c Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Thu, 9 Feb 2023 02:59:16 +0530
Subject: [PATCH] fix: use typedquery hook in duplicate dialog (#6730)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: use typedquery hook in duplicate dialog

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* Update packages/features/eventtypes/components/DuplicateDialog.tsx

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Omar López <zomars@me.com>
---
 .../eventtype/EventTypeSingleLayout.tsx       |  1 +
 .../eventtypes/components/DuplicateDialog.tsx | 26 +++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 0940dfc706..6afeea1dff 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -286,6 +286,7 @@ function EventTypeSingleLayout({
               <DropdownMenuItem className="focus:ring-gray-100">
                 <DropdownItem
                   type="button"
+                  color="destructive"
                   StartIcon={FiTrash}
                   disabled={!hasPermsToDelete}
                   onClick={() => setDeleteDialogOpen(true)}>
diff --git a/packages/features/eventtypes/components/DuplicateDialog.tsx b/packages/features/eventtypes/components/DuplicateDialog.tsx
index 60444fdb0a..49dce168dc 100644
--- a/packages/features/eventtypes/components/DuplicateDialog.tsx
+++ b/packages/features/eventtypes/components/DuplicateDialog.tsx
@@ -1,7 +1,9 @@
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
@@ -16,18 +18,28 @@ import {
   TextField,
 } from "@calcom/ui";
 
+const querySchema = z.object({
+  title: z.string(),
+  description: z.string().default(""),
+  slug: z.string(),
+  id: z.coerce.number(),
+  length: z.coerce.number(),
+  pageSlug: z.string(),
+});
+
 const DuplicateDialog = () => {
   const { t } = useLocale();
   const router = useRouter();
 
+  const {
+    data: { pageSlug, slug, ...defaultValues },
+  } = useTypedQuery(querySchema);
+
   // react hook form
   const form = useForm({
     defaultValues: {
-      id: Number(router.query.id as string) || -1,
-      title: (router.query.title as string) || "",
-      slug: t("event_type_duplicate_copy_text", { slug: router.query.slug as string }),
-      description: (router.query.description as string) || "",
-      length: Number(router.query.length) || 30,
+      slug: t("event_type_duplicate_copy_text", { slug }),
+      ...defaultValues,
     },
   });
   const { register } = form;
@@ -55,12 +67,10 @@ const DuplicateDialog = () => {
     },
   });
 
-  const { pageSlug } = router.query;
-
   return (
     <Dialog
       name="duplicate-event-type"
-      clearQueryParamsOnClose={["description", "title", "length", "slug", "name", "id"]}>
+      clearQueryParamsOnClose={["description", "title", "length", "slug", "name", "id", "pageSlug"]}>
       <DialogContent type="creation" className="overflow-y-auto" title="Duplicate Event Type">
         <Form
           form={form}