maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix time format on booking page (#5006) 

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Joe Au-Yeung 2022-10-14 15:15:03 -04:00 committed by GitHub
parent ff01da540d
commit c4f3dec854
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/components/booking/TimeOptions.tsx
View File

@ -28,6 +28,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
onSelectTimeZone(timeZone(selectedTimeZone));
}
}, [selectedTimeZone, onSelectTimeZone]);
const handle24hClockToggle = (is24hClock: boolean) => {
setIs24hClock(is24hClock);
onToggle24hClock(is24h(is24hClock));

11
apps/web/components/booking/pages/AvailabilityPage.tsx
View File

@ -1,7 +1,6 @@
// Get router variables
import autoAnimate from "@formkit/auto-animate";
import { EventType } from "@prisma/client";
import { SchedulingType } from "@prisma/client";
import * as Popover from "@radix-ui/react-popover";
import { TFunction } from "next-i18next";
import { useRouter } from "next/router";
@ -42,15 +41,12 @@ import Gates, { Gate, GateState } from "@components/Gates";
import AvailableTimes from "@components/booking/AvailableTimes";
import BookingDescription from "@components/booking/BookingDescription";
import TimeOptions from "@components/booking/TimeOptions";
import { UserAvatars } from "@components/booking/UserAvatars";
import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
import { HeadSeo } from "@components/seo/head-seo";
import PoweredByCal from "@components/ui/PoweredByCal";
import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
import { AvailableEventLocations } from "../AvailableEventLocations";
const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
const router = useRouter();
@ -235,7 +231,6 @@ function TimezoneDropdown({
useEffect(() => {
handleToggle24hClock(!!getIs24hClockFromLocalStorage());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
@ -324,7 +319,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
const isBackgroundTransparent = useIsBackgroundTransparent();
const [timeZone, setTimeZone] = useState<string>();
const [timeFormat, setTimeFormat] = useState(timeFormatFromProfile || detectBrowserTimeFormat);
const [timeFormat, setTimeFormat] = useState<string>("HH:mm");
const [gateState, gateDispatcher] = useReducer(
(state: GateState, newState: Partial<GateState>) => ({
...state,
@ -335,7 +331,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
useEffect(() => {
setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
}, []);
setTimeFormat(timeFormatFromProfile || detectBrowserTimeFormat);
}, [timeFormatFromProfile]);
// TODO: Improve this;
useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");

8
packages/lib/timeFormat.ts
View File

@ -28,9 +28,11 @@ export const isBrowserLocale24h = () => {
}
let locale = "en-US";
if (typeof window !== "undefined" && navigator) locale = window.navigator?.language;
if (typeof window !== "undefined" && navigator) {
locale = window.navigator?.language;
}
if (!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/)) {
if (!!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/i)) {
setIs24hClockInLocalStorage(false);
return false;
} else {
@ -39,4 +41,4 @@ export const isBrowserLocale24h = () => {
}
};
export const detectBrowserTimeFormat = isBrowserLocale24h() ? "H:mm" : "h:mma";
export const detectBrowserTimeFormat = isBrowserLocale24h() ? "HH:mm" : "h:mma";