Merge pull request #18 from Spiteless/fix_timezone_bugs

fix: Resolve timezone bugs
timfee · Jun 17, 2023 · ae67dde · ae67dde
2 parents 8f6a86f + 1e1c8eb
commit ae67dde
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 8 deletions.
diff --git a/components/availability/date/Calendar.tsx b/components/availability/date/Calendar.tsx
@@ -64,6 +64,7 @@ export default function Calendar({
         </div>
       ))}
       {days.map((day) => {
+        const availabilityTest = offers[day.toString()] ?? []
         return (
           <DayButton
             key={day.toString()}
@@ -72,6 +73,7 @@ export default function Calendar({
               openSlots: offers[day.toString()]?.length ?? 0,
               maximumAvailability,
             })}
+            hasAvailability={availabilityTest.length > 0}
           />
         )
       })}

diff --git a/components/availability/date/DayButton.tsx b/components/availability/date/DayButton.tsx
@@ -8,6 +8,7 @@ import Day from "@/lib/day"
 type DayProps = {
   date: Day
   availabilityScore: number
+  hasAvailability: boolean
 } & DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
@@ -16,6 +17,7 @@ type DayProps = {
 export default function DayButton({
   date,
   availabilityScore,
+  hasAvailability,
   ...props
 }: DayProps): JSX.Element {
   const {
@@ -29,13 +31,11 @@ export default function DayButton({
 
   const isToday = date.toString() === now.toString()
 
-  const isOutOfRange = date < now || date > end || date < start
-
   const isSelected = selectedDate
     ? date.toString() === selectedDate.toString()
     : false
 
-  const isDisabled = isOutOfRange || availabilityScore === 0
+  const isDisabled = !hasAvailability
 
   return (
     <button

diff --git a/lib/availability/getPotentialTimes.ts b/lib/availability/getPotentialTimes.ts
@@ -23,8 +23,8 @@ export default function getPotentialTimes({
 
   // Sort the slots by start time
   const days = eachDayOfInterval({
-    start: start.toInterval().start,
-    end: end.toInterval().end,
+    start: start.toInterval("Etc/GMT").start,
+    end: end.toInterval("Etc/GMT").end,
   })
   days.forEach((day) => {
     const dayOfWeek = day.getDay()

diff --git a/lib/locale.ts b/lib/locale.ts
@@ -0,0 +1,15 @@
+import { format } from 'date-fns-tz'
+
+/**
+ * Returns a string representation of the Date object
+ * in 'YYYY-MM-DD' format, respecting the user's timezone.
+ *
+ * @returns {string} The formatted date string.
+ */
+export default function localeDayString(date: Date): string {
+  const dateOptions: Intl.DateTimeFormatOptions = { 
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone 
+  };
+  const dateString: string = format( date, 'yyyy-MM-dd', { timeZone: dateOptions.timeZone } )
+  return dateString
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -22,6 +22,7 @@ import {
   mapStringsToDates,
 } from "@/lib/availability/helpers"
 import Day from "@/lib/day"
+import localeDayString from "@/lib/locale"
 
 export type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>
 
@@ -52,18 +53,21 @@ function Page({
 
   const slots = offers.filter((slot) => {
     return (
-      slot.start >= startDay.toInterval().start &&
-      slot.end <= endDay.toInterval().end
+      slot.start >= startDay.toInterval("Etc/GMT").start &&
+      slot.end <= endDay.toInterval("Etc/GMT").end
     )
   })
 
   // If we got this far and there's no selectedDate, set it to the first date
   // with some availability.
   useEffect(() => {
     if (!selectedDate && slots.length > 0) {
+      const date: Date = slots[0].start;
+      const dateString: string = localeDayString(date)
+
       dispatch({
         type: "SET_SELECTED_DATE",
-        payload: Day.dayFromDate(slots[0].start),
+        payload: Day.dayFromString(dateString), //payload from date respecting timezone
       })
     }
     // Run once, on initial render.