feat: change manage store to redux

.env.development

@@ -19,3 +19,4 @@ APP_ID=''
 ACCOUNT_PROFILE_URL='http://localhost:1995/u'
 MFE_CONFIG_API_URL='http://localhost:18000/api/mfe_config/v1'
 INSTITUTION_PORTAL_PATH=''
+COURSE_OPERATIONS_API_V2_BASE_URL='http://localhost:18000/pearson_course_operation/api/v2'

package.json

@@ -40,15 +40,18 @@
     "@edx/paragon": "^20.45.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "^1.9.5",
     "core-js": "3.31.0",
     "moment": "^2.29.4",
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-intl": "^5.25.1",
     "react-paragon-topaz": "^1.2.1",
+    "react-redux": "^7.2.9",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
+    "redux": "^4.2.1",
     "regenerator-runtime": "0.13.11"
   },
   "devDependencies": {
@@ -58,6 +61,7 @@
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
     "axios": "0.27.2",
+    "axios-mock-adapter": "^1.20.0",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest": "29.5.0"

src/features/Courses/CoursesPage/_test_/index.test.jsx

@@ -6,6 +6,10 @@ 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');
 
@@ -38,10 +42,18 @@ const mockResponse = {
 };
 
 describe('CoursesPage', () => {
+  beforeEach(() => {
+    store = initializeStore();
+  });
+
   it('renders courses data and pagination', async () => {
     axios.get.mockResolvedValue(mockResponse);
 
-    const component = render(<CoursesPage />);
+    const component = render(
+      <Provider store={store}>
+        <CoursesPage />
+      </Provider>,
+    );
 
     waitFor(() => {
       expect(component.container).toHaveTextContent('Demo Course 1');

src/features/Courses/CoursesPage/index.jsx

@@ -1,6 +1,7 @@
 import React, {
-  useEffect, useState, useReducer, useContext,
+  useEffect, useState, useReducer,
 } from 'react';
+import { useSelector } from 'react-redux';
 import { camelCaseObject } from '@edx/frontend-platform';
 
 import { logError } from '@edx/frontend-platform/logging';
@@ -9,7 +10,6 @@ import { Pagination } from '@edx/paragon';
 import CoursesTable from 'features/Courses/CoursesTable';
 import CoursesFilters from 'features/Courses/CoursesFilters';
 import reducer from 'features/Courses/CoursesPage/reducer';
-import { InstitutionContext } from 'features/Main/institutionContext';
 
 import { getCoursesByInstitution } from 'features/Common/data/api';
 import {
@@ -29,7 +29,7 @@ const initialState = {
 };
 
 const CoursesPage = () => {
-  const stateInstitution = useContext(InstitutionContext);
+  const stateInstitution = useSelector((state) => state.main.institution.data);
   const [state, dispatch] = useReducer(reducer, initialState);
   const [currentPage, setCurrentPage] = useState(1);
   const [filters, setFilters] = useState({});

src/features/Dashboard/DashboardPage/_test_/index.test.jsx

@@ -1,22 +1,27 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import DashboardPage from 'features/Dashboard/DashboardPage';
-import { InstitutionContext } from 'features/Main/institutionContext';
 import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import { initializeStore } from 'store';
+
+let store;
 
 describe('DashboardPage component', () => {
+  beforeEach(() => {
+    store = initializeStore();
+  });
   test('renders components', () => {
     const { getByText } = render(
-      <InstitutionContext.Provider value={[{ id: 1, name: 'Institution Name' }]}>
+      <Provider store={store}>
         <DashboardPage />
-      </InstitutionContext.Provider>,
+      </Provider>,
     );
 
     expect(getByText('This week')).toBeInTheDocument();
     expect(getByText('Next week')).toBeInTheDocument();
     expect(getByText('Next month')).toBeInTheDocument();
     expect(getByText('New students registered')).toBeInTheDocument();
     expect(getByText('Classes scheduled')).toBeInTheDocument();
-    expect(getByText('Welcome to Institution Name')).toBeInTheDocument();
   });
 });

src/features/Dashboard/DashboardPage/index.jsx

@@ -1,15 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { Container } from '@edx/paragon';
 import StudentsMetrics from 'features/Students/StudentsMetrics';
-import { InstitutionContext } from 'features/Main/institutionContext';
 
 const DashboardPage = () => {
-  const dataInstitution = useContext(InstitutionContext);
+  const stateInstitution = useSelector((state) => state.main.institution.data);
 
   return (
     <Container size="xl" className="px-4">
       <h2 className="title-page">
-        {dataInstitution.length === 1 ? `Welcome to ${dataInstitution[0].name}` : 'Select an institution'}
+        {stateInstitution.length === 1 ? `Welcome to ${stateInstitution[0].name}` : 'Select an institution'}
       </h2>
       <StudentsMetrics />
     </Container>

src/features/Instructors/AddInstructors/_test_/index.test.jsx

@@ -3,6 +3,10 @@ import axios from 'axios';
 import { render, fireEvent, act } from '@testing-library/react';
 import AddInstructors from 'features/Instructors/AddInstructors';
 import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import { initializeStore } from 'store';
+
+let store;
 
 jest.mock('axios');
 
@@ -26,11 +30,17 @@ const mockResponse = {
 };
 
 describe('Add instructor component', () => {
+  beforeEach(() => {
+    store = initializeStore();
+  });
+
   test('Render and load modal', async () => {
     axios.get.mockResolvedValue(mockResponse);
 
     const { getByText } = render(
-      <AddInstructors />,
+      <Provider store={store}>
+        <AddInstructors />
+      </Provider>,
     );
     const button = getByText('Add Instructor');
     await act(async () => {

src/features/Instructors/AddInstructors/index.jsx

@@ -1,40 +1,22 @@
-import React, { useState, useReducer, useEffect } from 'react';
+// This component will be modified according to the new wirefrime
+
+import React, { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   FormGroup, ModalDialog, useToggle, Form,
 } from '@edx/paragon';
 import { Button } from 'react-paragon-topaz';
-import { getCCXList, handleInstructorsEnrollment } from 'features/Instructors/data/api';
-import reducer from 'features/Instructors/AddInstructors/reducer';
+import { handleInstructorsEnrollment } from 'features/Instructors/data/api';
 import { logError } from '@edx/frontend-platform/logging';
-import { camelCaseObject } from '@edx/frontend-platform';
-
-import { FETCH_CCX_LIST_FAILURE, FETCH_CCX_LIST_REQUEST, FETCH_CCX_LIST_SUCCESS } from 'features/Instructors/actionTypes';
-import { RequestStatus } from 'features/constants';
-
-const initialState = {
-  data: [],
-  status: RequestStatus.SUCCESS,
-  error: null,
-};
+import { fetchClassesData } from 'features/Instructors/data/thunks';
 
 const AddInstructors = () => {
-  const [state, dispatch] = useReducer(reducer, initialState);
+  const stateInstructors = useSelector((state) => state.instructors.classes);
+  const dispatch = useDispatch();
   const [isOpen, open, close] = useToggle(false); // eslint-disable-line no-unused-vars
   const [isNoUser, setIsNoUser] = useState(false);
   const enrollmentData = new FormData();
 
-  const fetchData = async () => {
-    dispatch({ type: FETCH_CCX_LIST_REQUEST });
-
-    try {
-      const response = camelCaseObject(await getCCXList());
-      dispatch({ type: FETCH_CCX_LIST_SUCCESS, payload: response.data });
-    } catch (error) {
-      dispatch({ type: FETCH_CCX_LIST_FAILURE, payload: error });
-      logError(error);
-    }
-  };
-
   const handleAddInstructors = async (e) => {
     e.preventDefault();
     const form = e.target;
@@ -48,7 +30,6 @@ const AddInstructors = () => {
       if (response.data?.userDoesNotExist) {
         setIsNoUser(true);
       } else {
-        fetchData();
         close();
         setIsNoUser(false);
       }
@@ -58,8 +39,8 @@ const AddInstructors = () => {
   };
 
   useEffect(() => {
-    fetchData();
-  }, []);
+    dispatch(fetchClassesData());
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <>
@@ -87,7 +68,7 @@ const AddInstructors = () => {
                 name="ccxId"
               >
                 <option disabled value="null">Select an Option</option>
-                {state.data.map((ccx) => <option value={ccx.classId}>{ccx.className}</option>)}
+                {stateInstructors.data.map((ccx) => <option value={ccx.classId}>{ccx.className}</option>)}
               </Form.Control>
             </FormGroup>
             <FormGroup controlId="instructorInfo">

src/features/Instructors/InstructorsFilters/_test_/index.test.jsx

@@ -2,6 +2,10 @@ import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import InstructorsFilters from 'features/Instructors/InstructorsFilters';
 import '@testing-library/jest-dom/extend-expect';
+import { Provider } from 'react-redux';
+import { initializeStore } from 'store';
+
+let store;
 
 jest.mock('@edx/frontend-platform/logging', () => ({
   logError: jest.fn(),
@@ -11,14 +15,18 @@ describe('InstructorsFilters Component', () => {
   const mockSetFilters = jest.fn();
 
   beforeEach(() => {
+    store = initializeStore();
     mockSetFilters.mockClear();
   });
 
   test('call service when apply filters', async () => {
-    const fetchData = jest.fn();
     const resetPagination = jest.fn();
     const { getByPlaceholderText, getByText } = render(
-      <InstructorsFilters fetchData={fetchData} resetPagination={resetPagination} setFilters={mockSetFilters} />,
+      <Provider store={store}>
+        <InstructorsFilters
+          resetPagination={resetPagination}
+        />
+      </Provider>,
     );
 
     const nameInput = getByPlaceholderText('Enter Instructor Name');
@@ -37,15 +45,16 @@ describe('InstructorsFilters Component', () => {
     await act(async () => {
       fireEvent.click(buttonApplyFilters);
     });
-
-    expect(fetchData).toHaveBeenCalledTimes(1);
   });
 
   test('clear filters', async () => {
-    const fetchData = jest.fn();
     const resetPagination = jest.fn();
     const { getByPlaceholderText, getByText } = render(
-      <InstructorsFilters fetchData={fetchData} resetPagination={resetPagination} setFilters={mockSetFilters} />,
+      <Provider store={store}>
+        <InstructorsFilters
+          resetPagination={resetPagination}
+        />
+      </Provider>,
     );
 
     const nameInput = getByPlaceholderText('Enter Instructor Name');
@@ -67,6 +76,5 @@ describe('InstructorsFilters Component', () => {
 
     expect(nameInput).toHaveValue('');
     expect(emailInput).toHaveValue('');
-    expect(resetPagination).toHaveBeenCalledTimes(1);
   });
 });