From 5fcad8a2680c9fca74251af4ea4241b677126f4d Mon Sep 17 00:00:00 2001
From: Josiah Ivey <josiah.ivey@gmail.com>
Date: Wed, 13 Nov 2024 13:35:10 -0800
Subject: [PATCH] use the modal hooks like all the other modals

---
 .../Toolbar/PracticeQuestionsButton.tsx       | 19 ++++---------------
 src/app/content/practiceQuestions/actions.ts  |  3 +++
 .../PracticeQuestionsPopup.spec.tsx           | 14 ++++++++------
 .../components/PracticeQuestionsPopup.tsx     | 18 ++++--------------
 .../content/practiceQuestions/hooks/index.tsx |  6 ++++++
 5 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/app/content/components/Toolbar/PracticeQuestionsButton.tsx b/src/app/content/components/Toolbar/PracticeQuestionsButton.tsx
index 75b1062ec7..2e9a163271 100644
--- a/src/app/content/components/Toolbar/PracticeQuestionsButton.tsx
+++ b/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} />
diff --git a/src/app/content/practiceQuestions/actions.ts b/src/app/content/practiceQuestions/actions.ts
index 2e193ae82c..32ac62e601 100644
--- a/src/app/content/practiceQuestions/actions.ts
+++ b/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>();
diff --git a/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.spec.tsx b/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.spec.tsx
index 85765c89be..9a949a1245 100644
--- a/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.spec.tsx
+++ b/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.spec.tsx
@@ -12,7 +12,8 @@ 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 +38,7 @@ const mockMatch = {
   },
   route: content,
   state: {},
+  search: `?modal=${modalUrlName}`
 };
 
 describe('PracticeQuestions', () => {
@@ -108,7 +110,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 +130,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 +152,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 +180,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 +209,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());
   });
 });
diff --git a/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.tsx b/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.tsx
index e90bf36aaf..cc7833d26a 100644
--- a/src/app/content/practiceQuestions/components/PracticeQuestionsPopup.tsx
+++ b/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,7 +22,6 @@ 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) {
@@ -31,18 +29,10 @@ const PracticeQuestionsPopup = () => {
       if (!assertWindow().confirm(message)) { return; }
     }
 
-    const definedMatch = assertDefined(match, 'match should be always defined at this step');
-
-    if ('search' in definedMatch && typeof definedMatch.search === 'string') {
-      const params = new URLSearchParams(definedMatch.search);
-      params.delete('modal');
-      definedMatch.search = params.toString();
-    }
-
-    dispatch(push(definedMatch));
+    dispatch(closePracticeQuestions());
 
     trackOpenClosePQ(method);
-  }, [currentQuestionIndex, trackOpenClosePQ, intl, dispatch, match]);
+  }, [currentQuestionIndex, trackOpenClosePQ, intl, dispatch]);
 
   useOnEsc(isPracticeQuestionsOpen, closeAndTrack('esc'));
 
diff --git a/src/app/content/practiceQuestions/hooks/index.tsx b/src/app/content/practiceQuestions/hooks/index.tsx
index 0f78bfed53..b67d5abeb3 100644
--- a/src/app/content/practiceQuestions/hooks/index.tsx
+++ b/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)),
 ];