Personal Schedule Modal Bug

frontend/src/main/components/PersonalSchedules/AddToScheduleModal.js

@@ -5,8 +5,10 @@ import Form from "react-bootstrap/Form";
 import PersonalScheduleSelector from "./PersonalScheduleSelector";
 import { useBackend } from "main/utils/useBackend";
 import { Link } from "react-router-dom";
+import { filterSchedules } from "main/utils/PersonalScheduleUtils";
+import { yyyyqToQyy } from "main/utils/quarterUtilities";
 
-export default function AddToScheduleModal({ section, onAdd }) {
+export default function AddToScheduleModal({ section, quarter, onAdd }) {
   const [showModal, setShowModal] = useState(false);
   const [selectedSchedule, setSelectedSchedule] = useState("");
 
@@ -22,6 +24,8 @@ export default function AddToScheduleModal({ section, onAdd }) {
   );
   // Stryker restore all
 
+  const filteredSchedules = filterSchedules(quarter, schedules);
+
   const handleModalClose = () => {
     setShowModal(false);
   };
@@ -43,19 +47,22 @@ export default function AddToScheduleModal({ section, onAdd }) {
         <Modal.Body>
           <Form>
             {
-              /* istanbul ignore next */ schedules.length > 0 ? (
+              /* istanbul ignore next */ filteredSchedules.length > 0 ? (
                 <Form.Group controlId="scheduleSelect">
                   <Form.Label>Select Schedule</Form.Label>
                   <PersonalScheduleSelector
+                    filteredSchedules={filteredSchedules}
                     schedule={selectedSchedule}
                     setSchedule={setSelectedSchedule}
                     controlId="scheduleSelect"
                   />
                 </Form.Group>
               ) : (
                 <p>
-                  No schedules found.
-                  <Link to="/personalschedules/create">Create a schedule</Link>
+                  There are no personal schedules found for{" "}
+                  {yyyyqToQyy(quarter)}
+                  <br />
+                  <Link to="/personalschedules/create">Create a Schedule</Link>
                 </p>
               )
             }
@@ -65,6 +72,22 @@ export default function AddToScheduleModal({ section, onAdd }) {
           <Button variant="secondary" onClick={handleModalClose}>
             Close
           </Button>
+          {
+            // /* istanbul ignore next */ filteredSchedules.length > 0 ? (
+            //   <Button variant="primary" onClick={handleModalSave}>
+            //     Save Changes
+            //   </Button>
+            // ) : (
+            //   <Button variant="primary">
+            //     <Link
+            //       to="/personalschedules/create"
+            //       style={{ textDecoration: "none", color: "white" }}
+            //     >
+            //       Create a Schedule
+            //     </Link>
+            //   </Button>
+            // )
+          }
           <Button variant="primary" onClick={handleModalSave}>
             Save Changes
           </Button>

frontend/src/main/components/PersonalSchedules/PersonalScheduleForm.js

@@ -84,9 +84,7 @@ function PersonalScheduleForm({
           id="description"
           type="text"
           isInvalid={Boolean(errors.description)}
-          {...register("description", {
-            required: "Description is required.",
-          })}
+          {...register("description")}
         />
         <Form.Control.Feedback type="invalid">
           {errors.description?.message}

frontend/src/main/components/PersonalSchedules/PersonalScheduleSelector.js

@@ -1,38 +1,22 @@
 import React, { useState, useEffect } from "react";
 import { Form } from "react-bootstrap";
-import { useBackend } from "main/utils/useBackend";
 import { yyyyqToQyy } from "main/utils/quarterUtilities.js";
 
 const PersonalScheduleSelector = ({
   schedule,
+  filteredSchedules,
   setSchedule,
   controlId,
   onChange = null,
   label = "Schedule",
 }) => {
-  const localSearchSchedule = localStorage.getItem(controlId);
-
-  const [scheduleState, setScheduleState] = useState(
-    localSearchSchedule || schedule,
-  );
-
-  // Stryker disable all
-  const {
-    data: schedules,
-    error: _error,
-    status: _status,
-  } = useBackend(
-    ["/api/personalschedules/all"],
-    { method: "GET", url: "/api/personalschedules/all" },
-    [],
-  );
-  // Stryker restore all
+  const [scheduleState, setScheduleState] = useState(schedule);
 
   useEffect(() => {
-    if (schedules.length > 0) {
-      setSchedule(schedules[0].id);
+    if (filteredSchedules.length > 0) {
+      setSchedule(filteredSchedules[0].id);
     }
-  }, [schedules, setSchedule]);
+  }, [filteredSchedules, setSchedule]);
 
   const handleScheduleOnChange = (event) => {
     const selectedSchedule = event.target.value;
@@ -52,8 +36,8 @@ const PersonalScheduleSelector = ({
         value={scheduleState}
         onChange={handleScheduleOnChange}
       >
-        {schedules &&
-          schedules.map((schedule) => (
+        {filteredSchedules &&
+          filteredSchedules.map((schedule) => (
             <option key={schedule.id} value={schedule.id}>
               {yyyyqToQyy(schedule.quarter)} {schedule.name}
             </option>

frontend/src/main/components/Sections/SectionsTable.js

@@ -198,6 +198,7 @@ export default function SectionsTable({ sections }) {
               <span>{value}</span>
               <AddToScheduleModal
                 section={original}
+                quarter={original.courseInfo.quarter}
                 onAdd={(section, schedule) =>
                   handleAddToSchedule(section, schedule, mutation)
                 }
@@ -217,6 +218,7 @@ export default function SectionsTable({ sections }) {
               <span>{value}</span>
               <AddToScheduleModal
                 section={value}
+                quarter={sections[0].courseInfo.quarter}
                 onAdd={(section, schedule) =>
                   handleLectureAddToSchedule(section, schedule, mutation)
                 }

frontend/src/main/pages/CourseDetails/CourseDetailsIndexPage.js

@@ -5,6 +5,7 @@ import { useBackend, _useBackendMutation } from "main/utils/useBackend";
 import CourseDetailsTable from "main/components/CourseDetails/CourseDetailsTable";
 import { yyyyqToQyy } from "main/utils/quarterUtilities";
 import CourseDescriptionTable from "main/components/Courses/CourseDescriptionTable";
+import GradeHistoryTable from "main/components/GradeHistory/GradeHistoryTable";
 
 export default function CourseDetailsIndexPage() {
   // Stryker disable next-line all : Can't test state because hook is internal
@@ -26,6 +27,25 @@ export default function CourseDetailsIndexPage() {
     },
   );
 
+  let courseId = moreDetails?.courseId || "";
+  let subject = "";
+  let course = "";
+  if (courseId) {
+    [subject, course] = courseId.split(/\s+/);
+  }
+  const { data: gradeData } = useBackend(
+    // Stryker disable all : hard to test for query caching
+    [`/api/gradehistory/search?subjectArea=${subject}&courseNumber=${course}`],
+    {
+      method: "GET",
+      url: `/api/gradehistory/search`,
+      params: {
+        subjectArea: subject,
+        courseNumber: course,
+      },
+    },
+  );
+
   return (
     <BasicLayout>
       <div className="pt-2">
@@ -37,6 +57,8 @@ export default function CourseDetailsIndexPage() {
 
         {moreDetails && <CourseDetailsTable details={[moreDetails]} />}
         {moreDetails && <CourseDescriptionTable course={moreDetails} />}
+        {moreDetails && <h5>Grade History for {moreDetails.courseId}</h5>}
+        {gradeData && <GradeHistoryTable grades={gradeData} />}
       </div>
     </BasicLayout>
   );

frontend/src/main/pages/PersonalSchedules/PersonalSchedulesCreatePage.js

@@ -10,7 +10,9 @@ export default function PersonalSchedulesCreatePage() {
     method: "POST",
     params: {
       name: personalSchedule.name,
-      description: personalSchedule.description,
+      description: personalSchedule.description
+        ? personalSchedule.description
+        : "",
       quarter: personalSchedule.quarter,
     },
   });

frontend/src/main/pages/PersonalSchedules/PersonalSchedulesEditPage.js

@@ -61,7 +61,9 @@ export default function PersonalSchedulesEditPage() {
     data: {
       user: personalSchedule.user,
       name: personalSchedule.name,
-      description: personalSchedule.description,
+      description: personalSchedule.description
+        ? personalSchedule.description
+        : "",
       quarter: personalSchedule.quarter,
     },
   });

frontend/src/main/utils/PersonalScheduleUtils.js

@@ -14,3 +14,7 @@ export function cellToAxiosParamsDelete(cell) {
     },
   };
 }
+
+export function filterSchedules(quarter, schedules) {
+  return schedules.filter((schedule) => schedule.quarter === quarter);
+}

frontend/src/tests/components/PersonalSchedules/AddToScheduleModal.test.js

@@ -6,6 +6,7 @@ import AddToScheduleModal from "main/components/PersonalSchedules/AddToScheduleM
 import { BrowserRouter as Router } from "react-router-dom";
 
 const queryClient = new QueryClient();
+const quarter = "20242";
 
 describe("AddToScheduleModal", () => {
   let mockOnAdd;
@@ -17,7 +18,7 @@ describe("AddToScheduleModal", () => {
   test("renders without crashing", () => {
     render(
       <QueryClientProvider client={queryClient}>
-        <AddToScheduleModal onAdd={mockOnAdd} />
+        <AddToScheduleModal onAdd={mockOnAdd} quarter={quarter} />
       </QueryClientProvider>,
     );
   });
@@ -26,7 +27,7 @@ describe("AddToScheduleModal", () => {
     render(
       <QueryClientProvider client={queryClient}>
         <Router>
-          <AddToScheduleModal onAdd={mockOnAdd} />
+          <AddToScheduleModal onAdd={mockOnAdd} quarter={quarter} />
         </Router>
       </QueryClientProvider>,
     );
@@ -46,7 +47,7 @@ describe("AddToScheduleModal", () => {
     render(
       <QueryClientProvider client={queryClient}>
         <Router>
-          <AddToScheduleModal onAdd={mockOnAdd} />
+          <AddToScheduleModal quarter={quarter} onAdd={mockOnAdd} />
         </Router>
       </QueryClientProvider>,
     );
@@ -71,33 +72,17 @@ describe("AddToScheduleModal", () => {
     render(
       <QueryClientProvider client={queryClient}>
         <Router>
-          <AddToScheduleModal onAdd={mockOnAdd} />
+          <AddToScheduleModal quarter={quarter} onAdd={mockOnAdd} />
         </Router>
       </QueryClientProvider>,
     );
 
     fireEvent.click(screen.getByText("Add"));
 
-    expect(screen.getByText("No schedules found.")).toBeInTheDocument();
-    expect(screen.getByText("Create a schedule")).toHaveAttribute(
-      "href",
-      "/personalschedules/create",
-    );
-  });
-
-  test("displays correct message when no schedules found initially", () => {
-    render(
-      <QueryClientProvider client={queryClient}>
-        <Router>
-          <AddToScheduleModal onAdd={mockOnAdd} section={null} />
-        </Router>
-      </QueryClientProvider>,
-    );
-
-    fireEvent.click(screen.getByText("Add"));
-
-    expect(screen.getByText("No schedules found.")).toBeInTheDocument();
-    expect(screen.getByText("Create a schedule")).toHaveAttribute(
+    expect(
+      screen.getByText("There are no personal schedules found for S24"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Create a Schedule")).toHaveAttribute(
       "href",
       "/personalschedules/create",
     );
@@ -107,7 +92,11 @@ describe("AddToScheduleModal", () => {
     render(
       <QueryClientProvider client={queryClient}>
         <Router>
-          <AddToScheduleModal onAdd={mockOnAdd} section={"Stryker was here!"} />
+          <AddToScheduleModal
+            onAdd={mockOnAdd}
+            quarter={quarter}
+            section={"Stryker was here!"}
+          />
         </Router>
       </QueryClientProvider>,
     );
@@ -132,15 +121,21 @@ describe("AddToScheduleModal", () => {
     render(
       <QueryClientProvider client={queryClient}>
         <Router>
-          <AddToScheduleModal onAdd={mockOnAdd} section={null} />
+          <AddToScheduleModal
+            onAdd={mockOnAdd}
+            quarter={quarter}
+            section={null}
+          />
         </Router>
       </QueryClientProvider>,
     );
 
     fireEvent.click(screen.getByText("Add"));
 
-    expect(screen.getByText("No schedules found.")).toBeInTheDocument();
-    expect(screen.getByText("Create a schedule")).toHaveAttribute(
+    expect(
+      screen.getByText("There are no personal schedules found for S24"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Create a Schedule")).toHaveAttribute(
       "href",
       "/personalschedules/create",
     );

frontend/src/tests/components/PersonalSchedules/PersonalScheduleForm.test.js

@@ -80,7 +80,6 @@ describe("PersonalScheduleForm tests", () => {
     fireEvent.click(submitButton);
 
     expect(await screen.findByText(/Name is required./)).toBeInTheDocument();
-    expect(screen.getByText(/Description is required./)).toBeInTheDocument();
   });
 
   test("No Error messages on good input", async () => {