From 0dd694958d7fd5959059180135fa881390bcb492 Mon Sep 17 00:00:00 2001
From: Aiden <aidenpham@ucsb.edu>
Date: Tue, 28 May 2024 23:05:59 -0700
Subject: [PATCH] ap - added react component to course details index page

---
 .../CourseDetails/CourseDetailsIndexPage.js   | 22 +++++++++++++++++++
 .../CourseDetailsIndexPage.test.js            |  6 +++++
 2 files changed, 28 insertions(+)

diff --git a/frontend/src/main/pages/CourseDetails/CourseDetailsIndexPage.js b/frontend/src/main/pages/CourseDetails/CourseDetailsIndexPage.js
index b087a3169..b507797d5 100644
--- a/frontend/src/main/pages/CourseDetails/CourseDetailsIndexPage.js
+++ b/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>
   );
diff --git a/frontend/src/tests/pages/CourseDetails/CourseDetailsIndexPage.test.js b/frontend/src/tests/pages/CourseDetails/CourseDetailsIndexPage.test.js
index 9256e7f36..6285a3762 100644
--- a/frontend/src/tests/pages/CourseDetails/CourseDetailsIndexPage.test.js
+++ b/frontend/src/tests/pages/CourseDetails/CourseDetailsIndexPage.test.js
@@ -9,6 +9,7 @@ import CourseDetailsIndexPage from "main/pages/CourseDetails/CourseDetailsIndexP
 import { apiCurrentUserFixtures } from "fixtures/currentUserFixtures";
 import { systemInfoFixtures } from "fixtures/systemInfoFixtures";
 import { personalSectionsFixtures } from "fixtures/personalSectionsFixtures";
+import { gradeHistoryFixtures } from "fixtures/gradeHistoryFixtures";
 
 const mockToast = jest.fn();
 jest.mock("react-toastify", () => {
@@ -56,6 +57,11 @@ describe("Course Details Index Page tests", () => {
         params: { qtr: "20221", enrollCode: "06619" },
       })
       .reply(200, personalSectionsFixtures.singleSection);
+    axiosMock
+      .onGet("/api/gradehistory/search", {
+        params: { subjectArea: "CHEM", courseNumber: "184" },
+      })
+      .reply(200, gradeHistoryFixtures.threeGrades);
   });
 
   const queryClient = new QueryClient();