feat(client): combine editor submission and execution calls (#46037)

* feat: combine submission and execution calls

* refactor: rename the click listeners

onChallengeSubmission sounds like something that will get called in
response to challenge submission, not something that will trigger it

* fix: create one debounced function

* fix: use lodash-es

Otherwise we'll include all of lodash in the bundle.

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

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(
       <LowerJaw
         openHelpModal={props.openHelpModal}
-        executeChallenge={props.executeChallenge}
+        tryToExecuteChallenge={tryToExecuteChallenge}
         hint={output[1]}
         testsLength={props.tests.length}
         attemptsNumber={attemptRef.current.attempts}
         challengeIsCompleted={isChallengeComplete}
         challengeHasErrors={challengeHasErrors()}
-        submitChallenge={props.submitChallenge}
-        onAttempt={() => attemptRef.current.attempts++}
+        tryToSubmitChallenge={tryToSubmitChallenge}
         isEditorInFocus={isEditorInFocus}
       />,
       outputNode,

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')}
         </button>
@@ -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')}