From 131f11fc40a10f8efdaaf01c25c596a268eb065c Mon Sep 17 00:00:00 2001
From: Boqian Liu <88120481+Bl20052005@users.noreply.github.com>
Date: Fri, 1 Nov 2024 22:09:37 -0400
Subject: [PATCH] Attempt to fix hydration error for Safari (#213)

* attempted fix

* date change

* revert date, use client in windowWidth

* nested p removal

* useEffect fix

* date changes
---
 .../src/app/schedule/Assets/Circle.module.scss |  1 +
 apps/site/src/app/schedule/Assets/Circle.tsx   |  4 ++--
 .../src/app/schedule/DayOne/DayOne.module.scss |  1 +
 apps/site/src/app/schedule/DayOne/DayOne.tsx   |  2 +-
 .../app/schedule/DayThree/DayThree.module.scss |  1 +
 .../src/app/schedule/DayThree/DayThree.tsx     |  2 +-
 .../src/app/schedule/DayTwo/DayTwo.module.scss |  1 +
 apps/site/src/app/schedule/DayTwo/DayTwo.tsx   |  2 +-
 .../schedule/ScheduleTimer/ScheduleTimer.tsx   | 18 ++++++++++++------
 apps/site/src/lib/useWindowWidth.tsx           |  2 ++
 10 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/apps/site/src/app/schedule/Assets/Circle.module.scss b/apps/site/src/app/schedule/Assets/Circle.module.scss
index cf67b9c7..2307d842 100644
--- a/apps/site/src/app/schedule/Assets/Circle.module.scss
+++ b/apps/site/src/app/schedule/Assets/Circle.module.scss
@@ -50,6 +50,7 @@
 .title {
 	text-align: center;
 	width: 200px;
+	font-weight: bold;
 }
 
 .time {
diff --git a/apps/site/src/app/schedule/Assets/Circle.tsx b/apps/site/src/app/schedule/Assets/Circle.tsx
index 457b22ab..772cbc02 100644
--- a/apps/site/src/app/schedule/Assets/Circle.tsx
+++ b/apps/site/src/app/schedule/Assets/Circle.tsx
@@ -59,7 +59,7 @@ const EventCircle: React.FC<CircleProps> = ({
 				></div>
 			)}
 			<div className={styles.textContainer} style={up ? { top: "-160px" } : {}}>
-				<h5 className={styles.title}>{title}</h5>
+				<p className={styles.title}>{title}</p>
 				<p className={styles.location}>{location}</p>
 				<p className={styles.time}>{convertTime(startTime, endTime)}</p>
 				{virtual && (
@@ -69,7 +69,7 @@ const EventCircle: React.FC<CircleProps> = ({
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						<p>Zoom</p>
+						<div>Zoom</div>
 						<Image src={openNewWindow} alt="open" />
 					</a>
 				)}
diff --git a/apps/site/src/app/schedule/DayOne/DayOne.module.scss b/apps/site/src/app/schedule/DayOne/DayOne.module.scss
index 1ea77cc3..3771f318 100644
--- a/apps/site/src/app/schedule/DayOne/DayOne.module.scss
+++ b/apps/site/src/app/schedule/DayOne/DayOne.module.scss
@@ -26,6 +26,7 @@
 	top: -70px;
 	left: 50%;
 	transform: translateX(-50%);
+	font-weight: bold;
 }
 
 .mapPath {
diff --git a/apps/site/src/app/schedule/DayOne/DayOne.tsx b/apps/site/src/app/schedule/DayOne/DayOne.tsx
index 08fb153f..d6419c8d 100644
--- a/apps/site/src/app/schedule/DayOne/DayOne.tsx
+++ b/apps/site/src/app/schedule/DayOne/DayOne.tsx
@@ -51,7 +51,7 @@ const DayOne: React.FC<DayOneProps> = ({ schedule, time }) => {
 							virtual={event?.virtual}
 						/>
 					))}
-					<h4 className={styles.title}>Day One</h4>
+					<p className={styles.title}>Day One</p>
 				</div>
 			</div>
 		</>
diff --git a/apps/site/src/app/schedule/DayThree/DayThree.module.scss b/apps/site/src/app/schedule/DayThree/DayThree.module.scss
index 93c49c58..a0c36fab 100644
--- a/apps/site/src/app/schedule/DayThree/DayThree.module.scss
+++ b/apps/site/src/app/schedule/DayThree/DayThree.module.scss
@@ -20,6 +20,7 @@
 	top: -250px;
 	left: 50%;
 	transform: translateX(-50%);
+	font-weight: bold;
 }
 
 .mapPath {
diff --git a/apps/site/src/app/schedule/DayThree/DayThree.tsx b/apps/site/src/app/schedule/DayThree/DayThree.tsx
index 0efede02..16569931 100644
--- a/apps/site/src/app/schedule/DayThree/DayThree.tsx
+++ b/apps/site/src/app/schedule/DayThree/DayThree.tsx
@@ -56,7 +56,7 @@ const DayThree: React.FC<DayThreeProps> = ({ schedule, time }) => {
 							virtual={event?.virtual}
 						/>
 					))}
