Refactor Schedule (#130)

* refactor: move schedule page from views to app

* refactor: reexport component

* refactor: arrow functions and reorganization

apps/site/src/views/Schedule/sections/ClipboardSchedule/ClipboardSchedule.tsx → apps/site/src/app/schedule/ClipboardSchedule/ClipboardSchedule.tsx

@@ -1,31 +1,17 @@
 "use client";
 
 import Image from "next/image";
-import { cubicBezier, motion, Variants } from "framer-motion";
-
 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 { cubicBezier, motion, Variants } from "framer-motion";
 import { utcToZonedTime } from "date-fns-tz";
 
 import clip from "@/assets/images/clip.svg";
 
 import styles from "./ClipboardSchedule.module.scss";
-import Countdown from "../../components/Countdown/Countdown";
-
-interface ClipboardScheduleProps {
-	schedule: {
-		title: string;
-		location?: string | undefined;
-		virtual?: string | undefined;
-		startTime: Date;
-		endTime: Date;
-		organization?: string | undefined;
-		hosts?: string[] | undefined;
-		description: JSX.Element;
-	}[][];
-}
+import Countdown from "./Countdown";
 
 const dateTimeFormat = new Intl.DateTimeFormat("en", {
 	hour: "numeric",
@@ -57,7 +43,20 @@ const variant: Variants = {
 	},
 };
 
-function ClipboardSchedule({ schedule }: ClipboardScheduleProps) {
+interface ClipboardScheduleProps {
+	schedule: {
+		title: string;
+		location?: string | undefined;
+		virtual?: string | undefined;
+		startTime: Date;
+		endTime: Date;
+		organization?: string | undefined;
+		hosts?: string[] | undefined;
+		description: JSX.Element;
+	}[][];
+}
+
+const ClipboardSchedule: React.FC<ClipboardScheduleProps> = ({ schedule }) => {
 	return (
 		<Container as="section" className={" px-0 pt-0 position-relative"}>
 			<div className={styles.clip}>
@@ -139,6 +138,6 @@ function ClipboardSchedule({ schedule }: ClipboardScheduleProps) {
 			</div>
 		</Container>
 	);
-}
+};
 
 export default ClipboardSchedule;

apps/site/src/views/Schedule/components/Countdown/Countdown.tsx → apps/site/src/app/schedule/ClipboardSchedule/Countdown.tsx

@@ -8,7 +8,7 @@ import styles from "./Countdown.module.scss";
 // 10/4/23 10AM in UTC
 const hackingStarts = new Date(Date.UTC(2023, 10, 4, 17, 0, 0));
 
-export default function Countdown() {
+const Countdown = () => {
 	const [remainingSeconds, setRemainingSeconds] = useState<number>(NaN);
 
 	useEffect(() => {
@@ -50,4 +50,6 @@ export default function Countdown() {
 			<span className={styles.caption}>Until Hacking Begins</span>
 		</div>
 	);
-}
+};
+
+export default Countdown;

apps/site/src/app/schedule/ClipboardSchedule/index.ts

@@ -0,0 +1 @@
+export { default } from "./ClipboardSchedule";

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

@@ -1,11 +1,25 @@
-import { Schedule } from "@/views";
-import { Maintenance } from "@/views";
+import { PortableText } from "@portabletext/react";
+import ClipboardSchedule from "./ClipboardSchedule";
+import { getSchedule } from "./getSchedule";
 
 export const revalidate = 60;
 
-// When set to any value
-const Component = process.env.MAINTENANCE_MODE_SCHEDULE
-	? Maintenance
-	: Schedule;
+import styles from "./page.module.scss";
 
-export default Component;
+export default async function Schedule() {
+	const days = await getSchedule();
+
+	const schedule = days.map((events) =>
+		events.map(({ description, ...event }) => ({
+			...event,
+			description: <PortableText value={description} />,
+		})),
+	);
+
+	return (
+		<div className={styles.schedule}>
+			<h1>Schedule</h1>
+			<ClipboardSchedule schedule={schedule} />
+		</div>
+	);
+}

apps/site/src/views/index.ts

@@ -1,3 +1,2 @@
 export { default as Maintenance } from "./Maintenance/Maintenance";
 export { default as Resources } from "./Resources/Resources";
-export { default as Schedule } from "./Schedule/Schedule";