feat: CourseBrowser defaultSemesters

asuc-octo · Jul 3, 2024 · 0575add · 0575add
1 parent c8569ee
commit 0575add
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 98 deletions.
diff --git a/frontend/src/app/Plan/Term/Catalog/Catalog.module.scss b/frontend/src/app/Plan/Term/Catalog/Catalog.module.scss
@@ -42,10 +42,13 @@
     align-items: center;
     flex-shrink: 0;
     justify-content: space-between;
-    font-size: 14px;
-    line-height: 1;
-    color: var(--heading-color);
-    font-weight: 500;
+
+    .title {
+      font-size: 14px;
+      line-height: 1;
+      color: var(--heading-color);
+      font-weight: 500;
+    }
   }
 }
 

diff --git a/frontend/src/app/Plan/Term/Catalog/index.tsx b/frontend/src/app/Plan/Term/Catalog/index.tsx
@@ -6,16 +6,23 @@ import { useSearchParams } from "react-router-dom";
 
 import CourseBrowser from "@/components/CourseBrowser";
 import IconButton from "@/components/IconButton";
-import { ICourse } from "@/lib/api";
+import { ICourse, Semester } from "@/lib/api";
 
 import styles from "./Catalog.module.scss";
 
 interface CatalogProps {
   onClick: (course: ICourse) => void;
+  semester: Semester;
+  year: number;
   children: ReactNode;
 }
 
