175 updates timezone logic for cloudflare (#177)

Author: christianhelp

apps/web/next.config.mjs

@@ -1,5 +1,6 @@
 import { fileURLToPath } from "node:url";
 import createJiti from "jiti";
+import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
 const jiti = createJiti(fileURLToPath(import.meta.url));
 
 jiti("./src/env");
@@ -29,4 +30,8 @@ const nextConfig = {
 	},
 };
 
+if (process.env.NODE_ENV === "development") {
+	await setupDevPlatform();
+}
+
 export default nextConfig;

apps/web/package.json

@@ -101,6 +101,8 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@cloudflare/next-on-pages": "^1.13.10",
+    "@cloudflare/workers-types": "^4.20250319.0",
     "esbuild-register": "^3.5.0"
   }
 }

apps/web/src/app/dash/schedule/page.tsx

@@ -3,12 +3,12 @@ import UserScheduleView from "@/components/schedule/UserScheduleView";
 import ScheduleTimeline from "./schedule-timeline";
 import Loading from "@/components/shared/Loading";
 import { getAllEvents } from "db/functions";
-import { headers } from "next/headers";
-import { VERCEL_IP_TIMEZONE_HEADER_KEY } from "@/lib/constants";
 import { getClientTimeZone } from "@/lib/utils/client/shared";
+import { getRequestContext } from "@cloudflare/next-on-pages";
 export default async function Page() {
 	const sched = await getAllEvents();
-	const userTimeZoneHeaderKey = headers().get(VERCEL_IP_TIMEZONE_HEADER_KEY);
+	const { cf } = getRequestContext();
+	const userTimeZoneHeaderKey = cf.timezone;
 	const userTimeZone = getClientTimeZone(userTimeZoneHeaderKey);
 	return (
 		<>

apps/web/src/app/not-found.tsx

@@ -1,13 +1,20 @@
 import Link from "next/link";
 
-// TODO: make this look better
-
 export default function NotFound() {
 	return (
-		<div>
-			<h2>Not Found</h2>
-			<p>Could not find requested resource</p>
-			<Link href="/">Return Home</Link>
+		<div className="flex h-screen w-screen items-center justify-center bg-white dark:bg-black">
+			<div className="text-center">
+				<h1 className="mb-4 text-9xl font-extrabold text-hackathon dark:text-primary">
+					404
+				</h1>
+				<h2 className="mb-4 text-4xl font-bold">Page Not Found</h2>
+				<p className="mb-8 text-lg">
+					The page you are looking for does not exist.
+				</p>
+				<Link href="/" className="text-lg text-blue-500 underline">
+					Return to Home
+				</Link>
+			</div>
 		</div>
 	);
 }

apps/web/src/app/schedule/page.tsx

@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import UserScheduleView from "@/components/schedule/UserScheduleView";
+import ScheduleTimeline from "../dash/schedule/schedule-timeline";
+import Loading from "@/components/shared/Loading";
+import { getAllEvents } from "db/functions";
+import { getClientTimeZone } from "@/lib/utils/client/shared";
+import { getRequestContext } from "@cloudflare/next-on-pages";
+export default async function Page() {
+	const sched = await getAllEvents();
+	const { cf } = getRequestContext();
+	const userTimeZoneHeaderKey = cf.timezone;
+	const userTimeZone = getClientTimeZone(userTimeZoneHeaderKey);
+	return (
+		<>
+			<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Schedule</h1>
+			<Suspense fallback={<Loading />}>
+				{/* <UserScheduleView /> */}
+				<ScheduleTimeline schedule={sched} timezone={userTimeZone} />
+			</Suspense>
+		</>
+	);
+}
+
+export const runtime = "edge";
+export const revalidate = 60;

apps/web/src/components/events/admin/EventDetails.tsx

@@ -5,9 +5,10 @@ import { formatInTimeZone } from "date-fns-tz";
 import { Event } from "db/types";
 import { headers } from "next/headers";
 import { getClientTimeZone } from "@/lib/utils/client/shared";
-import { VERCEL_IP_TIMEZONE_HEADER_KEY } from "@/lib/constants";
+import { getRequestContext } from "@cloudflare/next-on-pages";
 export default function EventFull({ event }: { event: Event }) {
-	const userTimeZoneHeaderKey = headers().get(VERCEL_IP_TIMEZONE_HEADER_KEY);
+	const { cf } = getRequestContext();
+	const userTimeZoneHeaderKey = cf.timezone;
 
 	const userTimeZone = getClientTimeZone(userTimeZoneHeaderKey);
 	return (

apps/web/src/components/schedule/Day.tsx

@@ -5,15 +5,16 @@ import c from "config";
 import { headers } from "next/headers";
 import { getClientTimeZone } from "@/lib/utils/client/shared";
 import EventItem from "./EventItem";
-import { VERCEL_IP_TIMEZONE_HEADER_KEY } from "@/lib/constants";
+import { getRequestContext } from "@cloudflare/next-on-pages";
 interface DayProps {
 	title: string;
 	subtitle: string;
 	events: EventType[];
 }
 
 export default function Day({ title, subtitle, events }: DayProps) {
-	const userTimeZoneHeaderKey = headers().get(VERCEL_IP_TIMEZONE_HEADER_KEY);
+	const { cf } = getRequestContext();
+	const userTimeZoneHeaderKey = cf.timezone;
 
 	const userTimeZone = getClientTimeZone(userTimeZoneHeaderKey);
 

apps/web/src/lib/constants/index.ts

@@ -1,7 +1,6 @@
 import c from "config";
 export const ONE_HOUR_IN_MILLISECONDS = 3600000;
 export const FIVE_MINUTES_IN_MILLISECONDS = 300000;
-export const VERCEL_IP_TIMEZONE_HEADER_KEY = "x-vercel-ip-timezone";
 export const PHONE_NUMBER_REGEX =
 	/^(\+\d{1,2}\s?)?\(?\d{3}\)?\s?[\s.-]?\s?\d{3}\s?[\s.-]?\s?\d{4}$/gm;
 export const UNIQUE_KEY_CONSTRAINT_VIOLATION_CODE = "23505";

apps/web/src/lib/utils/client/shared.ts

@@ -1,7 +1,7 @@
 import { rankItem } from "@tanstack/match-sorter-utils";
 import { FilterFn } from "@tanstack/react-table";
 import { redirect } from "next/navigation";
-export function getClientTimeZone(vercelIPTimeZone: string | null) {
+export function getClientTimeZone(vercelIPTimeZone?: string) {
 	return vercelIPTimeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone;
 }