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>
This commit is contained in:
		
							parent
							
								
									7c12bb1e20
								
							
						
					
					
						commit
						96f6c644bd
					
				
					 1 changed files with 21 additions and 12 deletions
				
			
		|  | @ -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) => { | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue
	
	 Afzal Sayed
						Afzal Sayed