@@ -142,9 +118,7 @@ const InstructorsFilters = ({ fetchData, resetPagination, setFilters }) => {
};
InstructorsFilters.propTypes = {
- fetchData: PropTypes.func.isRequired,
resetPagination: PropTypes.func.isRequired,
- setFilters: PropTypes.func.isRequired,
};
export default InstructorsFilters;
diff --git a/src/features/Instructors/InstructorsFilters/reducer.jsx b/src/features/Instructors/InstructorsFilters/reducer.jsx
deleted file mode 100644
index 4b4d03ff..00000000
--- a/src/features/Instructors/InstructorsFilters/reducer.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import {
- FETCH_COURSES_DATA_FAILURE,
- FETCH_COURSES_DATA_REQUEST,
- FETCH_COURSES_DATA_SUCCESS,
-} from 'features/Instructors/actionTypes';
-import { RequestStatus } from 'features/constants';
-
-const reducer = (state, action) => {
- switch (action.type) {
- case FETCH_COURSES_DATA_REQUEST:
- return {
- ...state,
- courses: {
- ...state.courses,
- status: RequestStatus.LOADING,
- },
- };
- case FETCH_COURSES_DATA_SUCCESS:
- return {
- ...state,
- courses: {
- ...state.courses,
- status: RequestStatus.SUCCESS,
- data: action.payload,
- },
- };
- case FETCH_COURSES_DATA_FAILURE:
- return {
- ...state,
- courses: {
- ...state.courses,
- status: RequestStatus.ERROR,
- error: action.payload,
- },
- };
- default:
- return state;
- }
-};
-
-export default reducer;
diff --git a/src/features/Instructors/InstructorsPage/_test_/index.test.jsx b/src/features/Instructors/InstructorsPage/_test_/index.test.jsx
index b218ea59..8b8de30a 100644
--- a/src/features/Instructors/InstructorsPage/_test_/index.test.jsx
+++ b/src/features/Instructors/InstructorsPage/_test_/index.test.jsx
@@ -6,6 +6,10 @@ import {
} from '@testing-library/react';
import InstructorsPage from 'features/Instructors/InstructorsPage';
import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import { initializeStore } from 'store';
+
+let store;
jest.mock('axios');
@@ -38,10 +42,18 @@ const mockResponse = {
};
describe('InstructorPage', () => {
+ beforeEach(() => {
+ store = initializeStore();
+ });
+
test('render instructor page', () => {
axios.get.mockResolvedValue(mockResponse);
- const component = render(
);
+ const component = render(
+
+
+ ,
+ );
waitFor(() => {
expect(component.container).toHaveTextContent('Instructor1');
diff --git a/src/features/Instructors/InstructorsPage/_test_/reducer.test.jsx b/src/features/Instructors/InstructorsPage/_test_/reducer.test.jsx
deleted file mode 100644
index 433ed7d5..00000000
--- a/src/features/Instructors/InstructorsPage/_test_/reducer.test.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {
- FETCH_INSTRUCTOR_DATA_REQUEST,
- FETCH_INSTRUCTOR_DATA_SUCCESS,
- FETCH_INSTRUCTOR_DATA_FAILURE,
- UPDATE_CURRENT_PAGE,
-} from 'features/Instructors/actionTypes';
-import { RequestStatus } from 'features/constants';
-import reducer from 'features/Instructors/InstructorsPage/reducer';
-
-describe('Instructor page reducers', () => {
- const initialState = {
- data: [],
- error: null,
- currentPage: 1,
- numPages: 0,
- };
-
- test('should handle FETCH_INSTRUCTOR_DATA_REQUEST', () => {
- const state = {
- ...initialState,
- status: RequestStatus.LOADING,
- };
- const action = {
- type: FETCH_INSTRUCTOR_DATA_REQUEST,
- };
- expect(reducer(state, action)).toEqual(state);
- });
-
- test('should handle FFETCH_INSTRUCTOR_DATA_SUCCESS', () => {
- const state = {
- ...initialState,
- status: RequestStatus.SUCCESS,
- count: 0,
- };
- const action = {
- type: FETCH_INSTRUCTOR_DATA_SUCCESS,
- payload: {
- results: [],
- count: 0,
- numPages: 0,
- },
- };
- expect(reducer(state, action)).toEqual(state);
- });
-
- test('should handle FETCH_INSTRUCTOR_DATA_FAILURE', () => {
- const state = {
- ...initialState,
- status: RequestStatus.ERROR,
- error: '',
- };
- const action = {
- type: FETCH_INSTRUCTOR_DATA_FAILURE,
- payload: '',
- };
- expect(reducer(state, action)).toEqual(state);
- });
-
- test('should handle UPDATE_CURRENT_PAGE', () => {
- const state = {
- ...initialState,
- currentPage: 1,
- };
- const action = {
- type: UPDATE_CURRENT_PAGE,
- payload: 1,
- };
- expect(reducer(state, action)).toEqual(state);
- });
-});
diff --git a/src/features/Instructors/InstructorsPage/index.jsx b/src/features/Instructors/InstructorsPage/index.jsx
index ae7084dc..074ee418 100644
--- a/src/features/Instructors/InstructorsPage/index.jsx
+++ b/src/features/Instructors/InstructorsPage/index.jsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useState, useReducer } from 'react';
-import { camelCaseObject } from '@edx/frontend-platform';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
-import { logError } from '@edx/frontend-platform/logging';
import Container from '@edx/paragon/dist/Container';
import {
Pagination,
@@ -10,48 +9,23 @@ import InstructorsTable from 'features/Instructors/InstructorsTable';
import InstructorsFilters from 'features/Instructors/InstructorsFilters';
import AddInstructors from 'features/Instructors/AddInstructors';
-import { getInstructorData } from 'features/Instructors/data/api';
import {
- FETCH_INSTRUCTOR_DATA_REQUEST,
- FETCH_INSTRUCTOR_DATA_SUCCESS,
- FETCH_INSTRUCTOR_DATA_FAILURE,
- UPDATE_CURRENT_PAGE,
-} from 'features/Instructors/actionTypes';
-import { RequestStatus } from 'features/constants';
-import reducer from 'features/Instructors/InstructorsPage/reducer';
-
-const initialState = {
- data: [],
- status: RequestStatus.SUCCESS,
- error: null,
- currentPage: 1,
- numPages: 0,
-};
+ updateCurrentPage,
+} from 'features/Instructors/data/slice';
+import { fetchInstructorsData } from 'features/Instructors/data/thunks';
const InstructorsPage = () => {
- const [state, dispatch] = useReducer(reducer, initialState);
+ const stateInstructors = useSelector((state) => state.instructors.table);
+ const dispatch = useDispatch();
const [currentPage, setCurrentPage] = useState(1);
- const [filters, setFilters] = useState({});
-
- const fetchData = async (filtersData) => {
- dispatch({ type: FETCH_INSTRUCTOR_DATA_REQUEST });
-
- try {
- const response = camelCaseObject(await getInstructorData(currentPage, filtersData));
- dispatch({ type: FETCH_INSTRUCTOR_DATA_SUCCESS, payload: response.data });
- } catch (error) {
- dispatch({ type: FETCH_INSTRUCTOR_DATA_FAILURE, payload: error });
- logError(error);
- }
- };
useEffect(() => {
- fetchData(filters); // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [currentPage, filters]);
+ dispatch(fetchInstructorsData(currentPage, stateInstructors.filters));
+ }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
const handlePagination = (targetPage) => {
setCurrentPage(targetPage);
- dispatch({ type: UPDATE_CURRENT_PAGE, payload: targetPage });
+ dispatch(updateCurrentPage(targetPage));
};
const resetPagination = () => {
@@ -65,15 +39,15 @@ const InstructorsPage = () => {