feat: finish component logic

src/pages/ExamsPage/components/ExamSelection.jsx

@@ -1,32 +1,53 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   MenuItem, SearchField,
   SelectMenu,
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
-import { useUpdateCurrentExamIndex } from '../hooks';
 
-// todo: implement substring search
+const ExamSelection = ({ exams, handleSelectExam }) => {
+  const { formatMessage, formatDate } = useIntl();
+  const [searchText, setSearchText] = useState('');
 
-const ExamSelection = ({ exams }) => {
-  const { updateSelectedExam } = useUpdateCurrentExamIndex();
+  const placeholderMessage = formatMessage({
+    id: 'ExamSelection.select_exam_placeholder',
+    defaultMessage: 'Search for an exam...',
+    description: 'Placeholder message for the exam selection dropdown',
+  });
+
+  const getMenuItems = () => {
+    const menuItems = [
+      <MenuItem as={SearchField} onChange={setSearchText} placeholder={placeholderMessage} />,
+    ]
+    return menuItems.concat(exams.filter(exam => (
+      exam.name.toLowerCase().includes(searchText.toLowerCase()))
+    ).map(exam => {
+      return <MenuItem onClick={() => handleSelectExam(exam.id)}>{exam.name}</MenuItem>
+    }));
+  }
 
   return (
     <div data-testid="exam_selection">
-      <SelectMenu defaultMessage="Select an exam...">
-        <MenuItem as={SearchField} />
-        {exams.map(exam => (
-          // todo: update redux state
-          // <MenuItem onClick={() => console.log(exam.id)}>{exam.name}</MenuItem>
-          <MenuItem onClick={() => updateSelectedExam(exam.id)}>{exam.name}</MenuItem>
-        ))}
+      <SelectMenu
+        defaultMessage={formatMessage({
+          id: 'ExamSelection.select_exam',
+          defaultMessage: 'Select an exam',
+          description: 'Default message for the exam selection dropdown',
+        })}
+      >
+        { getMenuItems() }
       </SelectMenu>
     </div>
   );
 };
 
 ExamSelection.propTypes = {
-  exams: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types
+  exams: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  })).isRequired,
+  handleSelectExam: PropTypes.func.isRequired,
 };
 
 export default ExamSelection;

src/pages/ExamsPage/data/reducer.js

@@ -36,7 +36,7 @@ const slice = createSlice({
       ...state,
       attemptsList: state.attemptsList.filter(attempt => attempt.attempt_id !== attemptId.payload),
     }),
-    setCurrentExamIndex: (state, examId) => ({
+    setCurrentExam: (state, examId) => ({
       ...state,
       currentExamIndex: state.examsList.findIndex(exam => exam.id === examId.payload),
     }),
@@ -47,7 +47,7 @@ export const {
   loadExams,
   loadExamAttempts,
   deleteExamAttempt,
-  setCurrentExamIndex,
+  setCurrentExam,
 } = slice.actions;
 
 export const {

src/pages/ExamsPage/hooks.js

@@ -57,22 +57,28 @@ export const useInitializeExamsPage = (courseId) => {
   React.useEffect(() => { fetchCourseExams(courseId); }, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
-export const useUpdateCurrentExamIndex = () => {
+export const useSetCurrentExam = () => {
   const dispatch = useDispatch();
-  return (examId) => () => dispatch(reducer.setCurrentExamIndex(examId));
+  const fetchExamAttempts = module.useFetchExamAttempts();
+  return (examId) => {
+    dispatch(reducer.setCurrentExam(examId));
+    fetchExamAttempts(examId);
+  };
 };
 
 export const useExamsData = () => {
   const [exampleValue, setExampleValue] = state.exampleValue(0);
   const examsList = useSelector(selectors.courseExamsList);
   const currentExam = useSelector(selectors.currentExam);
+  const setCurrentExam = module.useSetCurrentExam();
   const isLoading = reduxHooks.useRequestIsPending(RequestKeys.fetchCourseExams);
 
   return {
     currentExam,
     examsList,
     isLoading,
     exampleValue,
+    setCurrentExam,
     setExampleValue,
   };
 };

src/pages/ExamsPage/index.jsx

@@ -9,39 +9,30 @@ import {
   useExamsData, useInitializeExamsPage, useFetchExamAttempts, useExamAttemptsData,
 } from './hooks';
 import AttemptList from './components/AttemptList';
-import ExamList from './components/ExamList';
 import ExternalReviewDashboard from './components/ExternalReviewDashboard';
 import ExamSelection from './components/ExamSelection';
 
+import './index.scss'
+
 const ExamsPage = ({ courseId }) => {
   useInitializeExamsPage(courseId);
   const { formatMessage } = useIntl();
   const {
     currentExam,
     examsList,
-    isLoading,
+    setCurrentExam,
   } = useExamsData();
   const {
     attemptsList,
   } = useExamAttemptsData();
-  /*   eslint-disable react-hooks/exhaustive-deps */
-  const fetchExamAttempts = useFetchExamAttempts();
-  // NOTE: This useEffect hook is temporary until the currentExam is
-  // Passed in via the exam selection component
-  useEffect(() => {
-    if (currentExam) {
-      fetchExamAttempts(currentExam.id);
-    }
-  }, [currentExam]);
-  /*   eslint-disable react-hooks/exhaustive-deps */
 
   return (
     <Container>
-      {isLoading && <div>Loading...</div>}
-      <ExamList exams={examsList} />
+      <Container id="exam-selector">
+        <ExamSelection exams={examsList} handleSelectExam={setCurrentExam} />
+      </Container>
       <Tabs variant="tabs" mountOnEnter defaultActiveKey="attempts">
         <Tab eventKey="attempts" title={formatMessage(messages.attemptsViewTabTitle)}>
-          <ExamSelection exams={examsList} />
           <AttemptList attempts={attemptsList} />
         </Tab>
         <Tab eventKey="review" title={formatMessage(messages.reviewDashboardTabTitle)}>

src/pages/ExamsPage/index.scss

@@ -0,0 +1,14 @@
+@import "~@edx/paragon/scss/core/core";
+
+#exam-selector {
+  margin: 0.5em auto;
+}
+
+.pgn__searchfield .form-control {
+  border: 1px solid $search-border-color !important;
+}
+
+.pgn__searchfield.has-focus:not(.pgn__searchfield--external)::after {
+  border: none;
+  width: 0px;
+}