From 96f6c644bd4014cfe5ae12f77896273cd7eb1f1f Mon Sep 17 00:00:00 2001
From: Afzal Sayed <14029371+afzalsayed96@users.noreply.github.com>
Date: Tue, 26 Apr 2022 07:43:15 +0530
Subject: [PATCH] Improve create event-type flow (#2446)

* Improve create event-type flow

* Update form values when query changes

Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/eventtype/CreateEventType.tsx  | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/apps/web/components/eventtype/CreateEventType.tsx b/apps/web/components/eventtype/CreateEventType.tsx
index 9bf299eb92..540660ff78 100644
--- a/apps/web/components/eventtype/CreateEventType.tsx
+++ b/apps/web/components/eventtype/CreateEventType.tsx
@@ -56,23 +56,32 @@ export default function CreateEventTypeButton(props: Props) {
       : undefined;
   const pageSlug = router.query.eventPage || props.options[0].slug;
   const hasTeams = !!props.options.find((option) => option.teamId);
-  const title: string =
-    typeof router.query.title === "string" && router.query.title ? router.query.title : "";
-  const length: number =
-    typeof router.query.length === "string" && router.query.length ? parseInt(router.query.length) : 15;
-  const description: string =
-    typeof router.query.description === "string" && router.query.description ? router.query.description : "";
-  const slug: string = typeof router.query.slug === "string" && router.query.slug ? router.query.slug : "";
   const type: string = typeof router.query.type == "string" && router.query.type ? router.query.type : "";
 
   const form = useForm<z.infer<typeof createEventTypeInput>>({
     resolver: zodResolver(createEventTypeInput),
   });
   const { setValue, watch, register } = form;
-  setValue("title", title);
-  setValue("length", length);
-  setValue("description", description);
-  setValue("slug", slug);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    const title: string =
+      typeof router.query.title === "string" && router.query.title ? router.query.title : "";
+    const length: number =
+      typeof router.query.length === "string" && router.query.length ? parseInt(router.query.length) : 15;
+    const description: string =
+      typeof router.query.description === "string" && router.query.description
+        ? router.query.description
+        : "";
+    const slug: string = typeof router.query.slug === "string" && router.query.slug ? router.query.slug : "";
+
+    setValue("title", title);
+    setValue("length", length);
+    setValue("description", description);
+    setValue("slug", slug);
+    // If query params change, update the form
+  }, [router.isReady, router.query, setValue]);
 
   useEffect(() => {
     const subscription = watch((value, { name, type }) => {
@@ -86,7 +95,7 @@ export default function CreateEventTypeButton(props: Props) {
 
   const createMutation = trpc.useMutation("viewer.eventTypes.create", {
     onSuccess: async ({ eventType }) => {
-      await router.push("/event-types/" + eventType.id);
+      await router.replace("/event-types/" + eventType.id);
       showToast(t("event_type_created_successfully", { eventTypeTitle: eventType.title }), "success");
     },
     onError: (err) => {