PROD-2560 - fix issue where hints flash when you resubmit

client/src/templates/Challenges/classic/editor.tsx

@@ -55,7 +55,8 @@ import {
   stopResetting,
   isProjectPreviewModalOpenSelector,
   openModal,
-  isChallengeCompletedSelector
+  isChallengeCompletedSelector,
+  testsRunningSelector
 } from '../redux';
 import GreenPass from '../../../assets/icons/green-pass';
 import Code from '../../../assets/icons/code';
@@ -107,6 +108,7 @@ interface EditorProps {
   }) => void;
   usesMultifileEditor: boolean;
   isChallengeCompleted: boolean;
+  testsRunning: boolean;
 }
 
 // TODO: this is grab bag of unrelated properties.  There's no need for them to
@@ -136,6 +138,7 @@ const mapStateToProps = createSelector(
   userSelector,
   challengeTestsSelector,
   isChallengeCompletedSelector,
+  testsRunningSelector,
   (
     canFocus: boolean,
     { challengeType }: { challengeType: number },
@@ -146,7 +149,8 @@ const mapStateToProps = createSelector(
     isSignedIn: boolean,
     { theme = Themes.Default }: { theme: Themes },
     tests: [{ text: string; testString: string }],
-    isChallengeCompleted: boolean
+    isChallengeCompleted: boolean,
+    testsRunning: boolean
   ) => ({
     canFocus: open ? false : canFocus,
     challengeType,
@@ -156,7 +160,8 @@ const mapStateToProps = createSelector(
     output,
     theme,
     tests,
-    isChallengeCompleted
+    isChallengeCompleted,
+    testsRunning
   })
 );
 
@@ -584,6 +589,7 @@ const Editor = (props: EditorProps): JSX.Element => {
         challengeHasErrors={challengeHasErrors()}
         tryToSubmitChallenge={tryToSubmitChallenge}
         isEditorInFocus={isEditorInFocus}
+        isRunningTests={props.testsRunning}
       />,
       outputNode,
       callback
@@ -1089,7 +1095,7 @@ const Editor = (props: EditorProps): JSX.Element => {
     dataRef.current.outputNode = lowerJawElement;
     updateOutputZone();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.tests]);
+  }, [props.tests, props.testsRunning]);
 
   useEffect(() => {
     const editor = dataRef.current.editor;

client/src/templates/Challenges/classic/lower-jaw.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useCallback,
+  useRef
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
 import TestFail from '../../../assets/icons/test-fail';
@@ -16,18 +22,18 @@ interface LowerJawProps {
   challengeHasErrors?: boolean;
   testsLength?: number;
   attemptsNumber?: number;
+  isRunningTests?: boolean;
 }
 
 const LowerJaw = ({
-  openHelpModal,
   challengeIsCompleted,
   challengeHasErrors,
   hint,
   tryToExecuteChallenge,
   tryToSubmitChallenge,
   attemptsNumber,
-  testsLength,
-  isEditorInFocus
+  isEditorInFocus,
+  isRunningTests
 }: LowerJawProps): JSX.Element => {
   const [previousHint, setpreviousHint] = useState('');
   const [runningTests, setRunningTests] = useState(false);
@@ -37,6 +43,14 @@ const LowerJaw = ({
   const { t } = useTranslation();
   const submitButtonRef = React.createRef<HTMLButtonElement>();
   const testFeedbackRef = React.createRef<HTMLDivElement>();
+  const challengeHasBeenCompletedRef = useRef(false);
+
+  // if a challenge was ever completed keep the state as completed
+  if (challengeIsCompleted) {
+    challengeHasBeenCompletedRef.current = true;
+  }
+  // keep the value of the reference.current as a separate value for convenience
+  const challengeHasBeenCompleted = challengeHasBeenCompletedRef.current;
 
   useEffect(() => {
     if (attemptsNumber && attemptsNumber > 0) {
@@ -67,15 +81,15 @@ const LowerJaw = ({
   }, [challengeHasErrors, hint]);
 
   useEffect(() => {
-    if (challengeIsCompleted && submitButtonRef?.current) {
+    if (challengeHasBeenCompleted && submitButtonRef?.current) {
       submitButtonRef.current.focus();
       setTimeout(() => {
         setTestBtnariaHidden(true);
       }, 500);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [challengeIsCompleted]);
+  }, [challengeHasBeenCompleted]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
@@ -84,12 +98,23 @@ const LowerJaw = ({
     }
   });
 
-  const renderTestFeedbackContainer = () => {
+  const sentencePicker = useCallback(() => {
+    const sentenceArray = [
+      'learn.sorry-try-again',
+      'learn.sorry-keep-trying',
+      'learn.sorry-getting-there',
+      'learn.sorry-hang-in-there',
+      'learn.sorry-dont-giveup'
+    ];
+    return attemptsNumber
+      ? sentenceArray[attemptsNumber % sentenceArray.length]
+      : sentenceArray[0];
+  }, [attemptsNumber]);
+
+  const feedbackContent = useMemo(() => {
     if (attemptsNumber === 0) {
       return '';
-    } else if (runningTests) {
-      return '';
-    } else if (challengeIsCompleted) {
+    } else if (challengeHasBeenCompleted) {
       const submitKeyboardInstructions = isEditorInFocus ? (
         <span className='sr-only'>{t('aria.submit')}</span>
       ) : (
@@ -142,69 +167,49 @@ const LowerJaw = ({
         </>
       );
     }
-  };
-
-  const sentencePicker = () => {
-    const sentenceArray = [
-      'learn.sorry-try-again',
-      'learn.sorry-keep-trying',
-      'learn.sorry-getting-there',
-      'learn.sorry-hang-in-there',
-      'learn.sorry-dont-giveup'
-    ];
-    return attemptsNumber
-      ? sentenceArray[attemptsNumber % sentenceArray.length]
-      : sentenceArray[0];
-  };
-
-  const renderHelpButton = () => {
-    const isAtteptsLargerThanTest =
-      attemptsNumber && testsLength && attemptsNumber >= testsLength;
-
-    if (isAtteptsLargerThanTest && !challengeIsCompleted)
-      return (
-        <button
-          className='btn-block btn fade-in'
-          id='help-button'
-          onClick={openHelpModal}
-        >
-          {t('buttons.ask-for-help')}
-        </button>
-      );
-  };
+  }, [
+    attemptsNumber,
+    challengeHasBeenCompleted,
+    hint,
+    isEditorInFocus,
+    isFeedbackHidden,
+    previousHint,
+    sentencePicker,
+    t
+  ]);
 
   const renderButtons = () => {
     return (
       <>
         <button
           id='test-button'
-          className={`btn btn-primary ${challengeIsCompleted ? 'sr-only' : ''}`}
+          className={`btn btn-primary ${
+            challengeHasBeenCompleted ? 'sr-only' : ''
+          }`}
           aria-hidden={testBtnariaHidden}
           onClick={tryToExecuteChallenge}
         >
           {t('buttons.check-code')}
+          {isRunningTests && '...'}
         </button>
         <div id='action-buttons-container'>
           <button
             id='submit-button'
-            aria-hidden={!challengeIsCompleted}
+            aria-hidden={!challengeHasBeenCompleted}
             className='btn btn-primary'
             onClick={tryToSubmitChallenge}
             ref={submitButtonRef}
           >
             {t('buttons.submit-and-go')}
           </button>
-          {renderHelpButton()}
         </div>
       </>
     );
   };
 
-  const feedbackContent = renderTestFeedbackContainer();
-
   return (
     <div className='action-row-container'>
-      {feedbackContent && (
+      {!isRunningTests && feedbackContent && (
         <div
           style={runningTests ? { height: `${testFeedbackheight}px` } : {}}
           className={`test-feedback`}

client/src/templates/Challenges/classic/show.tsx

@@ -46,7 +46,8 @@ import {
   previewMounted,
   updateChallengeMeta,
   openModal,
-  setEditorFocusability
+  setEditorFocusability,
+  testsRunningSelector
 } from '../redux';
 import { savedChallengesSelector } from '../../../redux';
 import { getGuideUrl } from '../utils';
@@ -61,6 +62,7 @@ import '../components/test-frame.css';
 const mapStateToProps = createStructuredSelector({
   challengeFiles: challengeFilesSelector,
   tests: challengeTestsSelector,
+  testsRunning: testsRunningSelector,
   output: consoleOutputSelector,
   isChallengeCompleted: isChallengeCompletedSelector,
   savedChallenges: savedChallengesSelector
@@ -104,6 +106,7 @@ interface ShowClassicProps {
   };
   t: TFunction;
   tests: Test[];
+  testsRunning: boolean;
   updateChallengeMeta: (arg0: ChallengeMeta) => void;
   openModal: (modal: string) => void;
   setEditorFocusability: (canFocus: boolean) => void;
@@ -337,6 +340,7 @@ class ShowClassic extends Component<ShowClassicProps, ShowClassicState> {
         instructionsPanelRef={this.instructionsPanelRef}
         showToolPanel={showToolPanel}
         videoUrl={this.getVideoUrl()}
+        testsRunning={this.props.testsRunning}
       />
     );
   }

client/src/templates/Challenges/components/side-panel.tsx

@@ -27,6 +27,7 @@ interface SidePanelProps {
   instructionsPanelRef: React.RefObject<HTMLDivElement>;
   showToolPanel: boolean;
   tests: Test[];
+  testsRunning: boolean;
   videoUrl: string;
 }
 
@@ -38,6 +39,7 @@ export function SidePanel({
   instructionsPanelRef,
   showToolPanel = false,
   tests,
+  testsRunning,
   videoUrl
 }: SidePanelProps): JSX.Element {
   const isChallengeComplete = tests.every(test => test.pass && !test.err);
@@ -85,6 +87,7 @@ export function SidePanel({
             guideUrl={guideUrl}
             videoUrl={videoUrl}
             challengeIsCompleted={isChallengeComplete}
+            isRunningTests={testsRunning}
           />
         )}
         <TestSuite tests={tests} />
@@ -93,6 +96,7 @@ export function SidePanel({
             guideUrl={guideUrl}
             videoUrl={videoUrl}
             challengeIsCompleted={isChallengeComplete}
+            isRunningTests={testsRunning}
           />
         )}
       </div>

client/src/templates/Challenges/components/tool-panel.tsx

@@ -52,6 +52,7 @@ interface ToolPanelProps {
   saveChallenge: () => void;
   isMobile?: boolean;
   isSignedIn: boolean;
+  isRunningTests?: boolean;
   openHelpModal: () => void;
   openVideoModal: () => void;
   openResetModal: () => void;
@@ -66,6 +67,7 @@ function ToolPanel({
   saveChallenge,
   isMobile,
   isSignedIn,
+  isRunningTests,
   openHelpModal,
   openVideoModal,
   openResetModal,
@@ -95,6 +97,7 @@ function ToolPanel({
           onClick={handleRunTests}
         >
           {isMobile ? t('buttons.run') : t('buttons.run-test')}
+          {isRunningTests && ' ...'}
         </Button>
       )}
       {challengeIsCompleted && (

client/src/templates/Challenges/redux/action-types.js

@@ -18,6 +18,7 @@ export const actionTypes = createTypes(
     'updateTests',
     'updateLogs',
     'cancelTests',
+    'updateTestsRunning',
 
     'logsToConsole',
 

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -47,7 +47,8 @@ import {
   updateTests,
   openModal,
   isBuildEnabledSelector,
-  disableBuildOnError
+  disableBuildOnError,
+  updateTestsRunning
 } from './';
 
 // How long before bailing out of a preview.
@@ -101,6 +102,7 @@ export function* executeChallengeSaga({ payload }) {
   try {
     yield put(initLogs());
     yield put(initConsole(i18next.t('learn.running-tests')));
+    yield put(updateTestsRunning(true));
     // reset tests to initial state
     const tests = (yield select(challengeTestsSelector)).map(
       ({ text, testString }) => ({ text, testString })
@@ -139,6 +141,7 @@ export function* executeChallengeSaga({ payload }) {
     }
     yield put(updateConsole(i18next.t('learn.tests-completed')));
     yield put(logsToConsole(i18next.t('learn.console-output')));
+    yield put(updateTestsRunning(false));
   } catch (e) {
     yield put(updateConsole(e));
   } finally {