Merge pull request #32 from Pearson-Advance/vue/PADV-731

PADV-731 add institution selector
Pearson-Advance · Jan 30, 2024 · 8540b79 · 8540b79
2 parents 31c924a + 827ace3
commit 8540b79
Show file tree

Hide file tree

Showing 29 changed files with 283 additions and 264 deletions.
diff --git a/src/features/Common/data/_test_/api.test.js b/src/features/Common/data/_test_/api.test.js
@@ -56,7 +56,7 @@ describe('Common api services', () => {
 
     expect(httpClientMock.get).toHaveBeenCalledTimes(1);
     expect(httpClientMock.get).toHaveBeenCalledWith(
-      `${COURSE_OPERATIONS_API_V2}/license-pool/?limit=true&institution_id=1`,
+      `${COURSE_OPERATIONS_API_V2}/license-pool/?limit=true&institution_id=1&page=`,
     );
   });
 

diff --git a/src/features/Common/data/api.js b/src/features/Common/data/api.js
@@ -12,9 +12,10 @@ function getCoursesByInstitution(institutionId, limit, page, filters) {
   );
 }
 
-function getLicensesByInstitution(institutionId, limit) {
+function getLicensesByInstitution(institutionId, limit, page = '') {
   return getAuthenticatedHttpClient().get(
-    `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool/?limit=${limit}&institution_id=${institutionId}`,
+    `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool`
+    + `/?limit=${limit}&institution_id=${institutionId}&page=${page}`,
   );
 }
 

diff --git a/src/features/Courses/CoursesFilters/index.jsx b/src/features/Courses/CoursesFilters/index.jsx
@@ -12,14 +12,10 @@ import { initialPage } from 'features/constants';
 
 const CoursesFilters = ({ resetPagination }) => {
   const dispatch = useDispatch();
-  const stateInstitution = useSelector((state) => state.main.institution.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
   const stateCourses = useSelector((state) => state.courses.table.data);
   const [courseOptions, setCourseOptions] = useState([]);
   const [courseSelected, setCourseSelected] = useState(null);
-  let id = '';
-  if (stateInstitution.length === 1) {
-    id = stateInstitution[0].id;
-  }
 
   const handleCoursesFilter = async (e) => {
     e.preventDefault();
@@ -29,14 +25,14 @@ const CoursesFilters = ({ resetPagination }) => {
     dispatch(updateFilters(formJson));
     try {
       dispatch(updateCurrentPage(initialPage));
-      dispatch(fetchCoursesData(id, initialPage, formJson));
+      dispatch(fetchCoursesData(selectedInstitution.id, initialPage, formJson));
     } catch (error) {
       logError(error);
     }
   };
 
   const handleCleanFilters = () => {
-    dispatch(fetchCoursesData(id));
+    dispatch(fetchCoursesData(selectedInstitution.id));
     resetPagination();
     setCourseSelected(null);
     dispatch(updateFilters({}));

diff --git a/src/features/Courses/CoursesPage/_test_/index.test.jsx b/src/features/Courses/CoursesPage/_test_/index.test.jsx
@@ -1,58 +1,44 @@
 import React from 'react';
-import axios from 'axios';
 import CoursesPage from 'features/Courses/CoursesPage';
-import {
-  render,
-  waitFor,
-} from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-import { Provider } from 'react-redux';
-import { initializeStore } from 'store';
-
-let store;
-
-jest.mock('axios');
+import { renderWithProviders } from 'test-utils';
 
 jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
 }));
 
-const mockResponse = {
-  data: {
-    results: [
-      {
-        masterCourseName: 'Demo Course 1',
-        numberOfClasses: 1,
-        missingClassesForInstructor: null,
-        numberOfStudents: 1,
-        numberOfPendingStudents: 1,
-      },
-      {
-        masterCourseName: 'Demo Course 2',
-        numberOfClasses: 1,
-        missingClassesForInstructor: 1,
-        numberOfStudents: 16,
-        numberOfPendingStudents: 0,
-      },
-    ],
-    count: 2,
-    num_pages: 1,
-    current_page: 1,
+const mockStore = {
+  courses: {
+    table: {
+      data: [
+        {
+          masterCourseName: 'Demo Course 1',
+          numberOfClasses: 1,
+          missingClassesForInstructor: null,
+          numberOfStudents: 1,
+          numberOfPendingStudents: 1,
+        },
+        {
+          masterCourseName: 'Demo Course 2',
+          numberOfClasses: 1,
+          missingClassesForInstructor: 1,
+          numberOfStudents: 16,
+          numberOfPendingStudents: 0,
+        },
+      ],
+      count: 2,
+      num_pages: 1,
+      current_page: 1,
+    },
   },
 };
 
 describe('CoursesPage', () => {
-  beforeEach(() => {
-    store = initializeStore();
-  });
-
   it('renders courses data and pagination', async () => {
-    axios.get.mockResolvedValue(mockResponse);
-
-    const component = render(
-      <Provider store={store}>
-        <CoursesPage />
-      </Provider>,
+    const component = renderWithProviders(
+      <CoursesPage />,
+      { preloadedState: mockStore },
     );
 
     waitFor(() => {

diff --git a/src/features/Courses/CoursesPage/index.jsx b/src/features/Courses/CoursesPage/index.jsx
@@ -11,19 +11,16 @@ import { fetchCoursesData } from 'features/Courses/data/thunks';
 import { initialPage } from 'features/constants';
 
 const CoursesPage = () => {
-  const stateInstitution = useSelector((state) => state.main.institution.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
   const stateCourses = useSelector((state) => state.courses);
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(initialPage);
-  // check this after implementation of selector institution
-  let id = '';
-  if (stateInstitution.length === 1) {
-    id = stateInstitution[0].id;
-  }
 
   useEffect(() => {
-    dispatch(fetchCoursesData(id, currentPage, stateCourses.filters));
-  }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (Object.keys(selectedInstitution).length > 0) {
+      dispatch(fetchCoursesData(selectedInstitution.id, currentPage, stateCourses.filters));
+    }
+  }, [currentPage, selectedInstitution, dispatch]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const handlePagination = (targetPage) => {
     setCurrentPage(targetPage);

diff --git a/src/features/Dashboard/DashboardPage/index.jsx b/src/features/Dashboard/DashboardPage/index.jsx
@@ -17,13 +17,10 @@ const DashboardPage = () => {
   const history = useHistory();
   const dispatch = useDispatch();
   const stateInstitution = useSelector((state) => state.main.institution.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
   const licenseData = useSelector((state) => state.dashboard.tableLicense.data);
   const [dataTableLicense, setDataTableLicense] = useState([]);
 
-  let idInstitution = '';
-  // eslint-disable-next-line no-unused-expressions
-  stateInstitution.length > 0 ? idInstitution = stateInstitution[0].id : idInstitution = '';
-
   const handleViewAllLicenses = () => {
     history.push('/licenses');
     dispatch(updateActiveTab('licenses'));
@@ -42,13 +39,15 @@ const DashboardPage = () => {
   }, [licenseData]);
 
   useEffect(() => {
-    dispatch(fetchLicensesData(idInstitution));
-  }, [idInstitution]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (Object.keys(selectedInstitution).length > 0) {
+      dispatch(fetchLicensesData(selectedInstitution?.id));
+    }
+  }, [selectedInstitution, dispatch]);
 
   return (
     <Container size="xl" className="px-4">
       <h2 className="title-page">
-        {stateInstitution.length === 1 ? `Welcome to ${stateInstitution[0].name}` : 'Select an institution'}
+        {Object.keys(selectedInstitution).length > 0 ? `Welcome to ${selectedInstitution?.name}` : `Welcome to ${stateInstitution[0]?.name}`}
       </h2>
       <StudentsMetrics />
       <Row>

diff --git a/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx b/src/features/Dashboard/InstructorAssignSection/ClassCard.jsx
@@ -23,11 +23,15 @@ const ClassCard = ({ data }) => {
 };
 
 ClassCard.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.shape([])),
+  data: PropTypes.shape({
+    className: PropTypes.string,
+    masterCourseName: PropTypes.string,
+    startDate: PropTypes.string,
+  }),
 };
 
 ClassCard.defaultProps = {
-  data: [],
+  data: {},
 };
 
 export default ClassCard;
diff --git a/src/features/Dashboard/InstructorAssignSection/index.jsx b/src/features/Dashboard/InstructorAssignSection/index.jsx
@@ -11,17 +11,16 @@ import 'features/Dashboard/InstructorAssignSection/index.scss';
 
 const InstructorAssignSection = () => {
   const dispatch = useDispatch();
-  const stateInstitution = useSelector((state) => state.main.institution.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
   const classesData = useSelector((state) => state.dashboard.classes.data);
   const [classCards, setClassCards] = useState([]);
-  let idInstitution = '';
   const numberOfClasses = 2;
-  // eslint-disable-next-line no-unused-expressions
-  stateInstitution.length > 0 ? idInstitution = stateInstitution[0].id : idInstitution = '';
 
   useEffect(() => {
-    dispatch(fetchClassesData(idInstitution));
-  }, [idInstitution]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (Object.keys(selectedInstitution).length > 0) {
+      dispatch(fetchClassesData(selectedInstitution?.id));
+    }
+  }, [selectedInstitution, dispatch]);
 
   useEffect(() => {
     // Display only the first 'NumberOfClasses' on the homepage.
@@ -36,7 +35,7 @@ const InstructorAssignSection = () => {
     <Row>
       <Col xs="12">
         <h4 className="title-instr-assign">Instructor assignment</h4>
-        {classCards.map(classInfo => <ClassCard data={classInfo} />)}
+        {classCards.map(classInfo => <ClassCard data={classInfo} key={classInfo?.classId} />)}
         {classesData.length > numberOfClasses && (
           <div className="d-flex justify-content-center">
             <Button text className="view-all-btn">View all</Button>

diff --git a/src/features/Dashboard/data/_test_/redux.test.jsx b/src/features/Dashboard/data/_test_/redux.test.jsx
@@ -28,8 +28,8 @@ describe('Dashboard redux tests', () => {
   });
 
   test('successful fetch licenses data', async () => {
-    const licensesApiUrl = `${process.env.COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool/`
-    + '?limit=false&institution_id=1';
+    const licensesApiUrl = `${process.env.COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool`
+    + '/?limit=false&institution_id=1&page=';
     const mockResponse = [
       {
         licenseName: 'License Name 1',

diff --git a/src/features/Instructors/InstructorsFilters/index.jsx b/src/features/Instructors/InstructorsFilters/index.jsx
@@ -14,22 +14,17 @@ import PropTypes from 'prop-types';
 import { initialPage } from 'features/constants';
 
 const InstructorsFilters = ({ resetPagination }) => {
-  const stateInstitution = useSelector((state) => state.main.institution.data);
+  const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
   const stateInstructors = useSelector((state) => state.instructors.courses);
   const currentPage = useSelector((state) => state.instructors.table.currentPage);
   const dispatch = useDispatch();
   const [courseOptions, setCourseOptions] = useState([]);
   const [instructorName, setInstructorName] = useState('');
   const [instructorEmail, setInstructorEmail] = useState('');
   const [courseSelected, setCourseSelected] = useState(null);
-  // check this after implementation of selector institution
-  let id = '';
-  if (stateInstitution.length === 1) {
-    id = stateInstitution[0].id;
-  }
 
   const handleCleanFilters = () => {
-    dispatch(fetchInstructorsData(currentPage));
+    dispatch(fetchInstructorsData(selectedInstitution?.id, currentPage));
     resetPagination();
     setInstructorName('');
     setInstructorEmail('');
@@ -45,15 +40,17 @@ const InstructorsFilters = ({ resetPagination }) => {
     dispatch(updateFilters(formJson));
     try {
       dispatch(updateCurrentPage(initialPage));
-      dispatch(fetchInstructorsData(initialPage, formJson));
+      dispatch(fetchInstructorsData(selectedInstitution?.id, initialPage, formJson));
     } catch (error) {
       logError(error);
     }
   };
 
   useEffect(() => {
-    dispatch(fetchCoursesData(id)); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
+    if (Object.keys(selectedInstitution).length > 0) {
+      dispatch(fetchCoursesData(selectedInstitution.id));
+    }
+  }, [selectedInstitution, dispatch]);
 
   useEffect(() => {
     if (stateInstructors.data.length > 0) {