make dates work more consistently across timezones

Wave-Studio · Feb 16, 2024 · ab4dfad · ab4dfad
1 parent 955807d
commit ab4dfad
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 11 deletions.
diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -82,6 +82,7 @@ import * as $events_teams_filters from "./islands/events/teams/filters.tsx";
 import * as $events_teams_invite from "./islands/events/teams/invite.tsx";
 import * as $events_teams_manage from "./islands/events/teams/manage.tsx";
 import * as $events_viewing_availability from "./islands/events/viewing/availability.tsx";
+import * as $events_viewing_dates from "./islands/events/viewing/dates.tsx";
 import * as $events_viewing_delete from "./islands/events/viewing/delete.tsx";
 import * as $events_viewing_register from "./islands/events/viewing/register.tsx";
 import * as $events_viewing_selectShowTime from "./islands/events/viewing/selectShowTime.tsx";
@@ -191,6 +192,7 @@ const manifest = {
     "./islands/events/teams/invite.tsx": $events_teams_invite,
     "./islands/events/teams/manage.tsx": $events_teams_manage,
     "./islands/events/viewing/availability.tsx": $events_viewing_availability,
+    "./islands/events/viewing/dates.tsx": $events_viewing_dates,
     "./islands/events/viewing/delete.tsx": $events_viewing_delete,
     "./islands/events/viewing/register.tsx": $events_viewing_register,
     "./islands/events/viewing/selectShowTime.tsx":

diff --git a/islands/events/creation/three.tsx b/islands/events/creation/three.tsx
@@ -3,6 +3,7 @@ import { StateUpdater, useEffect, useState } from "preact/hooks";
 import { Event } from "@/utils/db/kv.types.ts";
 import ImagePicker from "../../components/pickers/image.tsx";
 import CTA from "@/components/buttons/cta.tsx";
+import { fixDate } from "@/utils/event/fixDate.ts";
 
 export default function StageThree({
   eventState,
@@ -18,6 +19,13 @@ export default function StageThree({
 
   useEffect(() => {
     (async () => {
+      // last minute fixes for date
+      // ensure that if a user sets a date for something the timezone works
+      eventState.value = {
+        ...eventState.value,
+        showTimes: fixDate(eventState.value.showTimes),
+      };
+
       setError(undefined);
       const data = await (
         await fetch("/api/events/create", {

diff --git a/islands/events/editing/showtimesettings.tsx b/islands/events/editing/showtimesettings.tsx
@@ -6,6 +6,7 @@ import { ShowTimeUI } from "@/islands/events/creation/one.tsx";
 import Plus from "$tabler/plus.tsx";
 import { useSignal } from "@preact/signals";
 import { Event } from "@/utils/db/kv.ts";
+import { fixDate } from "@/utils/event/fixDate.ts";
 
 export default function ShowTimeSettings({
   showTimes,
@@ -31,7 +32,7 @@ export default function ShowTimeSettings({
     const res = await fetch("/api/events/edit", {
       body: JSON.stringify({
         eventID,
-        newEventData: { showTimes: currentState.value } as Partial<Event>,
+        newEventData: { showTimes: fixDate(currentState.value) } as Partial<Event>,
       }),
       method: "POST",
     });

diff --git a/islands/events/viewing/dates.tsx b/islands/events/viewing/dates.tsx
@@ -0,0 +1,7 @@
+import { fmtDate } from "@/utils/dates.ts";
+
+// bit of a hack, bassiclly just takes the date, chops off the timezone, and gets the date wherever the user is
+export const ClientDate = ({ date }: { date: string }) => (
+	<>{fmtDate(new Date(date.split("GMT")[0]))}</>
+)
+
diff --git a/islands/events/viewing/selectShowTime.tsx b/islands/events/viewing/selectShowTime.tsx
@@ -2,6 +2,7 @@ import { ShowTime } from "@/utils/db/kv.types.ts";
 import { Signal } from "@preact/signals";
 import Popup from "@/components/popup.tsx";
 import { fmtDate, fmtHour, fmtTime } from "@/utils/dates.ts";
+import { ClientDate } from "@/islands/events/viewing/dates.tsx";
 
 const SelectShowTime = ({
   showTimes,
@@ -20,7 +21,7 @@ const SelectShowTime = ({
     typeof showTime == "string"
       ? time.id == showTime
       : time.id == showTime.value,
-  );
+  )!;
   return (
     <>
       <button
@@ -35,7 +36,12 @@ const SelectShowTime = ({
         >
           {selectedTime ? (
             <>
-              {fmtDate(new Date(selectedTime.startDate!))}
+              {selectedTime.startTime ? (
+                fmtDate(new Date(selectedTime.startDate!))
+              ) : (
+                /* force dates to be the same across timezones if there's no startime */
+                <ClientDate date={selectedTime.startDate!} />
+              )}
               {selectedTime.startTime &&
                 ` at ${fmtHour(
                   new Date(selectedTime.startTime),
@@ -94,10 +100,17 @@ const SelectShowTime = ({
               type="button"
             >
               <p class="flex">
-                {fmtDate(new Date(time.startDate!))}
-                <span class="lowercase">
-                  {time.startTime && ` at ${fmtTime(new Date(time.startTime))}`}
-                </span>
+                {time.startTime ? (
+                  <>
+                    {fmtDate(new Date(time.startDate!))}
+                    <span class="lowercase">
+                      {time.startTime &&
+                        ` at ${fmtTime(new Date(time.startTime))}`}
+                    </span>
+                  </>
+                ) : (
+                  <ClientDate date={time.startDate!} />
+                )}
               </p>
             </button>
           ))}

diff --git a/routes/events/[id]/(no-layout)/index.tsx b/routes/events/[id]/(no-layout)/index.tsx
@@ -15,6 +15,7 @@ import { acquired, getTicketID } from "@/utils/tickets.ts";
 import CTA from "@/components/buttons/cta.tsx";
 import { useEffect } from "preact/hooks";
 import ImagekitImage from "@/components/imagekitimg.tsx";
+import { ClientDate } from "@/islands/events/viewing/dates.tsx";
 
 export default defineRoute((req, ctx: RouteContext<void, EventContext>) => {
   const { event, eventID, user } = ctx.state.data;
@@ -37,7 +38,12 @@ export default defineRoute((req, ctx: RouteContext<void, EventContext>) => {
           <p class="break-keep">
             {event.showTimes.length > 1 && "Begins"}{" "}
             <span className="font-medium">
-              {fmtDate(new Date(event.showTimes[0].startDate))}{" "}
+              {event.showTimes[0].startTime ? (
+                fmtDate(new Date(event.showTimes[0].startDate))
+              ) : (
+                /* force dates to be the same across timezones if there's no startime */
+                <ClientDate date={event.showTimes[0].startDate} />
+              )}{" "}
               <span class="lowercase">
                 {event.showTimes.length == 1 &&
                   event.showTimes[0].startTime &&
@@ -78,8 +84,9 @@ export default defineRoute((req, ctx: RouteContext<void, EventContext>) => {
         {event.showTimes.length == 1 && event.showTimes[0].lastPurchaseDate && (
           <p class="text-xs text-gray-600 text-center mt-2">
             The last day to get tickets is{" "}
-            {fmtDate(new Date(event.showTimes[0].lastPurchaseDate))} at Midnight
-            ({getTimeZone(new Date(event.showTimes[0].lastPurchaseDate))})
+            <ClientDate date={event.showTimes[0].lastPurchaseDate} /> at
+            Midnight (
+            {getTimeZone(new Date(event.showTimes[0].lastPurchaseDate))})
           </p>
         )}
       </div>

diff --git a/utils/dates.ts b/utils/dates.ts
@@ -34,4 +34,4 @@ export const fmtHour = (date: Date) => hourFmt.format(date);
 export const fmtTime = (date: Date) => timeFmt.format(date);
 // not an ideal solution
 export const getTimeZone = (date: Date) =>
-  timezoneFmt.format(date).split(", ")[1];
+  date.toString().split("(")[1].slice(undefined, date.toString().split("(")[1].length - 1);
diff --git a/utils/event/fixDate.ts b/utils/event/fixDate.ts
@@ -0,0 +1,21 @@
+import { ShowTime } from "@/utils/db/kv.ts";
+
+export const fixDate = (showTimes: ShowTime[]) => showTimes.map((showTime) => {
+	if (!showTime.startTime) return showTime;
+	const date = new Date(showTime.startDate);
+	const time = new Date(showTime.startTime);
+
+	if (time) {
+		date.setHours(time.getHours());
+		date.setMinutes(time.getMinutes());
+	} else {
+		// remove the hours and just display as normal if user doesn't add a start date
+		date.setHours(0);
+		date.setMinutes(0);
+	}
+
+	return {
+		...showTime,
+		startDate: date.toString(),
+	};
+})