diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index e77f933bad4..0e638f42b00 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -19,7 +19,7 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import store from 'store'; -import { debounce } from 'lodash'; +import { debounce } from 'lodash-es'; import { Loader } from '../../../components/helpers'; import { Themes } from '../../../components/settings/theme'; import { @@ -415,10 +415,9 @@ const Editor = (props: EditorProps): JSX.Element => { run: () => { if (props.usesMultifileEditor) { if (challengeIsComplete()) { - debounce(props.submitChallenge, 2000); + tryToSubmitChallenge(); } else { - props.executeChallenge(); - attemptRef.current.attempts++; + tryToExecuteChallenge(); } } else { props.executeChallenge({ showCompletionModal: true }); @@ -553,6 +552,13 @@ const Editor = (props: EditorProps): JSX.Element => { dataRef.current.descriptionZoneId = changeAccessor.addZone(viewZone); }; + function tryToExecuteChallenge() { + props.executeChallenge(); + attemptRef.current.attempts++; + } + + const tryToSubmitChallenge = debounce(props.submitChallenge, 2000); + function createLowerJaw(outputNode: HTMLElement, callback?: () => void) { const { output } = props; const isChallengeComplete = challengeIsComplete(); @@ -560,14 +566,13 @@ const Editor = (props: EditorProps): JSX.Element => { ReactDOM.render( attemptRef.current.attempts++} + tryToSubmitChallenge={tryToSubmitChallenge} isEditorInFocus={isEditorInFocus} />, outputNode, diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx index c07ce8a1330..845961d25ce 100644 --- a/client/src/templates/Challenges/classic/lower-jaw.tsx +++ b/client/src/templates/Challenges/classic/lower-jaw.tsx @@ -1,7 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { debounce } from 'lodash'; import Fail from '../../../assets/icons/fail'; import LightBulb from '../../../assets/icons/lightbulb'; import GreenPass from '../../../assets/icons/green-pass'; @@ -10,14 +9,13 @@ interface LowerJawProps { hint?: string; challengeIsCompleted?: boolean; openHelpModal: () => void; - executeChallenge: () => void; - submitChallenge: () => void; + tryToExecuteChallenge: () => void; + tryToSubmitChallenge: () => void; showFeedback?: boolean; isEditorInFocus?: boolean; challengeHasErrors?: boolean; testsLength?: number; attemptsNumber?: number; - onAttempt?: () => void; } const LowerJaw = ({ @@ -25,11 +23,10 @@ const LowerJaw = ({ challengeIsCompleted, challengeHasErrors, hint, - executeChallenge, - submitChallenge, + tryToExecuteChallenge, + tryToSubmitChallenge, attemptsNumber, testsLength, - onAttempt, isEditorInFocus }: LowerJawProps): JSX.Element => { const [previousHint, setpreviousHint] = useState(''); @@ -162,11 +159,6 @@ const LowerJaw = ({ : sentenceArray[0]; }; - const onTestButtonClick = () => { - executeChallenge(); - if (onAttempt) onAttempt(); - }; - const renderHelpButton = () => { const isAtteptsLargerThanTest = attemptsNumber && testsLength && attemptsNumber >= testsLength; @@ -190,7 +182,7 @@ const LowerJaw = ({ id='test-button' className={`btn-block btn ${challengeIsCompleted ? 'sr-only' : ''}`} aria-hidden={testBtnariaHidden} - onClick={onTestButtonClick} + onClick={tryToExecuteChallenge} > {t('buttons.check-code')} @@ -199,7 +191,7 @@ const LowerJaw = ({ id='submit-button' aria-hidden={!challengeIsCompleted} className='btn-block btn' - onClick={debounce(submitChallenge, 2000)} + onClick={tryToSubmitChallenge} ref={submitButtonRef} > {t('buttons.submit-and-go')}