feat: Compare

frontend/src/App.tsx

@@ -9,6 +9,7 @@ import Landing from "@/app/Landing";
 import Plan from "@/app/Plan";
 import Schedule from "@/app/Schedule";
 import Schedules from "@/app/Schedules";
+import Compare from "@/app/Schedules/Compare";
 import AccountProvider from "@/components/AccountProvider";
 import Layout from "@/components/Layout";
 
@@ -42,6 +43,10 @@ const router = createBrowserRouter([
         element: <Schedule />,
         path: "schedules/:scheduleId",
       },
+      {
+        element: <Compare />,
+        path: "schedules/compare/:leftScheduleId?/:rightScheduleId?",
+      },
     ],
   },
   {

frontend/src/app/Schedule/Calendar/Week/Day/index.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 
 import { getColor } from "@/lib/section";
 
-import { IDay } from "../../semester";
+import { IDay } from "../../calendar";
 import styles from "./Day.module.scss";
 
 const parseTime = (time: string) => {

frontend/src/app/Schedule/Calendar/Week/index.tsx

@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { ArrowDown } from "iconoir-react";
 import moment from "moment";
 
-import { IDay } from "../semester";
+import { IDay } from "../calendar";
 import Day from "./Day";
 import styles from "./Week.module.scss";
 

frontend/src/app/Schedule/Calendar/calendar.ts

@@ -0,0 +1,16 @@
+export interface IEvent {
+  subject: string;
+  number: string;
+  active?: boolean;
+  startTime: string;
+  endTime: string;
+  startDate: string;
+  endDate: string;
+  days?: boolean[];
+  date?: string;
+}
+
+export interface IDay {
+  date: moment.Moment;
+  events: IEvent[];
+}

frontend/src/app/Schedule/Calendar/index.tsx

@@ -4,9 +4,9 @@ import moment from "moment";
 
 import { ISection } from "@/lib/api";
 
-import styles from "./Semester.module.scss";
+import styles from "./Calendar.module.scss";
 import Week from "./Week";
-import { IDay } from "./semester";
+import { IDay, IEvent } from "./calendar";
 
 interface CalendarProps {
   selectedSections: ISection[];
@@ -17,12 +17,6 @@ export default function Calendar({
   selectedSections,
   currentSection,
 }: CalendarProps) {
-  const sections = useMemo(
-    () =>
-      currentSection ? [...selectedSections, currentSection] : selectedSections,
-    [selectedSections, currentSection]
-  );
-
   const [first] = useState(() => moment("2024-01-01"));
   const [last] = useState(() => moment("2024-05-31"));
 
@@ -38,6 +32,56 @@ export default function Calendar({
     return stop;
   });
 
+  const events = useMemo(
+    () =>
+      (currentSection
+        ? [...selectedSections, currentSection]
+        : selectedSections
+      ).reduce((events, section) => {
+        const {
+          startDate,
+          endDate,
+          meetings,
+          exams,
+          course: { subject, number },
+          ccn,
+        } = section;
+
+        for (const exam of exams) {
+          const { date, startTime, endTime } = exam;
+
+          events.push({
+            date,
+            subject: subject,
+            number: number,
+            active: currentSection?.ccn === ccn,
+            startTime,
+            endTime,
+            startDate,
+            endDate,
+          });
+        }
+
+        for (const meeting of meetings) {
+          const { days, startTime, endTime } = meeting;
+
+          events.push({
+            startDate,
+            endDate,
+            subject: subject,
+            number: number,
+            active: currentSection?.ccn === ccn,
+            days,
+            startTime,
+            endTime,
+          });
+        }
+
+        return events;
+      }, [] as IEvent[]),
+    [selectedSections, currentSection]
+  );
+
   const weeks = useMemo(() => {
     const weeks: IDay[][] = [];
 
@@ -49,20 +93,14 @@ export default function Calendar({
       for (let i = 0; i < 7; i++) {
         const day = {
           date: moment(current),
-          events: sections
+          events: events
             .filter(
-              ({ startDate, endDate, meetings }) =>
+              ({ startDate, endDate, date, days }) =>
                 current.isSameOrAfter(startDate) &&
                 current.isSameOrBefore(endDate) &&
-                meetings[0]?.days[current.day()]
-            )
-            .sort((a, b) =>
-              a.meetings[0].startTime.localeCompare(b.meetings[0].startTime)
+                (moment(date).isSame(current, "day") || days?.[current.day()])
             )
-            .map((section) => ({
-              ...section,
-              active: section.ccn === currentSection?.ccn,
-            })),
+            .sort((a, b) => a.startTime.localeCompare(b.startTime)),
         };
 
         week.push(day);
@@ -74,7 +112,7 @@ export default function Calendar({
     }
 
     return weeks;
-  }, [sections, currentSection, start, stop]);
+  }, [events, start, stop]);
 
   return (
     <div className={styles.root}>

frontend/src/app/Schedule/index.tsx

@@ -1,17 +1,23 @@
 import { useCallback, useRef, useState } from "react";
 
 import { useApolloClient } from "@apollo/client";
-import { ArrowLeft, ShareIos } from "iconoir-react";
+import {
+  ArrowLeft,
+  Copy,
+  EditPencil,
+  ShareIos,
+  ViewColumns2,
+} from "iconoir-react";
 
 import Button from "@/components/Button";
 import IconButton from "@/components/IconButton";
 import MenuItem from "@/components/MenuItem";
+import Week from "@/components/Week";
 import { GET_CLASS, IClass, ICourse, ISection } from "@/lib/api";
 import { getY } from "@/lib/schedule";
 
 import Calendar from "./Calendar";
 import Map from "./Map";
-import Week from "./Schedule";
 import styles from "./Schedule.module.scss";
 import SideBar from "./SideBar";
 
@@ -28,6 +34,8 @@ export default function Schedule() {
   const [selectedSections, setSelectedSections] = useState<ISection[]>([]);
   const [currentSection, setCurrentSection] = useState<ISection | null>(null);
 
+  console.log(JSON.stringify(selectedSections));
+
   const handleSectionSelect = useCallback(
     (section: ISection) => {
       // Clear the current section
@@ -177,6 +185,9 @@ export default function Schedule() {
             <ArrowLeft />
           </IconButton>
           <p className={styles.heading}>Untitled Spring 2024 schedule</p>
+          <IconButton>
+            <EditPencil />
+          </IconButton>
           <div className={styles.separator} />
         </div>
         <div className={styles.tabs}>
@@ -190,6 +201,14 @@ export default function Schedule() {
             Map
           </MenuItem>
         </div>
+        <Button secondary>
+          <ViewColumns2 />
+          Compare
+        </Button>
+        <Button secondary>
+          <Copy />
+          Clone
+        </Button>
         <Button>
           Share
           <ShareIos />

frontend/src/app/Schedules/Compare/Compare.module.scss

@@ -0,0 +1,54 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  .header {
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    background-color: var(--foreground-color);
+
+    .group {
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      flex: 1;
+      gap: 12px;
+
+      &:not(:last-child) {
+        border-right: 1px solid var(--border-color);
+      }
+
+      .paragraph {
+        font-size: 12px;
+        line-height: 1;
+        color: var(--paragraph-color);
+      }
+
+      .heading {
+        font-size: 14px;
+        font-weight: 500;
+        padding: 0 12px;
+        line-height: 1;
+        color: var(--heading-color);
+        flex-grow: 1;
+      }
+    }
+  }
+
+  .body {
+    display: flex;
+    grid-template-columns: 1fr 1fr;
+    flex-grow: 1;
+    height: 0;
+
+    .view {
+      flex: 1;
+      overflow: auto;
+
+      &:not(:last-child) {
+        border-right: 1px solid var(--border-color);
+      }
+    }
+  }
+}