Improvements to mobile UI (#119)

utils/date-time-utils.ts

@@ -1,4 +1,11 @@
-import { format, isSameDay } from "date-fns";
+import { Option } from "@prisma/client";
+import {
+  differenceInHours,
+  differenceInMinutes,
+  format,
+  formatDuration,
+  isSameDay,
+} from "date-fns";
 import { formatInTimeZone } from "date-fns-tz";
 import spacetime from "spacetime";
 
@@ -16,57 +23,161 @@ export const encodeDateOption = (option: DateTimeOption) => {
     : option.date;
 };
 
-type ParsedDateTimeOpton = { day: string; dow: string; month: string } & (
-  | {
-      type: "timeSlot";
-      startTime: string;
-      endTime: string;
-    }
-  | {
-      type: "date";
-    }
-);
+export interface ParsedDateOption {
+  type: "date";
+  optionId: string;
+  day: string;
+  dow: string;
+  month: string;
+}
+
+export interface ParsedTimeSlotOption {
+  type: "timeSlot";
+  optionId: string;
+  day: string;
+  dow: string;
+  month: string;
+  startTime: string;
+  endTime: string;
+  duration: string;
+}
+
+export type ParsedDateTimeOpton = ParsedDateOption | ParsedTimeSlotOption;
+
+const isTimeSlot = (value: string) => value.indexOf("/") !== -1;
+
+const getDuration = (startTime: Date, endTime: Date) => {
+  const hours = Math.floor(differenceInHours(endTime, startTime));
+  const minutes = Math.floor(
+    differenceInMinutes(endTime, startTime) - hours * 60,
+  );
+  return formatDuration({ hours, minutes });
+};
+
+export const decodeOptions = (
+  options: Option[],
+  timeZone: string | null,
+  targetTimeZone: string,
+):
+  | { pollType: "date"; options: ParsedDateOption[] }
+  | { pollType: "timeSlot"; options: ParsedTimeSlotOption[] } => {
+  const pollType = isTimeSlot(options[0].value) ? "timeSlot" : "date";
+
+  if (pollType === "timeSlot") {
+    return {
+      pollType,
+      options: options.map((option) =>
+        parseTimeSlotOption(option, timeZone, targetTimeZone),
+      ),
+    };
+  } else {
+    return {
+      pollType,
+      options: options.map((option) => parseDateOption(option)),
+    };
+  }
+};
+
+const parseDateOption = (option: Option): ParsedDateOption => {
+  const dateString =
+    option.value.indexOf("T") === -1
+      ? // we add the time because otherwise Date will assume UTC time which might change the day for some time zones
+        option.value + "T00:00:00"
+      : option.value;
+  const date = new Date(dateString);
+  return {
+    type: "date",
+    optionId: option.id,
+    day: format(date, "d"),
+    dow: format(date, "E"),
+    month: format(date, "MMM"),
+  };
+};
+
+const parseTimeSlotOption = (
+  option: Option,
+  timeZone: string | null,
+  targetTimeZone: string,
+): ParsedTimeSlotOption => {
+  const [start, end] = option.value.split("/");
+  if (timeZone && targetTimeZone) {
+    const startDate = spacetime(start, timeZone).toNativeDate();
+    const endDate = spacetime(end, timeZone).toNativeDate();
+    return {
+      type: "timeSlot",
+      optionId: option.id,
+      startTime: formatInTimeZone(startDate, targetTimeZone, "hh:mm a"),
+      endTime: formatInTimeZone(endDate, targetTimeZone, "hh:mm a"),
+      day: formatInTimeZone(startDate, targetTimeZone, "d"),
+      dow: formatInTimeZone(startDate, targetTimeZone, "E"),
+      month: formatInTimeZone(startDate, targetTimeZone, "MMM"),
+      duration: getDuration(startDate, endDate),
+    };
+  } else {
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    return {
+      type: "timeSlot",
+      optionId: option.id,
+      startTime: format(startDate, "hh:mm a"),
+      endTime: format(endDate, "hh:mm a"),
+      day: format(startDate, "d"),
+      dow: format(startDate, "E"),
+      month: format(startDate, "MMM"),
+      duration: getDuration(startDate, endDate),
+    };
+  }
+};
 
 export const decodeDateOption = (
-  option: string,
+  option: Option,
   timeZone: string | null,
   targetTimeZone: string,
 ): ParsedDateTimeOpton => {
-  const isTimeRange = option.indexOf("/") !== -1;
+  const isTimeRange = option.value.indexOf("/") !== -1;
   // option can either be an ISO date (ex. 2000-01-01)
   // or a time range (ex. 2000-01-01T08:00:00/2000-01-01T09:00:00)
   if (isTimeRange) {
-    const [start, end] = option.split("/");
+    const [start, end] = option.value.split("/");
 
     if (timeZone && targetTimeZone) {
       const startDate = spacetime(start, timeZone).toNativeDate();
       const endDate = spacetime(end, timeZone).toNativeDate();
       return {
         type: "timeSlot",
+        optionId: option.id,
         startTime: formatInTimeZone(startDate, targetTimeZone, "hh:mm a"),
         endTime: formatInTimeZone(endDate, targetTimeZone, "hh:mm a"),
         day: formatInTimeZone(startDate, targetTimeZone, "d"),
         dow: formatInTimeZone(startDate, targetTimeZone, "E"),
         month: formatInTimeZone(startDate, targetTimeZone, "MMM"),
+        duration: getDuration(startDate, endDate),
       };
     } else {
-      const date = new Date(start);
+      const startDate = new Date(start);
+      const endDate = new Date(end);
       return {
         type: "timeSlot",
-        startTime: format(date, "hh:mm a"),
-        endTime: format(new Date(end), "hh:mm a"),
-        day: format(date, "d"),
-        dow: format(date, "E"),
-        month: format(date, "MMM"),
+        optionId: option.id,
+        startTime: format(startDate, "hh:mm a"),
+        endTime: format(endDate, "hh:mm a"),
+        day: format(startDate, "d"),
+        dow: format(startDate, "E"),
+        month: format(startDate, "MMM"),
+        duration: getDuration(startDate, endDate),
       };
     }
   }
 
   // we add the time because otherwise Date will assume UTC time which might change the day for some time zones
-  const dateString = option.indexOf("T") === -1 ? option + "T00:00:00" : option;
+  const dateString =
+    option.value.indexOf("T") === -1
+      ? option.value + "T00:00:00"
+      : option.value;
   const date = new Date(dateString);
   return {
     type: "date",
+    optionId: option.id,
     day: format(date, "d"),
     dow: format(date, "E"),
     month: format(date, "MMM"),