import { useRouter } from "next/router"; import { useMemo } from "react"; import { useForm, Controller } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { setIs24hClockInLocalStorage } from "@calcom/lib/timeFormat"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import { Button } from "@calcom/ui/v2/core/Button"; import Meta from "@calcom/ui/v2/core/Meta"; import TimezoneSelect from "@calcom/ui/v2/core/TimezoneSelect"; import { Form, Label } from "@calcom/ui/v2/core/form/fields"; import Select from "@calcom/ui/v2/core/form/select"; import { getLayout } from "@calcom/ui/v2/core/layouts/SettingsLayout"; import showToast from "@calcom/ui/v2/core/notifications"; import { SkeletonContainer, SkeletonText, SkeletonButton } from "@calcom/ui/v2/core/skeleton"; import { withQuery } from "@lib/QueryCell"; import { nameOfDay } from "@lib/core/i18n/weekday"; const SkeletonLoader = () => { return (
); }; interface GeneralViewProps { localeProp: string; user: inferQueryOutput<"viewer.me">; } const WithQuery = withQuery(["viewer.public.i18n"], { trpc: { context: { skipBatch: true } } }); const GeneralQueryView = () => { const { t } = useLocale(); const { data: user, isLoading } = trpc.useQuery(["viewer.me"]); 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.useMutation("viewer.updateProfile", { onSuccess: () => { showToast(t("settings_updated_successfully"), "success"); }, onError: () => { showToast(t("error_updating_settings"), "error"); }, onSettled: async () => { await utils.invalidateQueries(["viewer.public.i18n"]); }, }); 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), }, }, }); return (
{ setIs24hClockInLocalStorage(values.timeFormat.value === 24); 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); }} /> )} /> ( <> { if (event) formMethods.setValue("weekStart", { ...event }); }} /> )} /> ); }; GeneralQueryView.getLayout = getLayout; export default GeneralQueryView;