diff --git a/src/features/Classes/ClassesPage/index.jsx b/src/features/Classes/ClassesPage/index.jsx index e8e4d7c9..4cef7296 100644 --- a/src/features/Classes/ClassesPage/index.jsx +++ b/src/features/Classes/ClassesPage/index.jsx @@ -6,7 +6,7 @@ import { useLocation } from 'react-router-dom'; import ClassesTable from 'features/Classes/ClassesTable'; import ClassesFilters from 'features/Classes/ClassesFilters'; -import { updateCurrentPage, resetClassesTable } from 'features/Classes/data/slice'; +import { updateCurrentPage, updateFilters, resetClassesTable } from 'features/Classes/data/slice'; import { fetchClassesData } from 'features/Classes/data/thunks'; import { initialPage } from 'features/constants'; @@ -35,6 +35,7 @@ const ClassesPage = () => { return () => { dispatch(resetClassesTable()); + dispatch(updateFilters({})); }; }, [selectedInstitution, dispatch, currentPage]); // eslint-disable-line react-hooks/exhaustive-deps diff --git a/src/features/Common/data/_test_/api.test.js b/src/features/Common/data/_test_/api.test.js index 03473732..32842699 100644 --- a/src/features/Common/data/_test_/api.test.js +++ b/src/features/Common/data/_test_/api.test.js @@ -62,7 +62,12 @@ describe('Common api services', () => { expect(httpClientMock.get).toHaveBeenCalledTimes(1); expect(httpClientMock.get).toHaveBeenCalledWith( - `${COURSE_OPERATIONS_API_V2}/license-pool/?limit=true&institution_id=1&page=1&`, + `${COURSE_OPERATIONS_API_V2}/license-pool/?limit=true&institution_id=1`, + { + params: { + page: 1, + }, + }, ); }); diff --git a/src/features/Common/data/api.js b/src/features/Common/data/api.js index dcfabd09..2dcfc95c 100644 --- a/src/features/Common/data/api.js +++ b/src/features/Common/data/api.js @@ -13,9 +13,14 @@ function getCoursesByInstitution(institutionId, limit, page, filters) { } function getLicensesByInstitution(institutionId, limit, page = 1, urlParamsFilters = '') { + const params = { + page, + ...urlParamsFilters, + }; return getAuthenticatedHttpClient().get( `${getConfig().COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool` - + `/?limit=${limit}&institution_id=${institutionId}&page=${page}&${urlParamsFilters}`, + + `/?limit=${limit}&institution_id=${institutionId}`, + { params }, ); } diff --git a/src/features/Courses/CoursesPage/index.jsx b/src/features/Courses/CoursesPage/index.jsx index 615f53a9..0d8dfb6c 100644 --- a/src/features/Courses/CoursesPage/index.jsx +++ b/src/features/Courses/CoursesPage/index.jsx @@ -6,7 +6,7 @@ import { Pagination } from '@edx/paragon'; import CoursesTable from 'features/Courses/CoursesTable'; import CoursesFilters from 'features/Courses/CoursesFilters'; -import { updateCurrentPage, resetCoursesTable } from 'features/Courses/data/slice'; +import { updateCurrentPage, updateFilters, resetCoursesTable } from 'features/Courses/data/slice'; import { fetchCoursesData } from 'features/Courses/data/thunks'; import { initialPage } from 'features/constants'; @@ -18,19 +18,14 @@ const CoursesPage = () => { useEffect(() => { if (Object.keys(selectedInstitution).length > 0) { - dispatch(fetchCoursesData(selectedInstitution.id, initialPage)); + dispatch(fetchCoursesData(selectedInstitution.id, currentPage)); } return () => { dispatch(resetCoursesTable()); + dispatch(updateFilters({})); }; - }, [selectedInstitution, dispatch]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - if (Object.keys(selectedInstitution).length > 0) { - dispatch(fetchCoursesData(selectedInstitution.id, currentPage, stateCourses.filters)); - } - }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps + }, [selectedInstitution, dispatch, currentPage]); const handlePagination = (targetPage) => { setCurrentPage(targetPage); diff --git a/src/features/Dashboard/data/_test_/redux.test.jsx b/src/features/Dashboard/data/_test_/redux.test.jsx index 237d7b9c..9b2bb7c2 100644 --- a/src/features/Dashboard/data/_test_/redux.test.jsx +++ b/src/features/Dashboard/data/_test_/redux.test.jsx @@ -29,7 +29,7 @@ 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&page=1&'; + + '/?limit=false&institution_id=1'; const mockResponse = [ { licenseName: 'License Name 1', diff --git a/src/features/Instructors/InstructorsPage/index.jsx b/src/features/Instructors/InstructorsPage/index.jsx index 8e4269c4..cd4d4811 100644 --- a/src/features/Instructors/InstructorsPage/index.jsx +++ b/src/features/Instructors/InstructorsPage/index.jsx @@ -8,7 +8,7 @@ import InstructorsFilters from 'features/Instructors/InstructorsFilters'; import AddInstructors from 'features/Instructors/AddInstructors'; import { Button } from 'react-paragon-topaz'; -import { updateCurrentPage, resetInstructorsRequest } from 'features/Instructors/data/slice'; +import { updateCurrentPage, updateFilters, resetInstructorsRequest } from 'features/Instructors/data/slice'; import { fetchInstructorsData } from 'features/Instructors/data/thunks'; import { initialPage } from 'features/constants'; @@ -21,17 +21,14 @@ const InstructorsPage = () => { useEffect(() => { if (Object.keys(selectedInstitution).length > 0) { - dispatch(fetchInstructorsData(selectedInstitution.id, initialPage)); + dispatch(fetchInstructorsData(selectedInstitution.id, currentPage)); } return () => { dispatch(resetInstructorsRequest()); + dispatch(updateFilters({})); }; - }, [selectedInstitution, dispatch]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - dispatch(fetchInstructorsData(selectedInstitution.id, currentPage, stateInstructors.filters)); - }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps + }, [selectedInstitution, dispatch, currentPage]); const handlePagination = (targetPage) => { setCurrentPage(targetPage); diff --git a/src/features/Licenses/LicensesFilters/index.jsx b/src/features/Licenses/LicensesFilters/index.jsx index d139364a..e29e6743 100644 --- a/src/features/Licenses/LicensesFilters/index.jsx +++ b/src/features/Licenses/LicensesFilters/index.jsx @@ -34,14 +34,11 @@ const LicensesFilters = ({ resetPagination }) => { const form = e.target; const formData = new FormData(form); const formJson = Object.fromEntries(formData.entries()); - const urlParamsFilters = Object.entries(formJson) - .map(([key, value]) => `${key}=${encodeURIComponent(value)}`) - .join('&'); try { dispatch(updateFilters(formJson)); dispatch(updateCurrentPage(initialPage)); - dispatch(fetchLicensesData(institution.id, initialPage, urlParamsFilters)); + dispatch(fetchLicensesData(institution.id, initialPage, formJson)); } catch (error) { logError(error); } diff --git a/src/features/Licenses/LicensesPage/index.jsx b/src/features/Licenses/LicensesPage/index.jsx index a052bdc2..b4dab180 100644 --- a/src/features/Licenses/LicensesPage/index.jsx +++ b/src/features/Licenses/LicensesPage/index.jsx @@ -4,7 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { Pagination, Container } from '@edx/paragon'; import { initialPage } from 'features/constants'; -import { updateCurrentPage, resetLicensesTable } from 'features/Licenses/data/slice'; +import { updateCurrentPage, updateFilters, resetLicensesTable } from 'features/Licenses/data/slice'; import { fetchLicensesData } from 'features/Licenses/data'; import LicensesTable from 'features/Licenses/LicensesTable'; import LicensesFilters from 'features/Licenses/LicensesFilters'; @@ -25,17 +25,14 @@ const LicensesPage = () => { useEffect(() => { if (Object.keys(selectedInstitution).length > 0) { - dispatch(fetchLicensesData(selectedInstitution?.id, initialPage)); + dispatch(fetchLicensesData(selectedInstitution.id, currentPage)); } return () => { dispatch(resetLicensesTable()); + dispatch(updateFilters({})); }; - }, [selectedInstitution, dispatch]); - - useEffect(() => { - dispatch(fetchLicensesData(selectedInstitution?.id, currentPage, stateLicenses.filters)); - }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps + }, [selectedInstitution, dispatch, currentPage]); return ( diff --git a/src/features/Licenses/data/_test_/redux.test.jsx b/src/features/Licenses/data/_test_/redux.test.jsx index 82793957..31afb25e 100644 --- a/src/features/Licenses/data/_test_/redux.test.jsx +++ b/src/features/Licenses/data/_test_/redux.test.jsx @@ -30,7 +30,7 @@ describe('Licenses redux tests', () => { test('successful fetch licenses data', async () => { const licensesApiUrl = `${process.env.COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool` - + '/?limit=true&institution_id=1&page=1&'; + + '/?limit=true&institution_id=1'; const mockResponse = { results: [ { @@ -67,7 +67,7 @@ describe('Licenses redux tests', () => { test('failed fetch licenses data', async () => { const licensesApiUrl = `${process.env.COURSE_OPERATIONS_API_V2_BASE_URL}/license-pool` - + '/?limit=false&institution_id=1&page=1&'; + + '/?limit=false&institution_id=1'; axiosMock.onGet(licensesApiUrl) .reply(500); diff --git a/src/features/Students/StudentsPage/index.jsx b/src/features/Students/StudentsPage/index.jsx index bd794866..2205116a 100644 --- a/src/features/Students/StudentsPage/index.jsx +++ b/src/features/Students/StudentsPage/index.jsx @@ -5,7 +5,7 @@ import StudentsFilters from 'features/Students/StudentsFilters'; import StudentsMetrics from 'features/Students/StudentsMetrics'; import Container from '@edx/paragon/dist/Container'; import { Pagination } from '@edx/paragon'; -import { updateCurrentPage, resetStudentsTable } from 'features/Students/data/slice'; +import { updateCurrentPage, updateFilters, resetStudentsTable } from 'features/Students/data/slice'; import { fetchStudentsData } from 'features/Students/data/thunks'; import { initialPage } from 'features/constants'; @@ -17,17 +17,14 @@ const StudentsPage = () => { useEffect(() => { if (Object.keys(selectedInstitution).length > 0) { - dispatch(fetchStudentsData(selectedInstitution.id, initialPage)); + dispatch(fetchStudentsData(selectedInstitution.id, currentPage)); } return () => { dispatch(resetStudentsTable()); + dispatch(updateFilters({})); }; - }, [selectedInstitution, dispatch]); // eslint-disable-line react-hooks/exhaustive-deps - - useEffect(() => { - dispatch(fetchStudentsData(selectedInstitution.id, currentPage, stateStudents.filters)); - }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps + }, [selectedInstitution, dispatch, currentPage]); const resetPagination = () => { setCurrentPage(initialPage);