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 { User } from "@calcom/prisma/client"; import { trpc } from "@calcom/trpc/react"; import { Button, showToast, TextArea } from "@calcom/ui/v2"; import ImageUploader from "@calcom/ui/v2/core/ImageUploader"; import { AvatarSSR } from "@components/ui/AvatarSSR"; interface IUserProfile { user?: User; } type FormData = { bio: string; }; const UserProfile = (props: IUserProfile) => { 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.useQuery(["viewer.eventTypes.list"]); const [imageSrc, setImageSrc] = useState(user?.avatar || ""); const utils = trpc.useContext(); const router = useRouter(); const createEventType = trpc.useMutation("viewer.eventTypes.create"); const mutation = trpc.useMutation("viewer.updateProfile", { onSuccess: async (_data, context) => { if (context.avatar) { showToast(t("your_user_profile_updated_successfully"), "success"); await utils.refetchQueries(["viewer.me"]); } 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.refetchQueries(["viewer.me"]); 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 (

{t("profile_picture")}

{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} />