fix: timezone inconsistencies (#119)

* fix: timezone inconsistencies

* fix: timezone inconsistencies

apps/site/package.json

@@ -17,7 +17,7 @@
 		"@types/react": "18.2.20",
 		"@types/react-dom": "^18.2.0",
 		"bootstrap": "^5.3.1",
-		"dayjs": "^1.11.10",
+		"date-fns-tz": "^2.0.0",
 		"eslint": "8.46.0",
 		"eslint-config-next": "^13.4.1",
 		"framer-motion": "^10.16.4",
@@ -30,4 +30,4 @@
 		"typescript": "5.1.6",
 		"zod": "^3.22.2"
 	}
-}
+}

apps/site/src/views/Schedule/getSchedule.ts

@@ -2,7 +2,7 @@ import { z } from "zod";
 import { cache } from "react";
 import { client } from "@/lib/sanity/client";
 import { SanityDocument } from "@/lib/sanity/types";
-import dayjs from "@/lib/day";
+import { formatInTimeZone } from "date-fns-tz";
 
 const Events = z.array(
 	SanityDocument.extend({
@@ -52,12 +52,12 @@ export const getSchedule = cache(async () => {
 	const eventsByDay = new Map<string, z.infer<typeof Events>>();
 
 	events.forEach((event) => {
-		const date = dayjs
-			.utc(event.startTime)
-			.tz("America/Los_Angeles")
-			.format("YYYY-MM-DD");
-
-		eventsByDay.set(date, [...(eventsByDay.get(date) ?? []), event]);
+		const key = formatInTimeZone(
+			new Date(event.startTime),
+			"America/Los_Angeles",
+			"MM/dd/yyyy",
+		);
+		eventsByDay.set(key, [...(eventsByDay.get(key) ?? []), event]);
 	});
 
 	return Array.from(eventsByDay.values());

apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx

@@ -6,6 +6,7 @@ import Accordion from "react-bootstrap/Accordion";
 import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
+import { utcToZonedTime } from "date-fns-tz";
 
 import clip from "@/assets/images/clip.svg";
 
@@ -50,37 +51,53 @@ function ClipboardSchedule({ schedule }: ClipboardScheduleProps) {
 			<Accordion defaultActiveKey="0" className={styles.accordion}>
 				{schedule.map((day, i) => (
 					<div className="mt-5" key={i}>
-						<h2>{weekdayFormat.format(day[0].startTime)}</h2>
+						<h2>
+							{weekdayFormat.format(
+								utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
+							)}
+						</h2>
 						<p className="text-center mb-5 h3">
-							{monthDayFormat.format(day[0].startTime)}
+							{monthDayFormat.format(
+								utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
+							)}
 						</p>
 						{day.map(
-							({ title, description, location, hosts, startTime, endTime }) => (
-								<Accordion.Item
-									key={title}
-									eventKey={title}
-									className={styles.accordionItem}
-								>
-									<Accordion.Header as="h3">
-										<Row className="w-100 align-items-center">
-											<Col lg>
-												<span className={styles.eventTitle + " h3 mb-0"}>
-													{title}
-												</span>
-											</Col>
-											{/* <span>{hosts?.join()}</span> */}
+							({ title, description, location, hosts, startTime, endTime }) => {
+								const startTimeZoned = utcToZonedTime(
+										startTime,
+										"America/Los_Angeles",
+									),
+									endTimeZoned = utcToZonedTime(endTime, "America/Los_Angeles");
+								return (
+									<Accordion.Item
+										key={title}
+										eventKey={title}
+										className={styles.accordionItem}
+									>
+										<Accordion.Header as="h3">
+											<Row className="w-100 align-items-center">
+												<Col lg>
+													<span className={styles.eventTitle + " h3 mb-0"}>
+														{title}
+													</span>
+												</Col>
+												{/* <span>{hosts?.join()}</span> */}
 
-											<Col lg className={styles.mobileLocation}>
-												<span>
-													{location},{" "}
-													{dateTimeFormat.formatRange(startTime, endTime)}
-												</span>
-											</Col>
-										</Row>
-									</Accordion.Header>
-									<Accordion.Body>{description}</Accordion.Body>
-								</Accordion.Item>
-							),
+												<Col lg className={styles.mobileLocation}>
+													<span>
+														{location},{" "}
+														{dateTimeFormat.formatRange(
+															startTimeZoned,
+															endTimeZoned,
+														)}
+													</span>
+												</Col>
+											</Row>
+										</Accordion.Header>
+										<Accordion.Body>{description}</Accordion.Body>
+									</Accordion.Item>
+								);
+							},
 						)}
 					</div>
 				))}