Heavily simplified the startTime and endTime display by removing dayjs from SetTimesModal

components/ui/Scheduler.tsx

@@ -50,13 +50,16 @@ export const Scheduler = ({
   const addNewSchedule = () => setEditSchedule(openingHours.length);
 
   const applyEditSchedule = (changed) => {
+    // new entry
     if (!changed.days) {
       changed.days = [1, 2, 3, 4, 5]; // Mon - Fri
+      setOpeningHours(openingHours.concat(changed));
+    } else {
+      // update
+      const replaceWith = { ...openingHours[editSchedule], ...changed };
+      openingHours.splice(editSchedule, 1, replaceWith);
+      setOpeningHours([].concat(openingHours));
     }
-
-    const replaceWith = { ...openingHours[editSchedule], ...changed };
-    openingHours.splice(editSchedule, 1, replaceWith);
-    setOpeningHours([].concat(openingHours));
   };
 
   const removeScheduleAt = (toRemove: number) => {
@@ -69,9 +72,15 @@ export const Scheduler = ({
       <div className="inline-flex ml-2">
         <WeekdaySelect defaultValue={item.days} onSelect={(selected: number[]) => (item.days = selected)} />
         <button className="ml-2 text-sm px-2" type="button" onClick={() => setEditSchedule(idx)}>
-          {dayjs(item.startDate).format(item.startDate.minute() === 0 ? "ha" : "h:mma")}
+          {dayjs()
+            .startOf("day")
+            .add(item.startTime, "minutes")
+            .format(item.startTime % 60 === 0 ? "ha" : "h:mma")}
           &nbsp;until&nbsp;
-          {dayjs(item.endDate).format(item.endDate.minute() === 0 ? "ha" : "h:mma")}
+          {dayjs()
+            .startOf("day")
+            .add(item.endTime, "minutes")
+            .format(item.endTime % 60 === 0 ? "ha" : "h:mma")}
         </button>
       </div>
       <button
@@ -122,8 +131,9 @@ export const Scheduler = ({
       </div>
       {editSchedule >= 0 && (
         <SetTimesModal
-          schedule={{ ...openingHours[editSchedule], timeZone: selectedTimeZone }}
+          startTime={openingHours[editSchedule] ? openingHours[editSchedule].startTime : 540}
-          onChange={applyEditSchedule}
+          endTime={openingHours[editSchedule] ? openingHours[editSchedule].endTime : 1020}
+          onChange={(times) => applyEditSchedule({ ...(openingHours[editSchedule] || {}), ...times })}
           onExit={() => setEditSchedule(-1)}
         />
       )}

components/ui/modal/SetTimesModal.tsx

@@ -1,25 +1,9 @@
 import { ClockIcon } from "@heroicons/react/outline";
 import { useRef } from "react";
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/utc";
-dayjs.extend(utc);
-dayjs.extend(timezone);
 
 export default function SetTimesModal(props) {
-  const { startDate, endDate } = {
+  const [startHours, startMinutes] = [Math.floor(props.startTime / 60), props.startTime % 60];
-    startDate: dayjs
+  const [endHours, endMinutes] = [Math.floor(props.endTime / 60), props.endTime % 60];
-      .utc()
-      .startOf("day")
-      .add(props.schedule.startTime || 540, "minutes"),
-    endDate: dayjs
-      .utc()
-      .startOf("day")
-      .add(props.schedule.endTime || 1020, "minutes"),
-  };
-
-  startDate.tz(props.timeZone);
-  endDate.tz(props.timeZone);
 
   const startHoursRef = useRef<HTMLInputElement>();
   const startMinsRef = useRef<HTMLInputElement>();
@@ -35,8 +19,8 @@ export default function SetTimesModal(props) {
     const enteredEndMins = parseInt(endMinsRef.current.value);
 
     props.onChange({
-      startDate: startDate.minute(enteredStartMins).hour(enteredStartHours),
+      startTime: enteredStartHours * 60 + enteredStartMins,
-      endDate: endDate.minute(enteredEndMins).hour(enteredEndHours),
+      endTime: enteredEndHours * 60 + enteredEndMins,
     });
 
     props.onExit(0);
@@ -85,7 +69,7 @@ export default function SetTimesModal(props) {
                 id="startHours"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="9"
-                defaultValue={startDate.format("H")}
+                defaultValue={startHours}
               />
             </div>
             <span className="mx-2 pt-1">:</span>
@@ -104,7 +88,7 @@ export default function SetTimesModal(props) {
                 id="startMinutes"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="30"
-                defaultValue={startDate.format("m")}
+                defaultValue={startMinutes}
               />
             </div>
           </div>
@@ -124,7 +108,7 @@ export default function SetTimesModal(props) {
                 id="endHours"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="17"
-                defaultValue={endDate.format("H")}
+                defaultValue={endHours}
               />
             </div>
             <span className="mx-2 pt-1">:</span>
@@ -143,7 +127,7 @@ export default function SetTimesModal(props) {
                 id="endMinutes"
                 className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                 placeholder="30"
-                defaultValue={endDate.format("m")}
+                defaultValue={endMinutes}
               />
             </div>
           </div>

pages/availability/event/[type].tsx

@@ -118,16 +118,7 @@ export default function EventTypePage({
     };
 
     if (enteredAvailability) {
-      payload.availability = {
+      payload.availability = enteredAvailability;
-        dateOverrides: [],
-        openingHours: enteredAvailability.openingHours.map((item): OpeningHours => {
-          item.startTime = item.startDate.hour() * 60 + item.startDate.minute();
-          delete item.startDate;
-          item.endTime = item.endDate.hour() * 60 + item.endDate.minute();
-          delete item.endDate;
-          return item;
-        }),
-      };
     }
 
     await fetch("/api/availability/eventtype", {
@@ -855,7 +846,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async ({ req, query
       {
         days: [0, 1, 2, 3, 4, 5, 6],
         startTime: user.startTime,
-        length: user.endTime >= 1440 ? 1439 : user.endTime,
+        endTime: user.endTime,
       },
     ];