-					<h4 className={styles.title}>Day Three</h4>
+					<p className={styles.title}>Day Three</p>
 				</div>
 			</div>
 		</>
diff --git a/apps/site/src/app/schedule/DayTwo/DayTwo.module.scss b/apps/site/src/app/schedule/DayTwo/DayTwo.module.scss
index e1eff408..f1ee0a91 100644
--- a/apps/site/src/app/schedule/DayTwo/DayTwo.module.scss
+++ b/apps/site/src/app/schedule/DayTwo/DayTwo.module.scss
@@ -20,6 +20,7 @@
 	top: -60px;
 	left: 50%;
 	transform: translateX(-50%);
+	font-weight: bold;
 }
 
 .mapPath {
diff --git a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx
index 7073808d..965314d5 100644
--- a/apps/site/src/app/schedule/DayTwo/DayTwo.tsx
+++ b/apps/site/src/app/schedule/DayTwo/DayTwo.tsx
@@ -75,7 +75,7 @@ const DayTwo: React.FC<DayTwoProps> = ({ schedule, time }) => {
 							virtual={event?.virtual}
 						/>
 					))}
-					<h4 className={styles.title}>Day Two</h4>
+					<p className={styles.title}>Day Two</p>
 				</div>
 			</div>
 		</>
diff --git a/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx b/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx
index e9fbf430..0d89e88d 100644
--- a/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx
+++ b/apps/site/src/app/schedule/ScheduleTimer/ScheduleTimer.tsx
@@ -22,21 +22,27 @@ const ScheduleTimer: React.FC<ScheduleProps> = ({ schedule }) => {
 		let ret = setInterval(updatePerSecond, 1000);
 
 		return () => clearInterval(ret);
-	});
+	}, []);
 
 	const scheduleFlat = schedule.flat();
 	const dayOne = scheduleFlat.filter(
-		(s) => s.startTime.getTime() < new Date("2024-11-2"),
+		(s) =>
+			s.startTime.getTime() <
+			new Date(new Date("2024-11-02T00:00:00").toUTCString()).getTime(),
 	);
 	const dayTwo = scheduleFlat.filter(
 		(s) =>
-			s.startTime.getTime() < new Date("2024-11-3") &&
-			s.startTime.getTime() > new Date("2024-11-2"),
+			s.startTime.getTime() <
+				new Date(new Date("2024-11-03T00:00:00").toUTCString()).getTime() &&
+			s.startTime.getTime() >
+				new Date(new Date("2024-11-02T00:00:00").toUTCString()).getTime(),
 	);
 	const dayThree = scheduleFlat.filter(
 		(s) =>
-			s.startTime.getTime() < new Date("2024-11-4") &&
-			s.startTime.getTime() > new Date("2024-11-3"),
+			s.startTime.getTime() <
+				new Date(new Date("2024-11-04T00:00:00").toUTCString()).getTime() &&
+			s.startTime.getTime() >
+				new Date(new Date("2024-11-03T00:00:00").toUTCString()).getTime(),
 	);
 
 	return (
diff --git a/apps/site/src/lib/useWindowWidth.tsx b/apps/site/src/lib/useWindowWidth.tsx
index 7c208ea9..d1688006 100644
--- a/apps/site/src/lib/useWindowWidth.tsx
+++ b/apps/site/src/lib/useWindowWidth.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useEffect } from "react";
 
 export default function useWindowWidth() {