fix: CourseBrowser, ClassBrowser

frontend/schema.graphql

@@ -153,7 +153,9 @@ type Course {
   title: String!
   toDate: String!
   raw: JSONObject!
+  primaryInstructionMethod: InstructionMethod!
   lastUpdated: ISODate!
+  typicallyOffered: [Semester!]
 }
 
 enum AcademicCareer {
@@ -463,6 +465,118 @@ enum Component {
   SEM
 }
 
+enum InstructionMethod {
+  """
+  Unknown
+  """
+  UNK
+
+  """
+  Demonstration
+  """
+  DEM
+
+  """
+  Conversation
+  """
+  CON
+
+  """
+  Workshop
+  """
+  WOR
+
+  """
+  Web-Based Discussion
+  """
+  WBD
+
+  """
+  Clinic
+  """
+  CLC
+
+  """
+  Directed Group Study
+  """
+  GRP
+
+  """
+  Discussion
+  """
+  DIS
+
+  """
+  Tutorial
+  """
+  TUT
+
+  """
+  Field Work
+  """
+  FLD
+
+  """
+  Lecture
+  """
+  LEC
+
+  """
+  Laboratory
+  """
+  LAB
+
+  """
+  Session
+  """
+  SES
+
+  """
+  Studio
+  """
+  STD
+
+  """
+  Self-paced
+  """
+  SLF
+
+  """
+  Colloquium
+  """
+  COL
+
+  """
+  Web-Based Lecture
+  """
+  WBL
+
+  """
+  Independent Study
+  """
+  IND
+
+  """
+  Internship
+  """
+  INT
+
+  """
+  Reading
+  """
+  REA
+
+  """
+  Recitation
+  """
+  REC
+
+  """
+  Seminar
+  """
+  SEM
+}
+
 type Reservation {
   enrollCount: Int!
   enrollMax: Int!

frontend/src/app/Catalog/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 
-import Browser from "@/components/Browser";
+import ClassBrowser from "@/components/ClassBrowser";
 import { IClass, Semester } from "@/lib/api";
 
 import styles from "./Catalog.module.scss";
@@ -53,7 +53,7 @@ export default function Catalog() {
 
   return (
     <div className={styles.root}>
-      <Browser
+      <ClassBrowser
         onSelect={handleClick}
         semester={currentSemester}
         year={currentYear}

frontend/src/app/Plan/Term/Catalog/index.tsx

@@ -4,25 +4,18 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { Xmark } from "iconoir-react";
 import { useSearchParams } from "react-router-dom";
 
-import Browser from "@/components/Browser";
+import CourseBrowser from "@/components/CourseBrowser";
 import IconButton from "@/components/IconButton";
-import { ICourse, Semester } from "@/lib/api";
+import { ICourse } from "@/lib/api";
 
 import styles from "./Catalog.module.scss";
 
 interface CatalogProps {
-  onClick: (course: ICourse, number: string) => void;
+  onClick: (course: ICourse) => void;
   children: ReactNode;
-  semester: Semester;
-  year: number;
 }
 
-export default function Catalog({
-  onClick,
-  children,
-  semester,
-  year,
-}: CatalogProps) {
+export default function Catalog({ onClick, children }: CatalogProps) {
   const [open, setOpen] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -35,8 +28,8 @@ export default function Catalog({
     setSearchParams(searchParams);
   };
 
-  const handleClick = (course: ICourse, number: string) => {
-    onClick(course, number);
+  const handleClick = (course: ICourse) => {
+    onClick(course);
 
     setOpen(false);
 
@@ -59,12 +52,7 @@ export default function Catalog({
             </Dialog.Close>
           </div>
           <div className={styles.body}>
-            <Browser
-              semester={semester}
-              year={year}
-              onClassSelect={handleClick}
-              responsive={false}
-            />
+            <CourseBrowser onSelect={handleClick} responsive={false} />
           </div>
         </Dialog.Content>
       </Dialog.Portal>

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} semester={Semester.Spring} year={2024}>
+          <Catalog onClick={onClick}>
             <IconButton>
               <Plus />
             </IconButton>

frontend/src/app/Schedule/Manage/SideBar/Catalog/index.tsx

@@ -4,7 +4,7 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { Xmark } from "iconoir-react";
 import { useSearchParams } from "react-router-dom";
 
-import Browser from "@/components/Browser";
+import ClassBrowser from "@/components/ClassBrowser";
 import IconButton from "@/components/IconButton";
 import { ICourse, Semester } from "@/lib/api";
 
@@ -54,7 +54,7 @@ export default function Catalog({ onClassSelect, children }: CatalogProps) {
             </Dialog.Close>
           </div>
           <div className={styles.body}>
-            <Browser
+            <ClassBrowser
               semester={Semester.Spring}
               year={2024}
               onClassSelect={handleClassSelect}

frontend/src/components/Browser/index.tsx → frontend/src/components/ClassBrowser/index.tsx

@@ -13,7 +13,7 @@ import {
   Semester,
 } from "@/lib/api";
 
-import styles from "./Browser.module.scss";
+import styles from "./ClassBrowser.module.scss";
 import Filters from "./Filters";
 import List from "./List";
 import {
@@ -25,21 +25,21 @@ import {
   initialize,
 } from "./browser";
 
-interface BrowserProps {
+interface ClassBrowserProps {
   onSelect: (_class: IClass) => void;
   responsive?: boolean;
   semester: Semester;
   year: number;
   persistent?: boolean;
 }
 
-export default function Browser({
+export default function ClassBrowser({
   onSelect,
   responsive = true,
   semester: currentSemester,
   year: currentYear,
   persistent,
-}: BrowserProps) {
+}: ClassBrowserProps) {
   const [open, setOpen] = useState(false);
   const [searchParams] = useSearchParams();
   const { width } = useWindowDimensions();

frontend/src/components/CourseBrowser/CourseBrowser.module.scss

@@ -0,0 +1,9 @@
+.root {
+  position: relative;
+  height: 100%;
+  display: flex;
+
+  &.block {
+    width: 100%;
+  }
+}