Working availability Schedule for every timezone (few things TODO) (#1187)

components/ui/form/Schedule.tsx

@@ -2,7 +2,7 @@ import { PlusIcon, TrashIcon } from "@heroicons/react/outline";
 import dayjs, { Dayjs, ConfigType } from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { Controller, useFieldArray } from "react-hook-form";
 
 import { defaultDayRange } from "@lib/availability";
@@ -36,17 +36,31 @@ const TIMES = (() => {
 })();
 /** End Time Increments For Select */
 
+type Option = {
+  readonly label: string;
+  readonly value: number;
+};
+
 type TimeRangeFieldProps = {
   name: string;
 };
 
 const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
+  // Lazy-loaded options, otherwise adding a field has a noticable redraw delay.
+  const [options, setOptions] = useState<Option[]>([]);
+  // const { i18n } = useLocale();
   const getOption = (time: ConfigType) => ({
-    value: dayjs(time).utc(true).toDate().valueOf(),
-    label: dayjs(time).toDate().toLocaleTimeString("nl-NL", { minute: "numeric", hour: "numeric" }),
+    value: dayjs(time).toDate().valueOf(),
+    label: dayjs(time).utc().format("HH:mm"),
+    // .toLocaleTimeString(i18n.language, { minute: "numeric", hour: "numeric" }),
   });
 
-  const timeOptions = TIMES.map((t) => getOption(t));
+  const timeOptions = useCallback((offsetOrLimit: { offset?: number; limit?: number } = {}) => {
+    const { limit, offset } = offsetOrLimit;
+    return TIMES.filter((time) => (!limit || time.isBefore(limit)) && (!offset || time.isAfter(offset))).map(
+      (t) => getOption(t)
+    );
+  }, []);
 
   return (
     <>
@@ -55,10 +69,10 @@ const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
         render={({ field: { onChange, value } }) => (
           <Select
             className="w-[6rem]"
-            options={timeOptions}
-            value={timeOptions.filter(function (option) {
-              return option.value === getOption(value).value;
-            })}
+            options={options}
+            onFocus={() => setOptions(timeOptions())}
+            onBlur={() => setOptions([])}
+            defaultValue={getOption(value)}
             onChange={(option) => onChange(new Date(option?.value as number))}
           />
         )}
@@ -69,10 +83,10 @@ const TimeRangeField = ({ name }: TimeRangeFieldProps) => {
         render={({ field: { onChange, value } }) => (
           <Select
             className="w-[6rem]"
-            options={timeOptions}
-            value={timeOptions.filter(function (option) {
-              return option.value === getOption(value).value;
-            })}
+            options={options}
+            onFocus={() => setOptions(timeOptions())}
+            onBlur={() => setOptions([])}
+            defaultValue={getOption(value)}
             onChange={(option) => onChange(new Date(option?.value as number))}
           />
         )}

pages/[user]/[type].tsx

@@ -168,7 +168,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const workingHours = getWorkingHours(
     {
-      timeZone: user.timeZone,
+      timeZone: eventType.timeZone || user.timeZone,
     },
     eventType.availability.length ? eventType.availability : user.availability
   );