Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/components/reset-modal.tsx (TypeScript)

Code before:
  return () => fns.forEach(fn => fn());
}

function ResetModal({
  reset,
  close,
  challengeType,
  isOpen,
  //lessonTitle
}: ResetModalProps): JSX.Element {
  const { t } = useTranslation();
  if (isOpen) {
    callGA({ event: 'pageview', pagePath: '/reset-modal' });
  }
  return (
    <Modal onClose={close} open={isOpen} variant='danger'>
      <Modal.Header showCloseButton={true} closeButtonClassNames='close'>
        {t('learn.reset')}
      </Modal.Header>
      <Modal.Body alignment='center'>
        <p>
          {canSaveToDB(challengeType)
            ? t('learn.revert-warn')
            : t('learn.reset-warn', {
                title:
                  document.querySelector('div.challenge-title h1#content-start')
                    ?.innerHTML || 'The current lesson'
              })}
        </p>
        <p>
          <em>{t('learn.reset-warn-2')}</em>
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button
          block={true}
          size='large'
          variant='danger'
          onClick={withActions(reset, close)}
        >
          {canSaveToDB(challengeType)
            ? t('buttons.revert-to-saved-code')
            : t('buttons.reset-lesson')}
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

ResetModal.displayName = 'ResetModal';


Review comment (suggestion):
you can't do that with react. You probably need to add the challenge title as parameter for this, and find where it is called and pass to it the challenge name. I guess here
https://github.com/freeCodeCamp/freeCodeCamp/blob/411868243cf130fc11aa7e4cef22779ea0c7021e/client/src/templates/Challenges/classic/show.tsx#L531-L532

it looks like it is also used here, so it needs to not loose functionlity in this other part of the codebase
https://github.com/freeCodeCamp/freeCodeCamp/blob/411868243cf130fc11aa7e4cef22779ea0c7021e/client/src/components/settings/danger-zone.tsx#L73-L78

Code after:
  return () => fns.forEach(fn => fn());
}

function ResetModal({
  reset,
  close,
  challengeType,
  isOpen,
  challengeTitle
}: ResetModalProps): JSX.Element {
  const { t } = useTranslation();
  if (isOpen) {
    callGA({ event: 'pageview', pagePath: '/reset-modal' });
  }
  return (
    <Modal onClose={close} open={isOpen} variant='danger'>
      <Modal.Header showCloseButton={true} closeButtonClassNames='close'>
        {t('learn.reset')}
      </Modal.Header>
      <Modal.Body alignment='center'>
        <p>
          {canSaveToDB(challengeType)
            ? t('learn.revert-warn')
            : t('learn.reset-warn', {
                title: challengeTitle
              })}
        </p>
        <p>
          <em>{t('learn.reset-warn-2')}</em>
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button
          block={true}
          size='large'
          variant='danger'
          onClick={withActions(reset, close)}
        >
          {canSaveToDB(challengeType)
            ? t('buttons.revert-to-saved-code')
            : t('buttons.reset-lesson')}
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

ResetModal.displayName = 'ResetModal';

export default connect(mapStateToProps, mapDispatchToProps)(ResetModal);