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

apps/site/src/app/schedule/Assets/Circle.module.scss

@@ -50,6 +50,7 @@
 .title {
 	text-align: center;
 	width: 200px;
+	font-weight: bold;
 }
 
 .time {

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>
 				)}

apps/site/src/app/schedule/DayOne/DayOne.module.scss

@@ -26,6 +26,7 @@
 	top: -70px;
 	left: 50%;
 	transform: translateX(-50%);
+	font-weight: bold;
 }
 
 .mapPath {

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>
 		</>

apps/site/src/app/schedule/DayThree/DayThree.module.scss

@@ -20,6 +20,7 @@
 	top: -250px;
 	left: 50%;
 	transform: translateX(-50%);
+	font-weight: bold;
 }
 
 .mapPath {

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>
 		</>

apps/site/src/app/schedule/DayTwo/DayTwo.module.scss

@@ -20,6 +20,7 @@
 	top: -60px;
 	left: 50%;
 	transform: translateX(-50%);
+	font-weight: bold;
 }
 
 .mapPath {

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>
 		</>

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 (

apps/site/src/lib/useWindowWidth.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useState, useEffect } from "react";
 
 export default function useWindowWidth() {