From 926a37c31b4bc85e1c0c7fb7e8ca2874f9c45788 Mon Sep 17 00:00:00 2001 From: Leonardo Stenico Date: Thu, 6 May 2021 19:34:33 +0200 Subject: [PATCH 1/2] Updated react-timezone-select --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 6f8c8147..7deef52d 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "next-transpile-modules": "^7.0.0", "react": "17.0.1", "react-dom": "17.0.1", - "react-timezone-select": "^0.10.10" + "react-timezone-select": "^1.0.2" }, "devDependencies": { "@types/node": "^14.14.33", diff --git a/yarn.lock b/yarn.lock index 35d9f46f..b3f1af68 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2625,10 +2625,10 @@ react-select@^4.2.1: react-input-autosize "^3.0.0" react-transition-group "^4.3.0" -react-timezone-select@^0.10.10: - version "0.10.10" - resolved "https://registry.yarnpkg.com/react-timezone-select/-/react-timezone-select-0.10.10.tgz#853aeb73e84fcf00bd01eb57c35f2df1b84e1cc0" - integrity sha512-PEEQQkiL+fFW3940MmhrX6xNf2VMz16BW2UyF6Mu7jzCv89McwJ93Bp5mqE6ouhLPZSsyTnhjILifsEFUUMuFg== +react-timezone-select@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-timezone-select/-/react-timezone-select-1.0.2.tgz#37e6d99bc15372bd3f9ebc7541bda6f3a10c852b" + integrity sha512-MDv4rmDkop3nZcIH27tLwIuIVovJE6ushmr9r0kR1SSzVErdydV01vI1ch8u4JAAFpnR5lYDt5PBqQW/lUS+Jg== dependencies: react-select "^4.2.1" spacetime "^6.14.0" From 084c7db559fba6df472af2e874d8d7de0073c5b1 Mon Sep 17 00:00:00 2001 From: Leonardo Stenico Date: Thu, 6 May 2021 19:36:57 +0200 Subject: [PATCH 2/2] Now a user can choose a timezone to display slots when scheduling a meeting --- lib/slots.ts | 4 +- pages/[user]/[type].tsx | 102 ++++++++++++++++++++++------------------ 2 files changed, 57 insertions(+), 49 deletions(-) diff --git a/lib/slots.ts b/lib/slots.ts index 318b1bed..157b56a6 100644 --- a/lib/slots.ts +++ b/lib/slots.ts @@ -23,7 +23,7 @@ const getSlots = ({ if(!selectedDate) return [] - const lowerBound = selectedDate.startOf("day"); + const lowerBound = selectedDate.tz(selectedTimeZone).startOf("day"); // Simple case, same timezone if (calendarTimeZone === selectedTimeZone) { @@ -42,7 +42,7 @@ const getSlots = ({ return slots; } - const upperBound = selectedDate.endOf("day"); + const upperBound = selectedDate.tz(selectedTimeZone).endOf("day"); // We need to start generating slots from the start of the calendarTimeZone day const startDateTime = lowerBound diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx index c33d0956..728694da 100644 --- a/pages/[user]/[type].tsx +++ b/pages/[user]/[type].tsx @@ -5,6 +5,7 @@ import prisma from '../../lib/prisma'; import { useRouter } from 'next/router'; import dayjs, { Dayjs } from 'dayjs'; import { Switch } from '@headlessui/react'; +import TimezoneSelect from 'react-timezone-select'; import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'; import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; import isBetween from 'dayjs/plugin/isBetween'; @@ -32,6 +33,14 @@ export default function Type(props) { const [busy, setBusy] = useState([]); const telemetry = useTelemetry(); + const [selectedTimeZone, setSelectedTimeZone] = useState(''); + + useEffect(() => { + // Setting timezone only client-side + setSelectedTimeZone(dayjs.tz.guess()) + }, []) + + // Get router variables const router = useRouter(); const { user } = router.query; @@ -81,13 +90,13 @@ export default function Type(props) { const calendar = [...emptyDays, ...days.map((day) => )]; - // Handle date change + // Handle date change and timezone change useEffect(() => { const changeDate = async () => { if (!selectedDate) { @@ -101,17 +110,18 @@ export default function Type(props) { setLoading(false); } changeDate(); - }, [selectedDate]); + }, [selectedDate, selectedTimeZone]); - - const times = getSlots({ - calendarTimeZone: props.user.timeZone, - selectedTimeZone: dayjs.tz.guess(), - eventLength: props.eventType.length, - selectedDate: selectedDate, - dayStartTime: props.user.startTime, - dayEndTime: props.user.endTime, - }) + const times = useMemo(() => + getSlots({ + calendarTimeZone: props.user.timeZone, + selectedTimeZone: selectedTimeZone, + eventLength: props.eventType.length, + selectedDate: selectedDate, + dayStartTime: props.user.startTime, + dayEndTime: props.user.endTime, + }) + , [selectedDate, selectedTimeZone]) // Check for conflicts for(let i = times.length - 1; i >= 0; i -= 1) { @@ -135,7 +145,7 @@ export default function Type(props) { const availableTimes = times.map((time) =>
- {dayjs(time).tz(dayjs.tz.guess()).format(is24h ? "HH:mm" : "hh:mma")} + {dayjs(time).tz(selectedTimeZone).format(is24h ? "HH:mm" : "hh:mma")}
); @@ -158,39 +168,37 @@ export default function Type(props) { {props.eventType.length} minutes

- - { isTimeOptionsOpen && -
- - - am/pm - - - Use setting - - - 24h - - -
- } +

+ + + + am/pm + + + Use setting + + + 24h + + +

+

+ setSelectedTimeZone(value)} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" /> +

{props.eventType.description}

@@ -268,4 +276,4 @@ export async function getServerSideProps(context) { eventType }, } -} \ No newline at end of file +}