Schedules

apps/backend/src/modules/schedule/formatter.ts

@@ -16,7 +16,6 @@ export type IntermediateSchedule = Omit<
 export const formatSchedule = async (schedule: ScheduleType) => {
   return {
     ...schedule,
-
     term: null,
-  } as IntermediateSchedule;
+  } as unknown as IntermediateSchedule;
 };

apps/backend/src/modules/schedule/typedefs/schedule.ts

@@ -10,6 +10,7 @@ const typedef = gql`
     startTime: String!
     endTime: String!
     days: [Boolean!]!
+    _id: ID!
     location: String
     title: String!
     description: String

apps/backend/src/modules/user/formatter.ts

@@ -12,6 +12,7 @@ export type IntermediateUser = Omit<UserModule.User, keyof UserRelationships> &
 
 export const formatUser = (user: UserType) => {
   return {
+    _id: user._id,
     email: user.email,
     student: user.email.endsWith("@berkeley.edu"),
     bookmarkedCourses: user.bookmarkedCourses,

apps/backend/src/modules/user/typedefs/user.ts

@@ -2,6 +2,7 @@ import { gql } from "graphql-tag";
 
 const typedef = gql`
   type User {
+    _id: ID!
     email: String!
     student: Boolean!
     bookmarkedCourses: [Course!]!

apps/frontend/package.json

@@ -26,6 +26,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.3.0",
+    "react-select": "^5.10.1",
     "recharts": "^2.15.1"
   },
   "devDependencies": {

apps/frontend/src/app/Catalog/Dashboard/index.tsx

@@ -27,7 +27,7 @@ import ClassDrawer from "@/components/ClassDrawer";
 import { useReadUser } from "@/hooks/api";
 import { IClass, ITerm, READ_CLASS, ReadClassResponse } from "@/lib/api";
 import { sortByTermDescending } from "@/lib/classes";
-import { getRecentClasses } from "@/lib/recent-classes";
+import { getRecentClasses } from "@/lib/recent";
 
 import styles from "./Dashboard.module.scss";
 

apps/frontend/src/app/Schedule/Comparison/index.tsx

@@ -128,7 +128,12 @@ export default function Comparison() {
               setCurrent((previous) => (previous === 0 ? null : previous))
             }
           >
-            <Week selectedSections={selectedSections} y={y} updateY={setY} />
+            <Week
+              events={schedule.events}
+              selectedSections={selectedSections}
+              y={y}
+              updateY={setY}
+            />
           </div>
         </div>
         <div className={styles.panel}>
@@ -155,6 +160,7 @@ export default function Comparison() {
             }
           >
             <Week
+              events={comparison?.events ?? []}
               selectedSections={selectedComparisonSections}
               y={y}
               updateY={setY}

apps/frontend/src/app/Schedule/Editor/CloneDialog/CloneDialog.module.scss

@@ -0,0 +1,39 @@
+/* TODO: State animations */
+.content {
+  width: 448px;
+  background-color: var(--foreground-color);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .description {
+    font-size: 14px;
+    color: var(--paragraph-color);
+    line-height: 1;
+  }
+
+  .header {
+    display: flex;
+    gap: 16px;
+
+    .text {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--heading-color);
+        line-height: 1;
+      }
+    }
+  }
+}

apps/frontend/src/app/Schedule/Editor/CloneDialog/index.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from "react";
+
+import { ArrowRight, Xmark } from "iconoir-react";
+import { useNavigate } from "react-router-dom";
+
+import { Button, Dialog, IconButton } from "@repo/theme";
+
+import { useCreateSchedule } from "@/hooks/api";
+import useSchedule from "@/hooks/useSchedule";
+
+import styles from "./CloneDialog.module.scss";
+
+interface CloneDialogProps {
+  children: ReactNode;
+}
+
+// TODO: Collaborative editing
+// TODO: Invite collaborators
+
+export default function CloneDialog({ children }: CloneDialogProps) {
+  const { schedule } = useSchedule();
+  const navigate = useNavigate();
+
+  const [createSchedule] = useCreateSchedule();
+
+  const confirm = async () => {
+    const { data } = await createSchedule({
+      year: schedule.year,
+      semester: schedule.semester,
+      classes: schedule.classes.map((_class) => ({
+        subject: _class.class.subject,
+        courseNumber: _class.class.courseNumber,
+        number: _class.class.number,
+        sections: _class.selectedSections,
+      })),
+      events: schedule.events,
+      name: `${schedule.name} (copy)`,
+    });
+
+    if (!data) return;
+
+    navigate(`/schedules/${data?.createSchedule._id}`);
+  };
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+      <Dialog.Content className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.text}>
+            <Dialog.Title asChild>
+              <p className={styles.title}>Clone schedule</p>
+            </Dialog.Title>
+            <Dialog.Description asChild>
+              <p className={styles.description}>
+                Create a copy of this schedule
+              </p>
+            </Dialog.Description>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton>
+              <Xmark />
+            </IconButton>
+          </Dialog.Close>
+        </div>
+        <Button onClick={() => confirm()} variant="solid">
+          Confirm
+          <ArrowRight />
+        </Button>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

