feat: filters student page

package.json

@@ -45,7 +45,7 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-intl": "^5.25.1",
-    "react-paragon-topaz": "^1.0.2",
+    "react-paragon-topaz": "^1.1.4",
     "react-router": "5.2.1",
     "react-router-dom": "5.3.0",
     "regenerator-runtime": "0.13.11"

src/features/Main/Header/_test_/index.test.jsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import { AppContext } from '@edx/frontend-platform/react';
+import { InstitutionContext } from 'features/Main/institutionContext';
 import { Header } from 'features/Main/Header';
 import '@testing-library/jest-dom/extend-expect';
 
-jest.mock('@edx/frontend-platform/auth', () => ({
-  getAuthenticatedHttpClient: jest.fn(() => ({
-    get: jest.fn(() => Promise.resolve({ data: { results: [{ name: 'Institution Name' }] } })),
-  })),
-}));
-
 describe('Header', () => {
   const authenticatedUser = {
     username: 'User',
@@ -25,7 +20,9 @@ describe('Header', () => {
     await act(async () => {
       const renderResult = render(
         <AppContext.Provider value={{ authenticatedUser, config }}>
-          <Header />
+          <InstitutionContext.Provider value={{ results: [{ id: 1, name: 'Institution Name' }] }}>
+            <Header />
+          </InstitutionContext.Provider>
         </AppContext.Provider>,
       );
 

src/features/Main/Header/index.jsx

@@ -1,65 +1,27 @@
+import React, { useContext, useState } from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getConfig } from '@edx/frontend-platform';
-import React, {
-  useContext, useState, useEffect, useReducer,
-} from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { RequestStatus } from 'features/constants';
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
-import { getInstitutionName } from 'features/Main/Header/data/api';
-import './index.scss';
-
-const initialState = {
-  data: [],
-  status: RequestStatus.SUCCESS,
-  error: null,
-};
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'FETCH_REQUEST':
-      return { ...state, status: RequestStatus.LOADING };
-    case 'FETCH_SUCCESS':
-      return { ...state, status: RequestStatus.SUCCESS, data: action.payload };
-    case 'FETCH_FAILURE':
-      return { ...state, status: RequestStatus.ERROR, error: action.payload };
-    default:
-      return state;
-  }
-};
+import { InstitutionContext } from 'features/Main/institutionContext';
+import 'features/Main/Header/index.scss';
 
 export const Header = () => {
+  const dataInstitution = useContext(InstitutionContext);
   const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
   const handleAccountMenuToggle = () => {
     setIsAccountMenuOpen((prevState) => !prevState);
   };
   const { authenticatedUser, config } = useContext(AppContext);
   const usernameFirstLetter = authenticatedUser.username.charAt(0).toUpperCase();
 
-  const [state, dispatch] = useReducer(reducer, initialState);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      dispatch({ type: 'FETCH_REQUEST' });
-
-      try {
-        const response = await getInstitutionName();
-        dispatch({ type: 'FETCH_SUCCESS', payload: response.data });
-      } catch (error) {
-        dispatch({ type: 'FETCH_FAILURE', payload: error });
-      }
-    };
-
-    fetchData();
-  }, []);
-
   return (
     <header className="institution-header py-4 px-3">
       <div className="institution-name">
-        {state.data.length >= 1 ? (
+        {dataInstitution.length >= 1 ? (
           <h3>Global Admin</h3>
         ) : (
-          <h3>{state.data.results ? state.data.results[0].name : 'No Institution Found'}</h3>
+          <h3>{dataInstitution.results ? dataInstitution.results[0].name : 'No Institution Found'}</h3>
         )}
       </div>
       <div className="actions">

src/features/Main/actionTypes.js

@@ -0,0 +1,3 @@
+export const FETCH_INSTITUTION_DATA_REQUEST = 'FETCH_INSTITUTION_DATA_REQUEST';
+export const FETCH_INSTITUTION_DATA_SUCCESS = 'FETCH_INSTITUTION_DATA_SUCCESS';
+export const FETCH_INSTITUTION_DATA_FAILURE = 'FETCH_INSTITUTION_DATA_FAILURE';

src/features/Main/Header/data/_test_/api.test.js → src/features/Main/data/_test_/api.test.js

@@ -1,4 +1,4 @@
-import { getInstitutionName } from 'features/Main/Header/data/api';
+import { getInstitutionName } from 'features/Main/data/api';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 jest.mock('@edx/frontend-platform/auth', () => ({

src/features/Main/index.jsx

@@ -1,33 +1,68 @@
+import React, { useEffect, useReducer } from 'react';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
-import React from 'react';
 import { Sidebar } from 'features/Main/Sidebar';
 import { Header } from 'features/Main/Header';
 import { Footer } from 'features/Main/Footer';
 import StudentsPage from 'features/Students/StudentsPage';
 import Container from '@edx/paragon/dist/Container';
 import { getConfig } from '@edx/frontend-platform';
 import InstructorsPage from 'features/Instructors/InstructorsPage';
+import reducer from 'features/Main/reducer';
+import { getInstitutionName } from 'features/Main/data/api';
+import { InstitutionContext } from 'features/Main/institutionContext';
+import {
+  FETCH_INSTITUTION_DATA_REQUEST,
+  FETCH_INSTITUTION_DATA_SUCCESS,
+  FETCH_INSTITUTION_DATA_FAILURE,
+} from 'features/Main/actionTypes';
+import { RequestStatus } from 'features/constants';
 import './index.scss';
 
-const Main = () => (
-  <BrowserRouter basename={getConfig().INSTITUTION_PORTAL_PATH}>
-    <div className="pageWrapper">
-      <Sidebar />
-      <main>
-        <Container size="xl">
-          <Header />
-          <Switch>
-            <Route path="/students" exact component={StudentsPage} />
-          </Switch>
-          <Switch>
-            <Route path="/instructors" exact component={InstructorsPage} />
-          </Switch>
-          <Footer />
-        </Container>
+const initialState = {
+  data: [],
+  status: RequestStatus.SUCCESS,
+  error: null,
+};
 
-      </main>
-    </div>
-  </BrowserRouter>
-);
+const Main = () => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: FETCH_INSTITUTION_DATA_REQUEST });
+
+      try {
+        const response = await getInstitutionName();
+        dispatch({ type: FETCH_INSTITUTION_DATA_SUCCESS, payload: response.data });
+      } catch (error) {
+        dispatch({ type: FETCH_INSTITUTION_DATA_FAILURE, payload: error });
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <BrowserRouter basename={getConfig().INSTITUTION_PORTAL_PATH}>
+      <InstitutionContext.Provider value={state.data}>
+        <div className="pageWrapper">
+          <Sidebar />
+          <main>
+            <Container size="xl">
+              <Header />
+              <Switch>
+                <Route path="/students" exact component={StudentsPage} />
+              </Switch>
+              <Switch>
+                <Route path="/instructors" exact component={InstructorsPage} />
+              </Switch>
+              <Footer />
+            </Container>
+          </main>
+        </div>
+      </InstitutionContext.Provider>
+    </BrowserRouter>
+  );
+};
 
 export default Main;