Merge branch 'main' into dependabot/pip/pytest-selenium/zipp-3.19.1

src/app/content/components/Toolbar/PracticeQuestionsButton.tsx

@@ -4,13 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
 import practiceQuestionsIcon from '../../../../assets/practiceQuestionsIcon.svg';
 import { useAnalyticsEvent } from '../../../../helpers/analytics';
-import { useServices } from '../../../context/Services';
-import { replace } from '../../../navigation/actions';
-import * as navSelect from '../../../navigation/selectors';
-import { AnyMatch } from '../../../navigation/types';
-import { getQueryForParam } from '../../../navigation/utils';
-import { modalQueryParameterName } from '../../constants';
-import { modalUrlName } from '../../practiceQuestions/constants';
+import { openPracticeQuestions } from '../../practiceQuestions/actions';
 import {
   hasPracticeQuestions,
   isPracticeQuestionsOpen,
@@ -47,9 +41,6 @@ const PracticeQuestionsText = styled.span`
 const PracticeQuestionsButton = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
-  const state = useServices().getState();
-  const match = navSelect.match(state);
-  const existingQuery = navSelect.query(state);
   const isEnabled = useSelector(practiceQuestionsEnabled);
   const isPracticeQOpen = useSelector(isPracticeQuestionsOpen);
   const trackOpenClose = useAnalyticsEvent('openClosePracticeQuestions');
@@ -58,17 +49,15 @@ const PracticeQuestionsButton = () => {
 
   if (!isEnabled || !hasPracticeQs || !book || !page) { return null; }
 
-  const openPracticeQuestions = () => {
-    dispatch(replace(match as AnyMatch, {
-      search: getQueryForParam({[modalQueryParameterName]: modalUrlName}, existingQuery),
-    }));
+  const showPracticeQuestions = () => {
+    dispatch(openPracticeQuestions());
     trackOpenClose();
   };
 
   const text = intl.formatMessage({id: 'i18n:toolbar:practice-questions:button:text'});
 
   return <StyledPracticeQuestionsButton
-    onClick={() => openPracticeQuestions()}
+    onClick={showPracticeQuestions}
     aria-label={text}
     isActive={isPracticeQOpen}>
     <PracticeQuestionsIcon aria-hidden='true' src={practiceQuestionsIcon} />

src/app/content/practiceQuestions/actions.ts

@@ -13,3 +13,6 @@ export const finishQuestions = createStandardAction('Content/PracticeQuestions/f
 export const receivePracticeQuestionsSummary = createStandardAction(
   'Content/PracticeQuestions/Summary/receive'
 )<PracticeQuestionsSummary>();
+
+export const openPracticeQuestions = createStandardAction('Content/PracticeQuestions/open')<void>();
+export const closePracticeQuestions = createStandardAction('Content/PracticeQuestions/close')<void>();

src/app/content/practiceQuestions/components/PracticeQuestionsPopup.spec.tsx

@@ -7,12 +7,12 @@ import createTestStore from '../../../../test/createTestStore';
 import { dispatchKeyDownEvent, renderToDom } from '../../../../test/reactutils';
 import TestContainer from '../../../../test/TestContainer';
 import OnEsc from '../../../components/OnEsc';
-import { push } from '../../../navigation/actions';
 import * as navigation from '../../../navigation/selectors';
 import { MiddlewareAPI, Store } from '../../../types';
 import { assertNotNull, assertWindow } from '../../../utils';
 import { content } from '../../routes';
-import { nextQuestion } from '../actions';
+import { closePracticeQuestions, nextQuestion } from '../actions';
+import { modalUrlName } from '../constants';
 import * as pqSelectors from '../selectors';
 import PracticeQuestionsPopup from './PracticeQuestionsPopup';
 
@@ -37,6 +37,7 @@ const mockMatch = {
   },
   route: content,
   state: {},
+  search: `?modal=${modalUrlName}`,
 };
 
 describe('PracticeQuestions', () => {
@@ -108,7 +109,7 @@ describe('PracticeQuestions', () => {
     });
 
     expect(track).toHaveBeenCalled();
-    expect(dispatch).toHaveBeenCalledWith(push(mockMatch));
+    expect(dispatch).toHaveBeenCalledWith(closePracticeQuestions());
   });
 
   it('tracks analytics and removes modal-url when pressing esc', async() => {
@@ -128,7 +129,7 @@ describe('PracticeQuestions', () => {
     dispatchKeyDownEvent({element, key: 'Escape'});
 
     expect(track).toHaveBeenCalled();
-    expect(dispatch).toHaveBeenCalledWith(push(mockMatch));
+    expect(dispatch).toHaveBeenCalledWith(closePracticeQuestions());
   });
 
   it('tracks analytics and removes modal-url on overlay click', async() => {
@@ -150,7 +151,7 @@ describe('PracticeQuestions', () => {
     ReactTestUtils.Simulate.click(element, {preventDefault}); // this checks for react onClick prop
 
     expect(track).toHaveBeenCalled();
-    expect(dispatch).toHaveBeenCalledWith(push(mockMatch));
+    expect(dispatch).toHaveBeenCalledWith(closePracticeQuestions());
   });
 
   it('show warning prompt and tracks analytics after confirm', async() => {
@@ -178,7 +179,7 @@ describe('PracticeQuestions', () => {
     expect(spyConfirm)
       .toHaveBeenCalledWith('Are you sure you want to exit this page? Your progress will not be saved.');
     expect(track).toHaveBeenCalled();
-    expect(dispatch).toHaveBeenCalledWith(push(mockMatch));
+    expect(dispatch).toHaveBeenCalledWith(closePracticeQuestions());
   });
 
   it('show warning prompt and do not tracks analytics after cancel', async() => {
@@ -207,6 +208,6 @@ describe('PracticeQuestions', () => {
     expect(spyConfirm)
       .toHaveBeenCalledWith('Are you sure you want to exit this page? Your progress will not be saved.');
     expect(track).not.toHaveBeenCalled();
-    expect(dispatch).not.toHaveBeenCalledWith(push(mockMatch));
+    expect(dispatch).not.toHaveBeenCalledWith(closePracticeQuestions());
   });
 });

src/app/content/practiceQuestions/components/PracticeQuestionsPopup.tsx

@@ -3,14 +3,13 @@ import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useAnalyticsEvent } from '../../../../helpers/analytics';
-import { push } from '../../../navigation/actions';
-import * as navigation from '../../../navigation/selectors';
 import { useOnEsc } from '../../../reactUtils';
 import theme from '../../../theme';
-import { assertDefined, assertWindow } from '../../../utils';
+import { assertWindow } from '../../../utils';
 import Modal from '../../components/Modal';
 import { bookTheme as bookThemeSelector } from '../../selectors';
 import { CloseIcon, CloseIconWrapper, Header } from '../../styles/PopupStyles';
+import { closePracticeQuestions } from '../actions';
 import * as pqSelectors from '../selectors';
 import ShowPracticeQuestions from './ShowPracticeQuestions';
 
@@ -23,18 +22,17 @@ const PracticeQuestionsPopup = () => {
   const currentQuestionIndex = useSelector(pqSelectors.currentQuestionIndex);
   const bookTheme = useSelector(bookThemeSelector);
   const intl = useIntl();
-  const match = useSelector(navigation.match);
 
   const closeAndTrack = React.useCallback((method: string) => () => {
     if (currentQuestionIndex !== null) {
       const message = intl.formatMessage({ id: 'i18n:practice-questions:popup:warning-before-close' });
       if (!assertWindow().confirm(message)) { return; }
     }
 
-    dispatch(push(assertDefined(match, 'match should be always defined at this step')));
+    dispatch(closePracticeQuestions());
 
     trackOpenClosePQ(method);
-  }, [currentQuestionIndex, trackOpenClosePQ, intl, dispatch, match]);
+  }, [currentQuestionIndex, trackOpenClosePQ, intl, dispatch]);
 
   useOnEsc(isPracticeQuestionsOpen, closeAndTrack('esc'));
 

src/app/content/practiceQuestions/hooks/index.tsx

@@ -1,5 +1,9 @@
 import { receiveFeatureFlags } from '../../../featureFlags/actions';
+import { closeModal } from '../../../navigation/hooks/closeModalHook';
+import { openModal } from '../../../navigation/hooks/openModalHook';
 import { actionHook } from '../../../utils';
+import { closePracticeQuestions, openPracticeQuestions } from '../actions';
+import { modalUrlName } from '../constants';
 import loadPracticeQuestions, { loadPracticeQuestionsSummaryHookBody } from './locationChange';
 import { setSelectedSectionHook } from './setSelectedSectionHook';
 
@@ -10,4 +14,6 @@ export {
 export default [
   setSelectedSectionHook,
   actionHook(receiveFeatureFlags, loadPracticeQuestionsSummaryHookBody),
+  actionHook(closePracticeQuestions, closeModal),
+  actionHook(openPracticeQuestions, openModal(modalUrlName)),
 ];