apps/frontend/src/app/Schedule/Editor/EditDialog/EditDialog.module.scss

@@ -0,0 +1,53 @@
+/* TODO: State animations */
+.content {
+  width: 448px;
+  background-color: var(--foreground-color);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .input {
+    flex-grow: 1;
+    height: 32px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 0 12px;
+  }
+
+  .column {
+    gap: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .description {
+    font-size: 14px;
+    color: var(--paragraph-color);
+    line-height: 1;
+  }
+
+  .header {
+    display: flex;
+    gap: 16px;
+
+    .text {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--heading-color);
+        line-height: 1;
+      }
+    }
+  }
+}

apps/frontend/src/app/Schedule/Editor/EditDialog/index.tsx

@@ -0,0 +1,91 @@
+import { ReactNode, useMemo, useState } from "react";
+
+import { ArrowRight, Trash, Xmark } from "iconoir-react";
+import { useNavigate } from "react-router-dom";
+
+import { Button, Dialog, IconButton } from "@repo/theme";
+
+import { useDeleteSchedule, useUpdateSchedule } from "@/hooks/api";
+import useSchedule from "@/hooks/useSchedule";
+import { removeRecentSchedule } from "@/lib/recent";
+
+import styles from "./EditDialog.module.scss";
+
+interface EditDialogProps {
+  children: ReactNode;
+}
+
+// TODO: Collaborative editing
+// TODO: Invite collaborators
+
+export default function EditDialog({ children }: EditDialogProps) {
+  const { schedule } = useSchedule();
+  const [updateSchedule, { loading }] = useUpdateSchedule();
+  const [deleteSchedule] = useDeleteSchedule();
+  const navigate = useNavigate();
+
+  const [name, setName] = useState(schedule.name);
+
+  const saved = useMemo(() => schedule.name === name.trim(), [schedule, name]);
+
+  const save = () => {
+    const value = name.trim();
+
+    setName(value);
+
+    updateSchedule(
+      schedule._id,
+      { name },
+      { optimisticResponse: { updateSchedule: { ...schedule, name } } }
+    );
+  };
+
+  const remove = async () => {
+    removeRecentSchedule(schedule);
+
+    await deleteSchedule(schedule._id);
+
+    navigate("/schedules");
+  };
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>{children}</Dialog.Trigger>
+      <Dialog.Content className={styles.content}>
+        <div className={styles.header}>
+          <div className={styles.text}>
+            <Dialog.Title asChild>
+              <p className={styles.title}>Edit schedule</p>
+            </Dialog.Title>
+            <Dialog.Description asChild>
+              <p className={styles.description}>
+                Update the name of your schedule
+              </p>
+            </Dialog.Description>
+          </div>
+          <Dialog.Close asChild>
+            <IconButton>
+              <Xmark />
+            </IconButton>
+          </Dialog.Close>
+        </div>
+        <div className={styles.column}>
+          <Button onClick={() => remove()}>
+            <Trash />
+            Delete
+          </Button>
+          <input
+            type="text"
+            className={styles.input}
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+          />
+          <Button disabled={saved || loading} onClick={() => save()}>
+            Save
+            <ArrowRight />
+          </Button>
+        </div>
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}

apps/frontend/src/app/Schedule/Editor/EventDialog/EventDialog.module.scss

@@ -0,0 +1,53 @@
+/* TODO: State animations */
+.content {
+  width: 448px;
+  background-color: var(--foreground-color);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .input {
+    flex-grow: 1;
+    height: 32px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 0 12px;
+  }
+
+  .column {
+    gap: 16px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .description {
+    font-size: 14px;
+    color: var(--paragraph-color);
+    line-height: 1;
+  }
+
+  .header {
+    display: flex;
+    gap: 16px;
+
+    .text {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--heading-color);
+        line-height: 1;
+      }
+    }
+  }
+}