fix: CourseDrawer, ClassDrawer

asuc-octo · Jul 15, 2024 · d4ec13b · d4ec13b
1 parent 6fb2209
commit d4ec13b
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 35 deletions.
diff --git a/frontend/src/components/Class/index.tsx b/frontend/src/components/Class/index.tsx
@@ -225,7 +225,7 @@ export default function Class({
             {_class && <CCN ccn={_class.primarySection.ccn} />}
           </div>
           {dialog ? (
-            <Tabs.List className={styles.menu}>
+            <Tabs.List className={styles.menu} defaultValue="overview">
               <Tabs.Trigger value="overview" asChild>
                 <MenuItem>Overview</MenuItem>
               </Tabs.Trigger>

diff --git a/frontend/src/components/ClassDrawer/ClassDrawer.module.scss b/frontend/src/components/ClassDrawer/ClassDrawer.module.scss
@@ -16,7 +16,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  background-color: var(--foreground-color);
+  background-color: var(--background-color);
   width: 640px;
   border-left: 1px solid var(--border-color);
   z-index: 989;

diff --git a/frontend/src/components/ClassDrawer/index.tsx b/frontend/src/components/ClassDrawer/index.tsx
@@ -1,5 +1,6 @@
-import { ReactNode, forwardRef, useMemo } from "react";
+import { ReactNode, forwardRef } from "react";
 
+import { useQuery } from "@apollo/client";
 import {
   Content,
   DialogTriggerProps,
@@ -10,28 +11,68 @@ import {
 } from "@radix-ui/react-dialog";
 
 import Class from "@/components/Class";
-import { IClass, Semester } from "@/lib/api";
+import { GET_CLASS, GetClassResponse, IClass, Semester } from "@/lib/api";
 
 import styles from "./ClassDrawer.module.scss";
 
-interface BaseClassDrawerProps {
-  year: number;
-  semester: Semester;
+interface Props {
   subject: string;
   courseNumber: string;
   classNumber: string;
+  semester: Semester;
+  year: number;
   partialClass?: IClass | null;
-  children?: ReactNode;
 }
 
-export interface ControlledClassDrawerProps extends BaseClassDrawerProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
+function Body({
+  subject,
+  courseNumber,
+  classNumber,
+  semester,
+  year,
+  partialClass,
+}: Props) {
+  const { data, loading } = useQuery<GetClassResponse>(GET_CLASS, {
+    variables: {
+      subject,
+      courseNumber,
+      classNumber,
+      term: {
+        semester,
+        year,
+      },
+    },
+  });
+
+  return data ? (
+    <Class
+      subject={subject}
+      courseNumber={courseNumber}
+      classNumber={classNumber}
+      semester={semester}
+      year={year}
+      partialClass={partialClass}
+      dialog
+    />
+  ) : loading ? (
+    <></>
+  ) : (
+    <></>
+  );
+}
+
+interface BaseClassDrawerProps extends Props {
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface DefaultClassDrawerProps extends BaseClassDrawerProps {
-  open?: never;
-  onOpenChange?: never;
+  open?: boolean;
+  children: ReactNode;
+}
+
+export interface ControlledClassDrawerProps extends BaseClassDrawerProps {
+  open: boolean;
+  children?: never;
 }
 
 export type ClassDrawerProps =
@@ -58,11 +99,9 @@ const ClassDrawer = forwardRef<
     },
     ref
   ) => {
-    const trigger = useMemo(() => open === undefined, [open]);
-
     return (
       <Root onOpenChange={onOpenChange} open={open}>
-        {trigger && (
+        {children && (
           <Trigger {...props} asChild ref={ref}>
             {children}
           </Trigger>
@@ -74,14 +113,13 @@ const ClassDrawer = forwardRef<
             // TODO: Automatically focus a relevant element
             onOpenAutoFocus={(event) => event.preventDefault()}
           >
-            <Class
+            <Body
               subject={subject}
               courseNumber={courseNumber}
               classNumber={classNumber}
               semester={semester}
               year={year}
               partialClass={partialClass}
-              dialog
             />
           </Content>
         </Portal>

diff --git a/frontend/src/components/Course/index.tsx b/frontend/src/components/Course/index.tsx
@@ -66,7 +66,7 @@ interface CourseProps {
   dialog?: boolean;
 }
 
-export default function Class({
+export default function Course({
   subject,
   number,
   partialCourse,
@@ -150,7 +150,7 @@ export default function Class({
             <AverageGrade gradeAverage={course.gradeAverage} />
           </div>
           {dialog ? (
-            <Tabs.List className={styles.menu}>
+            <Tabs.List className={styles.menu} defaultValue="overview">
               <Tabs.Trigger value="overview" asChild>
                 <MenuItem>Overview</MenuItem>
               </Tabs.Trigger>

diff --git a/frontend/src/components/CourseDrawer/CourseDrawer.module.scss b/frontend/src/components/CourseDrawer/CourseDrawer.module.scss
@@ -16,7 +16,7 @@
   position: fixed;
   right: 0;
   top: 0;
-  background-color: var(--foreground-color);
+  background-color: var(--background-color);
   width: 640px;
   border-left: 1px solid var(--border-color);
   z-index: 989;

diff --git a/frontend/src/components/CourseDrawer/index.tsx b/frontend/src/components/CourseDrawer/index.tsx
@@ -1,5 +1,6 @@
-import { ReactNode, forwardRef, useMemo } from "react";
+import { ReactNode, forwardRef } from "react";
 
+import { useQuery } from "@apollo/client";
 import {
   Content,
   DialogTriggerProps,
@@ -10,25 +11,50 @@ import {
 } from "@radix-ui/react-dialog";
 
 import Course from "@/components/Course";
-import { ICourse } from "@/lib/api";
+import { GET_COURSE, GetCourseResponse, ICourse } from "@/lib/api";
 
 import styles from "./CourseDrawer.module.scss";
 
-interface BaseCourseDrawerProps {
+interface Props {
   subject: string;
   number: string;
   partialCourse?: ICourse | null;
-  children?: ReactNode;
+}
+
+function Body({ subject, number }: Props) {
+  const { data, loading } = useQuery<GetCourseResponse>(GET_COURSE, {
+    variables: {
+      subject,
+      courseNumber: number,
+    },
+  });
+
+  return data ? (
+    <Course
+      subject={subject}
+      number={number}
+      partialCourse={data.course}
+      dialog
+    />
+  ) : loading ? (
+    <></>
+  ) : (
+    <></>
+  );
+}
+
+interface BaseCourseDrawerProps extends Props {
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface ControlledCourseDrawerProps extends BaseCourseDrawerProps {
   open: boolean;
-  onOpenChange: (open: boolean) => void;
+  children?: never;
 }
 
 export interface DefaultCourseDrawerProps extends BaseCourseDrawerProps {
-  open?: never;
-  onOpenChange?: never;
+  open?: boolean;
+  children: ReactNode;
 }
 
 export type CourseDrawerProps =
@@ -44,11 +70,9 @@ const CourseDrawer = forwardRef<
     { subject, children, number, partialCourse, open, onOpenChange, ...props },
     ref
   ) => {
-    const trigger = useMemo(() => open === undefined, [open]);
-
     return (
       <Root onOpenChange={onOpenChange} open={open}>
-        {trigger && (
+        {children && (
           <Trigger {...props} asChild ref={ref}>
             {children}
           </Trigger>
@@ -60,11 +84,10 @@ const CourseDrawer = forwardRef<
             // TODO: Automatically focus a relevant element
             onOpenAutoFocus={(event) => event.preventDefault()}
           >
-            <Course
+            <Body
               subject={subject}
               number={number}
               partialCourse={partialCourse}
-              dialog
             />
           </Content>
         </Portal>

diff --git a/frontend/src/components/MenuItem/MenuItem.module.scss b/frontend/src/components/MenuItem/MenuItem.module.scss
@@ -11,11 +11,11 @@
   transition: all 100ms ease-in-out;
   z-index: 1;
 
-  &:global(.active), &:hover {
+  &:global(.active), &:hover, &[data-state="active"] {
     color: var(--heading-color);
   }
 
-  &:global(.active)::before {
+  &:global(.active)::before, &[data-state="active"]::before {
     opacity: 1;
   }