cal/apps/web/lib/clock.ts
Jeroen Reumkens 6d45e1c7c7
#4533: Show correct time format on booking page (#4771)
* #4533: Store timeformat preferences in localstorage when changing profile. This way you see the correct format on the booking page. Also abstracted the reuse of the localstorage key for timeformat into a small util function, to prevent typos in the future.

* Update apps/web/components/booking/pages/AvailabilityPage.tsx

* 4533: Changed 24hfromlocalstorage values from strings to real booleans for better DX.

* Update apps/web/lib/clock.ts

Co-authored-by: alannnc <alannnc@gmail.com>

* Make code shorter by only handling remaining cases

Co-authored-by: alannnc <alannnc@gmail.com>

* Remove unnecessary boolean check

Co-authored-by: alannnc <alannnc@gmail.com>

Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: alannnc <alannnc@gmail.com>
2022-09-30 14:45:28 +02:00

55 lines
1.5 KiB
TypeScript

// handles logic related to user clock display using 24h display / timeZone options.
import dayjs from "@calcom/dayjs";
import {
getIs24hClockFromLocalStorage,
isBrowserLocale24h,
setIs24hClockInLocalStorage,
} from "@calcom/lib/timeFormat";
import { localStorage } from "@calcom/lib/webstorage";
interface TimeOptions {
is24hClock: boolean;
inviteeTimeZone: string;
}
const timeOptions: TimeOptions = {
is24hClock: false,
inviteeTimeZone: "",
};
const isInitialized = false;
const initClock = () => {
if (isInitialized) {
return;
}
// This only sets browser locale if there's no preference on localStorage.
if (getIs24hClockFromLocalStorage() === null) set24hClock(isBrowserLocale24h());
timeOptions.is24hClock = !!getIs24hClockFromLocalStorage();
timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
};
const is24h = (is24hClock?: boolean) => {
initClock();
if (typeof is24hClock !== "undefined") set24hClock(is24hClock);
return timeOptions.is24hClock;
};
const set24hClock = (is24hClock: boolean) => {
setIs24hClockInLocalStorage(is24hClock);
timeOptions.is24hClock = is24hClock;
};
function setTimeZone(selectedTimeZone: string) {
localStorage.setItem("timeOption.preferredTimeZone", selectedTimeZone);
timeOptions.inviteeTimeZone = selectedTimeZone;
}
const timeZone = (selectedTimeZone?: string) => {
initClock();
if (selectedTimeZone) setTimeZone(selectedTimeZone);
return timeOptions.inviteeTimeZone;
};
export { is24h, timeZone };