-export default function Catalog({ onClick, children }: CatalogProps) {
+export default function Catalog({
+  onClick,
+  children,
+  semester,
+  year,
+}: CatalogProps) {
   const [open, setOpen] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -44,15 +51,23 @@ export default function Catalog({ onClick, children }: CatalogProps) {
         <Dialog.Overlay className={styles.overlay} />
         <Dialog.Content className={styles.content}>
           <div className={styles.header}>
-            Add a course to this semester
+            <Dialog.Title asChild>
+              <p className={styles.title}>
+                Add a course to {semester} {year}
+              </p>
+            </Dialog.Title>
             <Dialog.Close asChild>
               <IconButton className={styles.close}>
                 <Xmark />
               </IconButton>
             </Dialog.Close>
           </div>
           <div className={styles.body}>
-            <CourseBrowser onSelect={handleClick} responsive={false} />
+            <CourseBrowser
+              onSelect={handleClick}
+              responsive={false}
+              defaultSemesters={[semester]}
+            />
           </div>
         </Dialog.Content>
       </Dialog.Portal>

diff --git a/frontend/src/app/Plan/Term/index.tsx b/frontend/src/app/Plan/Term/index.tsx
@@ -28,7 +28,7 @@ const Term = forwardRef<HTMLDivElement, TermProps>(
           <Units unitsMin={12} unitsMax={20}>
             {(units) => <p className={styles.units}>{units}</p>}
           </Units>
-          <Catalog onClick={onClick}>
+          <Catalog onClick={onClick} semester={semester} year={year}>
             <IconButton>
               <Plus />
             </IconButton>

diff --git a/frontend/src/app/Schedule/Manage/SideBar/Catalog/index.tsx b/frontend/src/app/Schedule/Manage/SideBar/Catalog/index.tsx
@@ -6,18 +6,18 @@ import { useSearchParams } from "react-router-dom";
 
 import ClassBrowser from "@/components/ClassBrowser";
 import IconButton from "@/components/IconButton";
-import { ICourse, Semester } from "@/lib/api";
+import { IClass, Semester } from "@/lib/api";
 
 import styles from "./Catalog.module.scss";
 
 interface CatalogProps {
-  onClassSelect: (course: ICourse, number: string) => void;
+  onSelect: (_class: IClass) => void;
   children: JSX.Element;
   semester: string;
   year: number;
 }
 
-export default function Catalog({ onClassSelect, children }: CatalogProps) {
+export default function Catalog({ onSelect, children }: CatalogProps) {
   const [open, setOpen] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -30,8 +30,8 @@ export default function Catalog({ onClassSelect, children }: CatalogProps) {
     setSearchParams(searchParams);
   };
 
-  const handleClassSelect = (course: ICourse, number: string) => {
-    onClassSelect(course, number);
+  const handleSelect = (_class: IClass) => {
+    onSelect(_class);
 
     setOpen(false);
 
@@ -57,7 +57,7 @@ export default function Catalog({ onClassSelect, children }: CatalogProps) {
             <ClassBrowser
               semester={Semester.Spring}
               year={2024}
-              onClassSelect={handleClassSelect}
+              onSelect={handleSelect}
               responsive={false}
             />
           </div>

diff --git a/frontend/src/app/Schedule/Manage/SideBar/index.tsx b/frontend/src/app/Schedule/Manage/SideBar/index.tsx
@@ -4,7 +4,7 @@ import { Plus } from "iconoir-react";
 
 import Button from "@/components/Button";
 import Units from "@/components/Units";
-import { IClass, ICourse, ISection, Semester } from "@/lib/api";
+import { IClass, ISection, Semester } from "@/lib/api";
 
 import Catalog from "./Catalog";
 import Class from "./Class";
@@ -14,7 +14,7 @@ interface SideBarProps {
   classes: IClass[];
   selectedSections: ISection[];
   expanded: boolean[];
-  onClassSelect: (course: ICourse, number: string) => void;
+  onSelect: (_class: IClass) => void;
   onSectionSelect: (section: ISection) => void;
   onSectionMouseOver: (section: ISection) => void;
   onSectionMouseOut: () => void;
@@ -24,7 +24,7 @@ interface SideBarProps {
 export default function SideBar({
   classes,
   selectedSections,
-  onClassSelect,
+  onSelect,
   expanded,
   onSectionSelect,
   onSectionMouseOver,
@@ -55,11 +55,7 @@ export default function SideBar({
             </Units>
           </div>
         </div>
-        <Catalog
-          onClassSelect={onClassSelect}
-          semester={Semester.Spring}
-          year={2024}
-        >
+        <Catalog onSelect={onSelect} semester={Semester.Spring} year={2024}>
           <Button className={styles.button}>
             Add class
             <Plus />

diff --git a/frontend/src/app/Schedule/Manage/index.tsx b/frontend/src/app/Schedule/Manage/index.tsx
@@ -15,7 +15,7 @@ import IconButton from "@/components/IconButton";
 import MenuItem from "@/components/MenuItem";
 import Tooltip from "@/components/Tooltip";
 import Week from "@/components/Week";
-import { GET_CLASS, IClass, ICourse, ISection } from "@/lib/api";
+import { GET_CLASS, IClass, ISection } from "@/lib/api";
 import { getY } from "@/lib/schedule";
 
 import { ScheduleContextType } from "../schedule";
@@ -102,8 +102,8 @@ export default function Manage() {
     [setCurrentSection, selectedSections, tab]
   );
 
-  const handleClassSelect = useCallback(
-    async (course: ICourse, number: string) => {
+  const handleSelect = useCallback(
+    async (_class: IClass) => {
       // Fetch the selected class
       const { data } = await apolloClient.query<{ class: IClass }>({
         query: GET_CLASS,
@@ -112,20 +112,20 @@ export default function Manage() {
             semester: "Spring",
             year: 2024,
           },
-          subject: course.subject,
-          courseNumber: course.number,
-          classNumber: number,
+          subject: _class.course.subject,
+          courseNumber: _class.course.number,
+          classNumber: _class.number,
         },
       });
 
       if (!data) return;
 
       // Move existing classes to the top rather than duplicating them
       const index = classes.findIndex(
-        (class_) =>
-          class_.course.subject === course.subject &&
-          class_.course.number === course.number &&
-          class_.number === number
+        ({ course, number }) =>
+          course.subject === _class.course.subject &&
+          course.number === _class.course.number &&
+          number === _class.number
       );
 
       setExpanded((expandedClasses) => {
@@ -143,7 +143,7 @@ export default function Manage() {
       // Add new classes to the top expanded
       if (index !== -1) return;
 
-      const { primarySection, sections } = data.class;
+      const { primarySection, sections, number } = data.class;
 
       const clonedPrimarySection = structuredClone(primarySection);
 
@@ -232,7 +232,7 @@ export default function Manage() {
           classes={classes}
           selectedSections={selectedSections}
           expanded={expanded}
-          onClassSelect={handleClassSelect}
+          onSelect={handleSelect}
           onSectionSelect={handleSectionSelect}
           onExpandedChange={handleExpandedChange}
           onSectionMouseOver={handleSectionMouseOver}

diff --git a/frontend/src/components/ClassBrowser/Filters/index.tsx b/frontend/src/components/ClassBrowser/Filters/index.tsx
@@ -396,31 +396,37 @@ export default function Filters({
           onValueChange={handleValueChange}
           value={currentSortBy}
         >
-          {Object.values(SortBy).map((sortBy) => (
-            <div className={styles.filter}>
-              <RadioGroup.Item
-                className={styles.radio}
-                id={`sortBy-${sortBy}`}
-                value={sortBy}
-              >
-                <RadioGroup.Indicator />
-              </RadioGroup.Item>
-              <label className={styles.text} htmlFor={`sortBy-${sortBy}`}>
-                <span className={styles.value}>{sortBy}</span>
-              </label>
-            </div>
-          ))}
+          {Object.values(SortBy).map((sortBy) => {
+            const key = `sortBy-${sortBy}`;
+
+            return (
+              <div className={styles.filter} key={key}>
+                <RadioGroup.Item
+                  className={styles.radio}
+                  id={key}
+                  value={sortBy}
+                >
+                  <RadioGroup.Indicator />
+                </RadioGroup.Item>
+                <label className={styles.text} htmlFor={key}>
+                  <span className={styles.value}>{sortBy}</span>
+                </label>
+              </div>
+            );
+          })}
         </RadioGroup.Root>
         <p className={styles.label}>Level</p>
         {Object.values(Level).map((level) => {
           const active = currentLevels.includes(level as Level);
 
+          const key = `level-${level}`;
+
           return (
-            <div className={styles.filter}>
+            <div className={styles.filter} key={key}>
               <Checkbox.Root
                 className={styles.checkbox}
                 checked={active}
-                id={`level-${level}`}
+                id={key}
                 onCheckedChange={(checked) =>
                   updateArray(
                     "levels",
@@ -435,7 +441,7 @@ export default function Filters({
                   <Check width={12} height={12} />
                 </Checkbox.Indicator>
               </Checkbox.Root>
-              <label className={styles.text} htmlFor={`level-${level}`}>
+              <label className={styles.text} htmlFor={key}>
                 <span className={styles.value}>{level}</span>
                 {!active && ` (${filteredLevels[level].toLocaleString()})`}
               </label>
@@ -446,12 +452,14 @@ export default function Filters({
         {Object.values(Unit).map((unit) => {
           const active = currentUnits.includes(unit);
 
+          const key = `units-${unit}`;
+
           return (
-            <div className={styles.filter}>
+            <div className={styles.filter} key={key}>
               <Checkbox.Root
                 className={styles.checkbox}
                 checked={active}
-                id={`units-${unit}`}
+                id={key}
                 onCheckedChange={(checked) =>
                   updateArray(
                     "units",
@@ -466,7 +474,7 @@ export default function Filters({
                   <Check width={12} height={12} />
                 </Checkbox.Indicator>
               </Checkbox.Root>
-              <label className={styles.text} htmlFor={`units-${unit}`}>
+              <label className={styles.text} htmlFor={key}>
                 <span className={styles.value}>
                   {unit} {unit === Unit.One ? "unit" : "units"}
                 </span>
@@ -481,12 +489,14 @@ export default function Filters({
           .map((component) => {
             const active = currentComponents.includes(component as Component);
 
+            const key = `component-${component}`;
+
             return (
-              <div className={styles.filter}>
+              <div className={styles.filter} key={key}>
                 <Checkbox.Root
                   className={styles.checkbox}
                   checked={active}
-                  id={`component-${component}`}
+                  id={key}
                   onCheckedChange={(checked) =>
                     updateArray(
                       "components",
@@ -501,10 +511,7 @@ export default function Filters({
                     <Check width={12} height={12} />
                   </Checkbox.Indicator>
                 </Checkbox.Root>
-                <label
-                  className={styles.text}
-                  htmlFor={`component-${component}`}
-                >
+                <label className={styles.text} htmlFor={key}>
                   <span className={styles.value}>
                     {components[component as Component]}
                   </span>
@@ -519,15 +526,17 @@ export default function Filters({
           {expanded ? "View less" : "View more"}
         </div>
         <p className={styles.label}>Day</p>
-        {Object.entries(Day).map(([key, day]) => {
+        {Object.entries(Day).map(([property, day]) => {
           const active = currentDays.includes(day);
 
+          const key = `day-${day}`;
+
           return (
-            <div className={styles.filter}>
+            <div className={styles.filter} key={key}>
               <Checkbox.Root
                 className={styles.checkbox}
                 checked={active}
-                id={`day-${day}`}
+                id={key}
                 onCheckedChange={(checked) =>
                   updateArray(
                     "days",
@@ -542,8 +551,8 @@ export default function Filters({
                   <Check width={12} height={12} />
                 </Checkbox.Indicator>
               </Checkbox.Root>
-              <label className={styles.text} htmlFor={`day-${day}`}>
-                <span className={styles.value}>{key}</span>
+              <label className={styles.text} htmlFor={key}>
+                <span className={styles.value}>{property}</span>
                 {!active && ` (${filteredDays[day].toLocaleString()})`}
               </label>
             </div>