diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx index 49129ef9f6..16bd13a4c2 100644 --- a/apps/web/components/eventtype/EventSetupTab.tsx +++ b/apps/web/components/eventtype/EventSetupTab.tsx @@ -4,7 +4,7 @@ import { isValidPhoneNumber } from "libphonenumber-js"; import { Trans } from "next-i18next"; import Link from "next/link"; import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { Controller, useForm, useFormContext } from "react-hook-form"; import type { MultiValue } from "react-select"; import { z } from "zod"; @@ -16,7 +16,17 @@ 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 { Button, Editor, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui"; +import { + Button, + Label, + Select, + SettingsToggle, + Skeleton, + TextField, + Editor, + SkeletonContainer, + SkeletonText, +} from "@calcom/ui"; import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon"; import { EditLocationDialog } from "@components/dialog/EditLocationDialog"; @@ -35,6 +45,33 @@ const getLocationFromType = ( } }; +interface DescriptionEditorProps { + description?: string | null; +} + +const DescriptionEditor = (props: DescriptionEditorProps) => { + const formMethods = useFormContext(); + const [mounted, setIsMounted] = useState(false); + const { t } = useLocale(); + const { description } = props; + useEffect(() => { + setIsMounted(true); + }, []); + + return mounted ? ( + md.render(formMethods.getValues("description") || description || "")} + setText={(value: string) => formMethods.setValue("description", turndown(value))} + excludedToolbarItems={["blockType"]} + placeholder={t("quick_video_meeting")} + /> + ) : ( + + + + ); +}; + export const EventSetupTab = ( props: Pick< EventTypeSetupProps, @@ -281,12 +318,7 @@ export const EventSetupTab = ( />
- md.render(formMethods.getValues("description") || eventType.description || "")} - setText={(value: string) => formMethods.setValue("description", turndown(value))} - excludedToolbarItems={["blockType"]} - placeholder={t("quick_video_meeting")} - /> +
{ }; const EventTypePageWrapper = (props: inferSSRProps) => { - const { data, isLoading } = trpc.viewer.eventTypes.get.useQuery({ id: props.type }); - if (isLoading || !data) return null; - return ; + const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type }); + + return ; }; export const getServerSideProps = async (context: GetServerSidePropsContext) => { @@ -394,26 +392,13 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => }; } - try { - const res = await getEventTypeById({ eventTypeId: typeParam, userId: session.user.id, prisma }); - - return { - props: { - // session, - type: typeParam, - trpcState: ssr.dehydrate(), - initialData: { - eventType: res.eventType, - locationOptions: res.locationOptions, - team: res.team, - teamMembers: res.teamMembers, - currentUserMembership: res.currentUserMembership, - }, - }, - }; - } catch (err) { - throw err; - } + await ssr.viewer.eventTypes.get.prefetch({ id: typeParam }); + return { + props: { + type: typeParam, + trpcState: ssr.dehydrate(), + }, + }; }; export default EventTypePageWrapper;