feat(client): handle quiz finish and exit (freeCodeCamp#56644)

Co-authored-by: Oliver Eyton-Williams <[email protected]>

Author: huyenltnguyen

client/i18n/locales/english/translations.json

@@ -96,6 +96,8 @@
     "exit": "Exit",
     "finish-exam": "Finish the exam",
     "finish": "Finish",
+    "exit-quiz": "Exit the quiz",
+    "finish-quiz": "Finish the quiz",
     "submit-exam-results": "Submit my results",
     "verify-trophy": "Verify Trophy",
     "link-account": "Link Account",
@@ -519,7 +521,15 @@
       "correct-answer": "Correct!",
       "incorrect-answer": "Incorrect.",
       "unanswered-questions": "The following questions are unanswered: {{ unansweredQuestions }}. You must answer all questions.",
-      "have-n-correct-questions": "You have {{ correctAnswerCount }} out of {{ total }} questions correct."
+      "have-n-correct-questions": "You have {{ correctAnswerCount }} out of {{ total }} questions correct.",
+      "finish-modal-header": "Finish Quiz",
+      "finish-modal-body": "Are you sure you want to finish the quiz? You will not be able to change any answers.",
+      "finish-modal-yes": "Yes, I am finished",
+      "finish-modal-no": "No, I would like to continue the quiz",
+      "exit-modal-header": "Exit Quiz",
+      "exit-modal-body": "Are you sure you want to leave the quiz? You will lose any progress you have made.",
+      "exit-modal-yes": "Yes, I want to leave the quiz",
+      "exit-modal-no": "No, I would like to continue the quiz"
     },
     "exam": {
       "qualified": "Congratulations, you have completed all the requirements to qualify for the exam.",

client/package.json

@@ -50,7 +50,7 @@
     "@fortawesome/react-fontawesome": "0.2.0",
     "@freecodecamp/loop-protect": "3.0.0",
     "@freecodecamp/react-calendar-heatmap": "1.1.0",
-    "@freecodecamp/ui": "2.1.0",
+    "@freecodecamp/ui": "3.0.0",
     "@growthbook/growthbook-react": "0.20.0",
     "@loadable/component": "5.16.3",
     "@reach/router": "1.3.4",

client/src/templates/Challenges/hooks/index.ts

@@ -0,0 +1 @@
+export { usePageLeave } from './use-page-leave';

client/src/templates/Challenges/hooks/use-page-leave.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useLocation, globalHistory } from '@reach/router';
+
+interface Props {
+  onWindowClose: (event: BeforeUnloadEvent) => void;
+  onHistoryChange: () => void;
+}
+
+export const usePageLeave = ({ onWindowClose, onHistoryChange }: Props) => {
+  const curLocation = useLocation();
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', onWindowClose);
+
+    // This is a workaround as @reach/router doesn't support blocking history change.
+    // https://github.com/reach/router/issues/464
+    const unlistenHistory = globalHistory.listen(({ action, location }) => {
+      const isBack = action === 'POP';
+      const isRouteChanged =
+        action === 'PUSH' && location.pathname !== curLocation.pathname;
+
+      if (isBack || isRouteChanged) {
+        onHistoryChange();
+      }
+    });
+
+    return () => {
+      window.removeEventListener('beforeunload', onWindowClose);
+      unlistenHistory();
+    };
+  }, [onWindowClose, onHistoryChange, curLocation]);
+};

client/src/templates/Challenges/quiz/exit-quiz-modal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
+
+import { closeModal } from '../redux/actions';
+import { isExitQuizModalOpenSelector } from '../redux/selectors';
+
+interface ExitQuizModalProps {
+  closeExitQuizModal: () => void;
+  isExitQuizModalOpen: boolean;
+  onExit: () => void;
+}
+
+const mapStateToProps = (state: unknown) => ({
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+  isExitQuizModalOpen: isExitQuizModalOpenSelector(state)
+});
+
+const mapDispatchToProps = {
+  closeExitQuizModal: () => closeModal('exitQuiz')
+};
+
+const ExitQuizModal = ({
+  closeExitQuizModal,
+  isExitQuizModalOpen,
+  onExit
+}: ExitQuizModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal
+      onClose={closeExitQuizModal}
+      open={isExitQuizModalOpen}
+      variant='danger'
+    >
+      <Modal.Header closeButtonClassNames='close'>
+        {t('learn.quiz.exit-modal-header')}
+      </Modal.Header>
+      <Modal.Body alignment='center'>
+        {t('learn.quiz.exit-modal-body')}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button block variant='primary' onClick={closeExitQuizModal}>
+          {t('learn.quiz.exit-modal-no')}
+        </Button>
+        <Spacer size='xxs' />
+        <Button block variant='danger' onClick={onExit}>
+          {t('learn.quiz.exit-modal-yes')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+ExitQuizModal.displayName = 'ExitQuizModal';
+
+export default connect(mapStateToProps, mapDispatchToProps)(ExitQuizModal);

client/src/templates/Challenges/quiz/finish-quiz-modal.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Modal, Spacer } from '@freecodecamp/ui';
+
+import { closeModal } from '../redux/actions';
+import { isFinishQuizModalOpenSelector } from '../redux/selectors';
+
+interface FinishQuizModalProps {
+  closeFinishQuizModal: () => void;
+  isFinishQuizModalOpen: boolean;
+  onFinish: () => void;
+}
+
+const mapStateToProps = (state: unknown) => ({
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+  isFinishQuizModalOpen: isFinishQuizModalOpenSelector(state)
+});
+
+const mapDispatchToProps = {
+  closeFinishQuizModal: () => closeModal('finishQuiz')
+};
+
+const FinishQuizModal = ({
+  closeFinishQuizModal,
+  isFinishQuizModalOpen,
+  onFinish
+}: FinishQuizModalProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Modal onClose={closeFinishQuizModal} open={isFinishQuizModalOpen}>
+      <Modal.Header closeButtonClassNames='close'>
+        {t('learn.quiz.finish-modal-header')}
+      </Modal.Header>
+      <Modal.Body alignment='center'>
+        {t('learn.quiz.finish-modal-body')}
+      </Modal.Body>
+      <Modal.Footer>
+        <Button block size='medium' variant='primary' onClick={onFinish}>
+          {t('learn.quiz.finish-modal-yes')}
+        </Button>
+        <Spacer size='xxs' />
+        <Button
+          block
+          size='medium'
+          variant='primary'
+          onClick={closeFinishQuizModal}
+        >
+          {t('learn.quiz.finish-modal-no')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+FinishQuizModal.displayName = 'FinishQuizModal';
+
+export default connect(mapStateToProps, mapDispatchToProps)(FinishQuizModal);