import { ArrowRightIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import { FormEvent, useRef, useState } from "react"; import { useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, ImageUploader, showToast, TextArea } from "@calcom/ui"; import { Avatar } from "@calcom/ui"; import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]"; type FormData = { bio: string; }; interface IUserProfileProps { user: IOnboardingPageProps["user"]; } const UserProfile = (props: IUserProfileProps) => { const { user } = props; const { t } = useLocale(); const avatarRef = useRef(null!); const bioRef = useRef(null); const { register, setValue, handleSubmit, formState: { errors }, } = 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 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; 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 && ( )}
{ 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} />