Display correct time format on availability page (#3441)
* Pass time format * Write 24hr time format * Remove console.log * Change regex * Add console.log * Remove console.log * Remove console.log * Update TimeOptions.tsx * Write time format to localstorage on user create / edit * Grab and set from local storage * On user create grab timeformat from browser * Update timeFormat in DB * Fix typo Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
This commit is contained in:
parent
538c5dff43
commit
35259b75f6
|
@ -1,9 +1,8 @@
|
|||
import { FC, useEffect, useState } from "react";
|
||||
|
||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||
import Switch from "@calcom/ui/Switch";
|
||||
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
|
||||
import TimezoneSelect, { ITimezoneOption } from "@components/ui/form/TimezoneSelect";
|
||||
|
||||
import { is24h, timeZone } from "../../lib/clock";
|
||||
|
@ -11,11 +10,12 @@ import { is24h, timeZone } from "../../lib/clock";
|
|||
type Props = {
|
||||
onSelectTimeZone: (selectedTimeZone: string) => void;
|
||||
onToggle24hClock: (is24hClock: boolean) => void;
|
||||
timeFormat: string;
|
||||
};
|
||||
|
||||
const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
|
||||
const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
|
||||
const [selectedTimeZone, setSelectedTimeZone] = useState("");
|
||||
const [is24hClock, setIs24hClock] = useState(false);
|
||||
const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
|
||||
const { t } = useLocale();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -241,15 +241,18 @@ function TimezoneDropdown({
|
|||
onChangeTimeFormat,
|
||||
onChangeTimeZone,
|
||||
timeZone,
|
||||
timeFormat,
|
||||
}: {
|
||||
onChangeTimeFormat: (newTimeFormat: string) => void;
|
||||
onChangeTimeZone: (newTimeZone: string) => void;
|
||||
timeZone?: string;
|
||||
timeFormat: string;
|
||||
}) {
|
||||
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
|
@ -277,7 +280,11 @@ function TimezoneDropdown({
|
|||
</p>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
|
||||
<TimeOptions
|
||||
onSelectTimeZone={handleSelectTimeZone}
|
||||
onToggle24hClock={handleToggle24hClock}
|
||||
timeFormat={timeFormat}
|
||||
/>
|
||||
</Collapsible.Content>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
|
@ -363,6 +370,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
|
|||
const timezoneDropdown = useMemo(
|
||||
() => (
|
||||
<TimezoneDropdown
|
||||
timeFormat={timeFormat}
|
||||
onChangeTimeFormat={setTimeFormat}
|
||||
timeZone={timeZone}
|
||||
onChangeTimeZone={setTimeZone}
|
||||
|
|
|
@ -4,9 +4,27 @@
|
|||
* based on the user's preferred language
|
||||
* defaults to 'en-US' (12h) if no navigator language is found
|
||||
*/
|
||||
import { localStorage } from "@calcom/lib/webstorage";
|
||||
|
||||
export const isBrowserLocale24h = () => {
|
||||
const localStorageTimeFormat = localStorage.getItem("timeOption.is24hClock");
|
||||
// If time format is already stored in the browser then retrieve and return early
|
||||
if (localStorageTimeFormat === "true") {
|
||||
return true;
|
||||
} else if (localStorageTimeFormat === "false") {
|
||||
return false;
|
||||
}
|
||||
|
||||
let locale = "en-US";
|
||||
if (typeof window !== "undefined" && navigator) locale = navigator?.language;
|
||||
return !new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/AM/);
|
||||
if (typeof window !== "undefined" && navigator) locale = window.navigator?.language;
|
||||
|
||||
if (!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/)) {
|
||||
localStorage.setItem("timeOption.is24hClock", "false");
|
||||
return false;
|
||||
} else {
|
||||
localStorage.setItem("timeOption.is24hClock", "true");
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
export const detectBrowserTimeFormat = isBrowserLocale24h() ? "H:mm" : "h:mma";
|
||||
|
|
|
@ -52,6 +52,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
|||
"name",
|
||||
"avatar",
|
||||
"timeZone",
|
||||
"timeFormat",
|
||||
"weekStart",
|
||||
"hideBranding",
|
||||
"theme",
|
||||
|
@ -68,6 +69,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
|
|||
bio: true,
|
||||
avatar: true,
|
||||
timeZone: true,
|
||||
timeFormat: true,
|
||||
weekStart: true,
|
||||
startTime: true,
|
||||
endTime: true,
|
||||
|
|
|
@ -27,6 +27,7 @@ import { DEFAULT_SCHEDULE } from "@lib/availability";
|
|||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import prisma from "@lib/prisma";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
|
||||
import { isBrowserLocale24h } from "@lib/timeFormat";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
import { Schedule as ScheduleType } from "@lib/types/schedule";
|
||||
|
||||
|
@ -214,8 +215,12 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
|
|||
);
|
||||
}
|
||||
}
|
||||
// Write default timeformat to localStorage
|
||||
const browserTimeFormat = isBrowserLocale24h() ? 24 : 12;
|
||||
|
||||
await updateUser({
|
||||
completedOnboarding: true,
|
||||
timeFormat: browserTimeFormat,
|
||||
});
|
||||
|
||||
setSubmitting(false);
|
||||
|
|
|
@ -178,6 +178,9 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
|
|||
const enteredLanguage = selectedLanguage.value;
|
||||
const enteredTimeFormat = selectedTimeFormat.value;
|
||||
|
||||
// Write time format to localStorage if available
|
||||
window.localStorage.setItem("timeOption.is24hClock", selectedTimeFormat.value === 12 ? "false" : "true");
|
||||
|
||||
// TODO: Add validation
|
||||
|
||||
mutation.mutate({
|
||||
|
|
|
@ -14,7 +14,6 @@ let client_secret = "";
|
|||
|
||||
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
|
||||
const { code } = req.query;
|
||||
console.log("🚀 ~ file: callback.ts ~ line 14 ~ handler ~ code", req.query);
|
||||
|
||||
if (typeof code !== "string") {
|
||||
res.status(400).json({ message: "No code returned" });
|
||||
|
|
Loading…
Reference in New Issue
Block a user