feat: update exam index

edx · Jul 7, 2023 · da5a6fd · da5a6fd
1 parent 91101a6
commit da5a6fd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/src/pages/ExamsPage/components/ExamSelection.jsx b/src/pages/ExamsPage/components/ExamSelection.jsx
@@ -4,27 +4,26 @@ import {
   SelectMenu,
 } from '@edx/paragon';
 import PropTypes from 'prop-types';
+import { useUpdateCurrentExamIndex } from '../hooks';
 
 // todo: implement substring search
-// const searchByExamName = (exams, examName) => {
-// const isMatchingExam = (exam) => exam === examName;
-// const match = exams.filter(isMatchingExam);
-// console.log('log');
-// };
 
-const updateCurrentExamIndex = (exam) => 'hello';
+const ExamSelection = ({ exams }) => {
+  const { updateSelectedExam } = useUpdateCurrentExamIndex();
 
-const ExamSelection = ({ exams }) => (
-  <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>
-      ))}
-    </SelectMenu>
-  </div>
-);
+  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>
+    </div>
+  );
+};
 
 ExamSelection.propTypes = {
   exams: PropTypes.arrayOf(PropTypes.object).isRequired, // eslint-disable-line react/forbid-prop-types

diff --git a/src/pages/ExamsPage/data/reducer.js b/src/pages/ExamsPage/data/reducer.js
@@ -35,12 +35,10 @@ const slice = createSlice({
     deleteExamAttempt: (state, attemptId) => ({
       ...state,
       attemptsList: state.attemptsList.filter(attempt => attempt.attempt_id !== attemptId.payload),
-    })
-    ,
-    //  todo: setCurrentExam
-    loadCurrentExamIndex: (state, { payload }) => ({
+    }),
+    setCurrentExamIndex: (state, examId) => ({
       ...state,
-      currentExamIndex: 1,
+      currentExamIndex: state.examsList.findIndex(exam => exam.id === examId.payload),
     }),
   },
 });
@@ -49,7 +47,7 @@ export const {
   loadExams,
   loadExamAttempts,
   deleteExamAttempt,
-  loadCurrentExamIndex,
+  setCurrentExamIndex,
 } = slice.actions;
 
 export const {

diff --git a/src/pages/ExamsPage/hooks.js b/src/pages/ExamsPage/hooks.js
@@ -57,16 +57,19 @@ export const useInitializeExamsPage = (courseId) => {
   React.useEffect(() => { fetchCourseExams(courseId); }, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
+export const useUpdateCurrentExamIndex = () => {
+  const dispatch = useDispatch();
+  return (examId) => () => dispatch(reducer.setCurrentExamIndex(examId));
+};
+
 export const useExamsData = () => {
   const [exampleValue, setExampleValue] = state.exampleValue(0);
   const examsList = useSelector(selectors.courseExamsList);
-  // todo: add setter here
-  const [currentExam, setCurrentExam] = useSelector(selectors.currentExam);
+  const currentExam = useSelector(selectors.currentExam);
   const isLoading = reduxHooks.useRequestIsPending(RequestKeys.fetchCourseExams);
 
   return {
     currentExam,
-    setCurrentExam,
     examsList,
     isLoading,
     exampleValue,