import { useRouter } from "next/router"; import type { FormEvent } from "react"; import { useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { md } from "@calcom/lib/markdownIt"; import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import turndown from "@calcom/lib/turndownService"; import { trpc } from "@calcom/trpc/react"; import { Avatar, Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui"; import { ArrowRight } from "@calcom/ui/components/icon"; type FormData = { bio: string; }; const UserProfile = () => { const [user] = trpc.viewer.me.useSuspenseQuery(); const { t } = useLocale(); const avatarRef = useRef(null); const { setValue, handleSubmit, getValues } = useForm({ defaultValues: { bio: user?.bio || "" }, }); const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery(); const [imageSrc, setImageSrc] = useState(user?.avatar || ""); const utils = trpc.useContext(); const router = useRouter(); const createEventType = trpc.viewer.eventTypes.create.useMutation(); const telemetry = useTelemetry(); const [firstRender, setFirstRender] = useState(true); const mutation = trpc.viewer.updateProfile.useMutation({ onSuccess: async (_data, context) => { if (context.avatar) { showToast(t("your_user_profile_updated_successfully"), "success"); await utils.viewer.me.refetch(); } else { try { if (eventTypes?.length === 0) { await Promise.all( DEFAULT_EVENT_TYPES.map(async (event) => { return createEventType.mutate(event); }) ); } } catch (error) { console.error(error); } await utils.viewer.me.refetch(); router.push("/"); } }, onError: () => { showToast(t("problem_saving_user_profile"), "error"); }, }); const onSubmit = handleSubmit((data: { bio: string }) => { const { bio } = data; telemetry.event(telemetryEventTypes.onboardingFinished); mutation.mutate({ bio, completedOnboarding: true, }); }); async function updateProfileHandler(event: FormEvent) { event.preventDefault(); const enteredAvatar = avatarRef.current?.value; mutation.mutate({ avatar: enteredAvatar, }); } const DEFAULT_EVENT_TYPES = [ { title: t("15min_meeting"), slug: "15min", length: 15, }, { title: t("30min_meeting"), slug: "30min", length: 30, }, { title: t("secret_meeting"), slug: "secret", length: 15, hidden: true, }, ]; return (
{user && ( )}
{ if (avatarRef.current) { avatarRef.current.value = newAvatar; } const nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" )?.set; nativeInputValueSetter?.call(avatarRef.current, newAvatar); const ev2 = new Event("input", { bubbles: true }); avatarRef.current?.dispatchEvent(ev2); updateProfileHandler(ev2 as unknown as FormEvent); setImageSrc(newAvatar); }} imageSrc={imageSrc} />
md.render(getValues("bio") || user?.bio || "")} setText={(value: string) => setValue("bio", turndown(value))} excludedToolbarItems={["blockType"]} firstRender={firstRender} setFirstRender={setFirstRender} />

{t("few_sentences_about_yourself")}

); }; export default UserProfile;