import { GetServerSidePropsContext } from "next"; import { useRouter } from "next/router"; import { useMemo } from "react"; import { Controller, useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { RouterOutputs, trpc } from "@calcom/trpc/react"; import { Button, Form, getSettingsLayout as getLayout, Label, Meta, Select, showToast, SkeletonButton, SkeletonContainer, SkeletonText, TimezoneSelect, } from "@calcom/ui"; import { withQuery } from "@lib/QueryCell"; import { nameOfDay } from "@lib/core/i18n/weekday"; import { ssrInit } from "@server/lib/ssr"; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { return (
); }; interface GeneralViewProps { localeProp: string; user: RouterOutputs["viewer"]["me"]; } const WithQuery = withQuery(trpc.viewer.public.i18n, undefined, { trpc: { context: { skipBatch: true } } }); const GeneralQueryView = () => { const { t } = useLocale(); const { data: user, isLoading } = trpc.viewer.me.useQuery(); if (isLoading) return ; if (!user) { throw new Error(t("something_went_wrong")); } return ( } customLoader={} /> ); }; const GeneralView = ({ localeProp, user }: GeneralViewProps) => { const router = useRouter(); const utils = trpc.useContext(); const { t } = useLocale(); const mutation = trpc.viewer.updateProfile.useMutation({ onSuccess: () => { reset(getValues()); showToast(t("settings_updated_successfully"), "success"); }, onError: () => { showToast(t("error_updating_settings"), "error"); }, onSettled: async () => { await utils.viewer.public.i18n.invalidate(); }, }); const localeOptions = useMemo(() => { return (router.locales || []).map((locale) => ({ value: locale, label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "", })); }, [router.locales]); const timeFormatOptions = [ { value: 12, label: t("12_hour") }, { value: 24, label: t("24_hour") }, ]; const weekStartOptions = [ { value: "Sunday", label: nameOfDay(localeProp, 0) }, { value: "Monday", label: nameOfDay(localeProp, 1) }, { value: "Tuesday", label: nameOfDay(localeProp, 2) }, { value: "Wednesday", label: nameOfDay(localeProp, 3) }, { value: "Thursday", label: nameOfDay(localeProp, 4) }, { value: "Friday", label: nameOfDay(localeProp, 5) }, { value: "Saturday", label: nameOfDay(localeProp, 6) }, ]; const formMethods = useForm({ defaultValues: { locale: { value: localeProp || "", label: localeOptions.find((option) => option.value === localeProp)?.label || "", }, timeZone: user.timeZone || "", timeFormat: { value: user.timeFormat || 12, label: timeFormatOptions.find((option) => option.value === user.timeFormat)?.label || 12, }, weekStart: { value: user.weekStart, label: nameOfDay(localeProp, user.weekStart === "Sunday" ? 0 : 1), }, }, }); const { formState: { isDirty, isSubmitting }, reset, getValues, } = formMethods; const isDisabled = isSubmitting || !isDirty; return (
{ mutation.mutate({ ...values, locale: values.locale.value, timeFormat: values.timeFormat.value, weekStart: values.weekStart.value, }); }}> ( <> className="capitalize" options={localeOptions} value={value} onChange={onChange} /> )} /> ( <> { if (event) formMethods.setValue("timeZone", event.value, { shouldDirty: true }); }} /> )} /> ( <> { if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true }); }} /> )} /> ); }; GeneralQueryView.getLayout = getLayout; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const ssr = await ssrInit(context); return { props: { trpcState: ssr.dehydrate(), }, }; }; export default GeneralQueryView;