From e0d1b6b5ea91cd8b865e0e00b1e53ac6f4cdfb33 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Thu, 18 Nov 2021 03:29:36 +0000
Subject: [PATCH] Working availability Schedule for every timezone (few things
 TODO) (#1187)

---
 components/ui/form/Schedule.tsx | 38 ++++++++++++++++++++++-----------
 pages/[user]/[type].tsx         |  2 +-
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/components/ui/form/Schedule.tsx b/components/ui/form/Schedule.tsx
index f5f0edde..662972d9 100644
--- a/components/ui/form/Schedule.tsx
+++ b/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))}
           />
         )}
diff --git a/pages/[user]/[type].tsx b/pages/[user]/[type].tsx
index 0659549b..a5d65b6b 100644
--- a/pages/[user]/[type].tsx
+++ b/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
   );