From 9d3be8de03dccae359bca590d319f4be3312e48d Mon Sep 17 00:00:00 2001 From: Morgan <33722304+ThyMinimalDev@users.noreply.github.com> Date: Tue, 1 Oct 2024 13:38:37 +0300 Subject: [PATCH] chore: improve event-type atom desc, data fetch (#16890) --- .../components/tabs/setup/EventSetupTab.tsx | 67 ++++++++++++------- .../wrappers/EventTypePlatformWrapper.tsx | 33 +++++++-- .../examples/base/src/pages/event-types.tsx | 16 ++++- 3 files changed, 83 insertions(+), 33 deletions(-) diff --git a/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx b/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx index 370dd1be78..7ae3ea5691 100644 --- a/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx +++ b/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx @@ -3,6 +3,7 @@ import { Controller, useFormContext } from "react-hook-form"; import type { UseFormGetValues, UseFormSetValue, Control, FormState } from "react-hook-form"; import type { MultiValue } from "react-select"; +import { useIsPlatform } from "@calcom/atoms/monorepo"; import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager"; import Locations from "@calcom/features/eventtypes/components/Locations"; import type { EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types"; @@ -11,7 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import { md } from "@calcom/lib/markdownIt"; import { slugify } from "@calcom/lib/slugify"; import turndown from "@calcom/lib/turndownService"; -import { Label, Select, SettingsToggle, Skeleton, TextField, Editor } from "@calcom/ui"; +import { Label, Select, SettingsToggle, Skeleton, TextField, Editor, TextAreaField } from "@calcom/ui"; export type EventSetupTabProps = Pick< EventTypeSetupProps, @@ -19,6 +20,7 @@ export type EventSetupTabProps = Pick< >; export const EventSetupTab = (props: EventSetupTabProps & { urlPrefix: string; hasOrgBranding: boolean }) => { const { t } = useLocale(); + const isPlatform = useIsPlatform(); const formMethods = useFormContext(); const { eventType, team, urlPrefix, hasOrgBranding } = props; const [multipleDuration, setMultipleDuration] = useState( @@ -66,38 +68,51 @@ export const EventSetupTab = (props: EventSetupTabProps & { urlPrefix: string; h {...formMethods.register("title")} />
- - md.render(formMethods.getValues("description") || "")} - setText={(value: string) => - formMethods.setValue("description", turndown(value), { shouldDirty: true }) - } - excludedToolbarItems={["blockType"]} - placeholder={t("quick_video_meeting")} - editable={!descriptionLockedProps.disabled} - firstRender={firstRender} - setFirstRender={setFirstRender} - /> + {isPlatform ? ( + + ) : ( + <> + + md.render(formMethods.getValues("description") || "")} + setText={(value: string) => + formMethods.setValue("description", turndown(value), { shouldDirty: true }) + } + excludedToolbarItems={["blockType"]} + placeholder={t("quick_video_meeting")} + editable={!descriptionLockedProps.disabled} + firstRender={firstRender} + setFirstRender={setFirstRender} + /> + + )}
- {urlPrefix}/ - {!isManagedEventType - ? team - ? (hasOrgBranding ? "" : "team/") + team.slug - : formMethods.getValues("users")[0].username - : t("username_placeholder")} - / - + isPlatform ? undefined : ( + <> + {urlPrefix}/ + {!isManagedEventType + ? team + ? (hasOrgBranding ? "" : "team/") + team.slug + : formMethods.getValues("users")[0].username + : t("username_placeholder")} + / + + ) } {...formMethods.register("slug", { setValueAs: (v) => slugify(v), diff --git a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx index 831c525f08..13a3a33ee1 100644 --- a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx +++ b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx @@ -1,17 +1,18 @@ "use client"; -import { useRef, useState } from "react"; +import { useQueryClient } from "@tanstack/react-query"; +import { useRef, useState, useEffect } from "react"; import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect"; import { EventType as EventTypeComponent } from "@calcom/features/eventtypes/components/EventType"; import ManagedEventTypeDialog from "@calcom/features/eventtypes/components/dialogs/ManagedEventDialog"; -import type { EventTypeSetupProps, TabMap } from "@calcom/features/eventtypes/lib/types"; +import type { EventTypeSetupProps, FormValues, TabMap } from "@calcom/features/eventtypes/lib/types"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { SchedulingType } from "@calcom/prisma/enums"; import { AtomsWrapper } from "../../src/components/atoms-wrapper"; import { useToast } from "../../src/components/ui/use-toast"; -import { useAtomsEventTypeById } from "../hooks/useAtomEventTypeById"; +import { useAtomsEventTypeById, QUERY_KEY as ATOM_EVENT_TYPE_QUERY_KEY } from "../hooks/useAtomEventTypeById"; import { useAtomUpdateEventType } from "../hooks/useAtomUpdateEventType"; import { useEventTypeForm } from "../hooks/useEventTypeForm"; import { useHandleRouteChange } from "../hooks/useHandleRouteChange"; @@ -23,10 +24,14 @@ export type PlatformTabs = keyof Omit void; + onError?: (eventType: FormValues, error: Error) => void; }; const EventType = ({ tabs = ["setup", "availability", "team", "limits", "advanced"], + onSuccess, + onError, ...props }: EventTypeSetupProps & EventTypePlatformWrapperProps) => { const { t } = useLocale(); @@ -52,13 +57,16 @@ const EventType = ({ form.reset(currentValues); toast({ description: t("event_type_updated_successfully", { eventTypeTitle: eventType.title }) }); + onSuccess?.(currentValues); }, async onSettled() { return; }, onError: (err: Error) => { + const currentValues = form.getValues(); const message = err?.message; toast({ description: message ? t(message) : t(err.message) }); + onError?.(currentValues, err); }, }); @@ -158,10 +166,25 @@ const EventType = ({ ); }; -export const EventTypePlatformWrapper = ({ id, tabs }: EventTypePlatformWrapperProps) => { +export const EventTypePlatformWrapper = ({ id, tabs, onSuccess, onError }: EventTypePlatformWrapperProps) => { const { data: eventTypeQueryData } = useAtomsEventTypeById(id); + const queryClient = useQueryClient(); + + useEffect(() => { + return () => { + if (eventTypeQueryData) { + // on component unmount or eventTypeId change, reset and invalidate query to get fresh data on next mount + queryClient.invalidateQueries({ + queryKey: [ATOM_EVENT_TYPE_QUERY_KEY, id], + }); + queryClient.resetQueries({ + queryKey: [ATOM_EVENT_TYPE_QUERY_KEY, id], + }); + } + }; + }, [queryClient, id]); if (!eventTypeQueryData) return null; - return ; + return ; }; diff --git a/packages/platform/examples/base/src/pages/event-types.tsx b/packages/platform/examples/base/src/pages/event-types.tsx index 68602bc977..818e9ff793 100644 --- a/packages/platform/examples/base/src/pages/event-types.tsx +++ b/packages/platform/examples/base/src/pages/event-types.tsx @@ -12,7 +12,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string const [eventTypeId, setEventTypeId] = useState(null); const [isTeamEvent, setIsTeamEvent] = useState(false); const router = useRouter(); - const { isLoading: isLoadingEvents, data: eventTypes } = useEventTypes(props.calUsername); + const { isLoading: isLoadingEvents, data: eventTypes, refetch } = useEventTypes(props.calUsername); const { data: teams } = useTeams(); const { isLoading: isLoadingTeamEvents, data: teamEventTypes } = useTeamEventTypes(teams?.[0]?.id || 0); const rescheduleUid = (router.query.rescheduleUid as string) ?? ""; @@ -85,7 +85,19 @@ export default function Bookings(props: { calUsername: string; calEmail: string )} {eventTypeId && (
- + { + console.log(eventType); + setEventTypeId(null); + refetch(); + }} + onError={(eventType, error) => { + console.log(eventType); + console.error(error); + }} + />
)}