account for daylight savings time (#34)

* very wip

* account for daylight savings time

* less is more

app/routes/reservations.new.tsx

@@ -13,7 +13,7 @@ import {
   requireValidStytchToken,
   sessionStorage,
 } from "~/session.server";
-import { anotherTimeFormattingFunc } from "~/utils";
+import { anotherTimeFormattingFunc, getPacificOffset } from "~/utils";
 
 // if an anonymous or stale user gets here, fail fast
 export const loader = async ({ request }: LoaderFunctionArgs) => {
@@ -65,7 +65,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     return json({ errors: { start: "court is required" } }, { status: 400 });
   }
 
-  const start = new Date(`${startDate}T${startTime}:00-07:00`);
+  const offset = getPacificOffset(startDate);
+  const start = new Date(`${startDate}T${startTime}:00-0${offset}:00`);
 
   try {
     await createReservation({

app/utils.ts

@@ -1,7 +1,7 @@
+import { tz, TZDate } from "@date-fns/tz";
 import { useMatches } from "@remix-run/react";
 import { contains } from "@terraformer/spatial";
-import { addDays } from "date-fns";
-import { formatInTimeZone } from "date-fns-tz";
+import { addDays, format as dateFnsFormat } from "date-fns";
 import type { GeoJSON } from "geojson";
 import { useMemo } from "react";
 
@@ -32,6 +32,12 @@ export const anotherTimeFormattingFunc = (val: string | null) => {
   return formatTime(Number(h), m == "30");
 };
 
+// either GMT -7 or -8 depending on the season
+export const getPacificOffset = (rawDate: string) => {
+  const [year, month, day] = rawDate.split("-").map((val) => Number(val));
+  return new TZDate(year, month, day, "America/Los_Angeles").getTimezoneOffset() / 60;
+}
+
 export const getTimezoneOffsetMs = (date: Date) => {
   const invdate = new Date(
     date.toLocaleString("en-US", {
@@ -49,7 +55,7 @@ export const getTimezoneOffset = (date: Date) => {
 }
 
 export const format = (date: Date | string, format: string) =>
-  formatInTimeZone(date, "America/Los_Angeles", format);
+  dateFnsFormat(date, format, { in: tz("America/Los_Angeles") });
 
 export const formatTime = (rawHour: number, isHalf = false): string => {
   const hour = rawHour - (rawHour > 12 ? 12 : 0)

package.json

@@ -25,6 +25,7 @@
     "/public/build"
   ],
   "dependencies": {
+    "@date-fns/tz": "^1.2.0",
     "@googlemaps/js-api-loader": "^1.16.6",
     "@prisma/client": "^4.16.2",
     "@remix-run/css-bundle": "^2.8.0",
@@ -33,8 +34,7 @@
     "@remix-run/serve": "^2.8.0",
     "@terraformer/spatial": "^2.1.2",
     "classnames": "^2.5.1",
-    "date-fns": "^3.4.0",
-    "date-fns-tz": "^3.1.3",
+    "date-fns": "^4.1.0",
     "isbot": "^3.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",