Merge pull request #135 from Pearson-Advance/vue/PADV-1892

PADV-1892 - Classes page and Course Details page are now working correctly.
Pearson-Advance · Dec 9, 2024 · 5fda844 · 5fda844
2 parents 846543a + 86eba88
commit 5fda844
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 33 deletions.
diff --git a/src/features/Classes/ClassesPage/index.jsx b/src/features/Classes/ClassesPage/index.jsx
@@ -25,28 +25,18 @@ const ClassesPage = () => {
   useEffect(() => {
     if (Object.keys(selectedInstitution).length > 0) {
       if (queryNotInstructors === 'null' && !resetFiltersRef.current) {
-        dispatch(fetchClassesData(selectedInstitution.id, initialPage, '', instructorsNull));
+        dispatch(fetchClassesData(selectedInstitution.id, currentPage, '', instructorsNull));
       } else if (queryNotInstructors === 'null' && resetFiltersRef.current) {
-        dispatch(fetchClassesData(selectedInstitution.id, initialPage, '', stateClasses.filters));
+        dispatch(fetchClassesData(selectedInstitution.id, currentPage, '', stateClasses.filters));
       } else {
-        dispatch(fetchClassesData(selectedInstitution.id, initialPage, '', stateClasses.filters));
+        dispatch(fetchClassesData(selectedInstitution.id, currentPage, '', stateClasses.filters));
       }
     }
 
     return () => {
       dispatch(resetClassesTable());
     };
-  }, [selectedInstitution, dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  useEffect(() => {
-    if (queryNotInstructors === 'null' && !resetFiltersRef.current) {
-      dispatch(fetchClassesData(selectedInstitution.id, currentPage, '', instructorsNull));
-    } else if (queryNotInstructors === 'null' && resetFiltersRef.current) {
-      dispatch(fetchClassesData(selectedInstitution.id, currentPage, '', stateClasses.filters));
-    } else {
-      dispatch(fetchClassesData(selectedInstitution.id, currentPage, '', stateClasses.filters));
-    }
-  }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedInstitution, dispatch, currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handlePagination = (targetPage) => {
     setCurrentPage(targetPage);

diff --git a/src/features/Courses/CoursesDetailPage/__test__/index.test.jsx b/src/features/Courses/CoursesDetailPage/__test__/index.test.jsx
@@ -51,6 +51,22 @@ const mockStore = {
       num_pages: 1,
       current_page: 1,
     },
+    selectOptions: [
+      {
+        masterCourseName: 'Demo Course 1',
+        numberOfClasses: 3,
+        missingClassesForInstructor: 0,
+        numberOfStudents: 3,
+        numberOfPendingStudents: 0,
+      },
+      {
+        masterCourseName: 'Demo Course 2',
+        numberOfClasses: 3,
+        missingClassesForInstructor: 0,
+        numberOfStudents: 3,
+        numberOfPendingStudents: 0,
+      },
+    ],
   },
   classes: {
     table: {

diff --git a/src/features/Courses/CoursesDetailPage/index.jsx b/src/features/Courses/CoursesDetailPage/index.jsx
@@ -12,7 +12,7 @@ import LinkWithQuery from 'features/Main/LinkWithQuery';
 import CourseDetailTable from 'features/Courses/CourseDetailTable';
 
 import { fetchClassesData } from 'features/Classes/data/thunks';
-import { fetchCoursesData } from 'features/Courses/data/thunks';
+import { fetchCoursesOptionsData } from 'features/Courses/data/thunks';
 import { fetchClassesDataSuccess, updateCurrentPage as updateClassesCurrentPage } from 'features/Classes/data/slice';
 import { fetchCoursesDataSuccess, updateCurrentPage } from 'features/Courses/data/slice';
 
@@ -38,22 +38,13 @@ const CoursesDetailPage = () => {
     numberOfPendingStudents: '-',
     masterCourseId: '-',
   }), []);
-
-  const courseInfo = useSelector((state) => state.courses.table.data)
+  const institution = useSelector((state) => state.main.selectedInstitution);
+  const courseInfo = useSelector((state) => state.courses.selectOptions)
     .find((course) => course?.masterCourseId === courseIdDecoded) || defaultCourseInfo;
-  const lastCourseInfoRef = useRef(courseInfo);
-
-  useEffect(() => {
-    if (courseInfo !== defaultCourseInfo) {
-      lastCourseInfoRef.current = courseInfo;
-    }
-  }, [courseInfo, defaultCourseInfo]);
 
-  const nextCourseInfo = lastCourseInfoRef.current;
-  const institution = useSelector((state) => state.main.selectedInstitution);
   const classes = useSelector((state) => state.classes.table);
-  const totalStudents = nextCourseInfo.numberOfStudents + nextCourseInfo.numberOfPendingStudents;
-  const courseDetailsLink = `${getConfig().LEARNING_MICROFRONTEND_URL}/course/${nextCourseInfo.masterCourseId}/home`;
+  const totalStudents = courseInfo.numberOfStudents + courseInfo.numberOfPendingStudents;
+  const courseDetailsLink = `${getConfig().LEARNING_MICROFRONTEND_URL}/course/${courseInfo.masterCourseId}/home`;
 
   const handlePagination = (targetPage) => {
     setCurrentPage(targetPage);
@@ -69,7 +60,7 @@ const CoursesDetailPage = () => {
 
     if (institution.id) {
       dispatch(fetchClassesData(institution.id, initialPage, courseIdDecoded));
-      dispatch(fetchCoursesData(institution.id, initialPage, null));
+      dispatch(fetchCoursesOptionsData(institution.id));
     }
 
     return () => {
@@ -79,7 +70,9 @@ const CoursesDetailPage = () => {
   }, [dispatch, institution.id, courseIdDecoded]);
 
   useEffect(() => {
-    dispatch(fetchClassesData(institution.id, currentPage, courseIdDecoded));
+    if (institution.id) {
+      dispatch(fetchClassesData(institution.id, currentPage, courseIdDecoded));
+    }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -105,14 +98,14 @@ const CoursesDetailPage = () => {
           <LinkWithQuery to="/courses" className="mr-3 link">
             <i className="fa-solid fa-arrow-left" />
           </LinkWithQuery>
-          <h3 className="h2 mb-0 course-title">{nextCourseInfo.masterCourseName}</h3>
+          <h3 className="h2 mb-0 course-title">{courseInfo.masterCourseName}</h3>
         </div>
 
         <div className="card-container d-flex justify-content-around align-items-center">
           <div className="d-flex flex-column align-items-center">
             <p className="title">Students enrolled</p>
             <span className="value">
-              {nextCourseInfo.numberOfStudents}
+              {courseInfo.numberOfStudents}
               {' / '}
               {totalStudents}
             </span>
@@ -141,7 +134,7 @@ const CoursesDetailPage = () => {
         <AddClass
           isOpen={isOpenModal}
           onClose={closeModal}
-          courseInfo={nextCourseInfo}
+          courseInfo={courseInfo}
           finalCall={finalCall}
         />
       </div>