Save and continue when there is no feedback

Why do it this way?

`onAnswerSave` is non-blocking and non-awaitable. Consequently, calling
`onAnswerSave` in the onClick of the submit button does not work
because this will advance to the next question before the current one
is finished saving.

We know that the api is done saving when `is_completed` becomes true.

When `hasFeedback` is falsy and the submit button is clicked,
`shouldContinue` is set to `true`.

If both `shouldContinue` and `is_completed` are true, then the answer
has been submitted and saved and it is okay to advance.

[CORE-173]

Author: TylerZeroMaster

src/components/Exercise.spec.tsx

@@ -142,6 +142,7 @@ describe('Exercise', () => {
         numberOfQuestions: 1,
         scrollToQuestion: 1,
         hasMultipleAttempts: false,
+        hasFeedback: true,
         onAnswerChange: () => null,
         onAnswerSave: () => null,
         onNextStep: () => null,

src/components/Exercise.stories.tsx

@@ -130,6 +130,7 @@ const exerciseWithQuestionStatesProps = (): ExerciseWithQuestionStatesProps => {
       apiIsPending: false
     }
   },
+  hasFeedback: true,
 }};
 
 type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3;
@@ -181,6 +182,34 @@ export const Default = () => {
   )
 };
 
+export const DefaultWithoutFeedback = () => {
+  const [selectedAnswerId, setSelectedAnswerId] = useState<number>(0);
+  const [apiIsPending, setApiIsPending] = useState(false)
+  const [isCompleted, setIsCompleted] = useState(false)
+  const props = exerciseWithQuestionStatesProps();
+  props.hasFeedback = false;
+  props.questionStates['1'].answer_id = selectedAnswerId;
+  props.questionStates['1'].apiIsPending = apiIsPending;
+  props.questionStates['1'].is_completed = isCompleted;
+  props.questionStates['1'].canAnswer = !isCompleted;
+  return (
+    <Exercise
+      {...props}
+      onAnswerChange={(a: Omit<Answer, 'id'> & { id: number, question_id: number }) => {
+        setSelectedAnswerId(a.id)
+      }}
+      onAnswerSave={() => {
+        setApiIsPending(true);
+        setTimeout(() => {
+          setApiIsPending(false)
+          setIsCompleted(true)
+        }, 1000)
+      }}
+      onNextStep={(idx) => console.log(`Next step: ${idx}`)}
+    />
+  )
+};
+
 export const DeprecatedStepData = () => <Exercise {...exerciseWithStepDataProps} />;
 
 export const CompleteWithFeedback = () => {
@@ -210,6 +239,34 @@ export const CompleteWithFeedback = () => {
   return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
 };
 
+export const CompleteWithoutFeedback = () => {
+  const props: ExerciseWithQuestionStatesProps = {
+    ...exerciseWithQuestionStatesProps(),
+
+    questionStates: {
+      '1': {
+        available_points: '1.0',
+        is_completed: true,
+        answer_id_order: ['1', '2'],
+        answer_id: 1,
+        free_response: 'Free response',
+        feedback_html: '',
+        correct_answer_id: '',
+        correct_answer_feedback_html: '',
+        attempts_remaining: 0,
+        attempt_number: 1,
+        incorrectAnswerId: 0,
+        canAnswer: false,
+        needsSaved: false,
+        apiIsPending: false
+      }
+    },
+    hasFeedback: false,
+  };
+
+  return <TextResizerProvider><Exercise {...props} /></TextResizerProvider>;
+};
+
 export const IncorrectWithFeedbackAndSolution = () => {
   const props: ExerciseWithQuestionStatesProps = { ...exerciseWithQuestionStatesProps() };
   props.questionStates = {

src/components/Exercise.tsx

@@ -138,6 +138,7 @@ export interface ExerciseBaseProps {
    * - A topic icon linking to the relevant textbook location
    */
   exerciseIcons?: ExerciseIcons;
+  hasFeedback?: boolean;
 }
 
 export interface ExerciseWithStepDataProps extends ExerciseBaseProps {

src/components/ExerciseQuestion.spec.tsx

@@ -50,6 +50,7 @@ describe('ExerciseQuestion', () => {
       displaySolution: false,
       available_points: '1.0',
       exercise_uid: '',
+      hasFeedback: true,
     }
   });
 
@@ -125,6 +126,21 @@ describe('ExerciseQuestion', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders Submit & continue button', () => {
+    const tree = renderer.create(
+      <ExerciseQuestion {...props}
+        choicesEnabled={true}
+        incorrectAnswerId='2'
+        canAnswer={true}
+        needsSaved={true}
+        answer_id='1'
+        canUpdateCurrentStep={false}
+        hasFeedback={false}
+      />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
   it('renders continue button (unused?)', () => {
     const tree = renderer.create(
       <ExerciseQuestion {...props}
@@ -197,4 +213,27 @@ describe('ExerciseQuestion', () => {
 
     expect(mockFn).toHaveBeenCalledWith(0);
   });
+
+  it('passes question index on submit button click when there is not feedback', () => {
+    const mockFn = jest.fn();
+
+    // This combination of props should never happen: `is_completed` should not 
+    // be true at the same time as `needsSaved`. This combination allows the 
+    // test to work correctly without simulating waiting for api calls
+    const tree = renderer.create(
+      <ExerciseQuestion
+        {...props}
+        needsSaved={true}
+        canAnswer={true}
+        hasFeedback={false}
+        is_completed={true}
+        onNextStep={mockFn}
+      />
+    );
+    renderer.act(() => {
+      tree.root.findByType(SaveButton).props.onClick();
+    });
+
+    expect(mockFn).toHaveBeenCalledWith(0);
+  });
 });

src/components/ExerciseQuestion.stories.tsx

@@ -51,7 +51,8 @@ const props = {
   needsSaved: true,
   canUpdateCurrentStep: true,
   attempt_number: 0,
-  apiIsPending: false
+  apiIsPending: false,
+  hasFeedback: false
 };
 
 export const Default = () => <ExerciseQuestion {...props} />;

src/components/ExerciseQuestion.tsx

@@ -37,6 +37,7 @@ export interface ExerciseQuestionProps {
   free_response?: string;
   show_all_feedback?: boolean;
   tableFeedbackEnabled?: boolean;
+  hasFeedback?: ExerciseBaseProps['hasFeedback'];
 }
 
 const AttemptsRemaining = ({ count }: { count: number }) => {
@@ -56,15 +57,17 @@ const PublishedComments = ({ published_comments }: { published_comments?: string
 }
 
 export const SaveButton = (props: {
-  disabled: boolean, isWaiting: boolean, attempt_number: number
+  disabled: boolean, isWaiting: boolean, attempt_number: number, willContinue: boolean
 } & React.ComponentPropsWithoutRef<'button'>) => (
   <Button
     {...props}
     waitingText="Saving…"
     isWaiting={props.isWaiting}
     data-test-id="submit-answer-btn"
   >
-    {props.attempt_number == 0 ? 'Submit' : 'Re-submit'}
+    {props.willContinue
+      ? 'Submit & continue'
+      : (props.attempt_number == 0 ? 'Submit' : 'Re-submit')}
   </Button>
 );
 
@@ -93,9 +96,18 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
     is_completed, correct_answer_id, incorrectAnswerId, choicesEnabled, questionNumber,
     answer_id, hasMultipleAttempts, attempts_remaining, published_comments, detailedSolution,
     canAnswer, needsSaved, attempt_number, apiIsPending, onAnswerSave, onNextStep, canUpdateCurrentStep,
-    displaySolution, available_points, free_response, show_all_feedback, tableFeedbackEnabled
+    displaySolution, available_points, free_response, show_all_feedback, tableFeedbackEnabled,
+    hasFeedback
   } = props;
 
+  const [shouldContinue, setShouldContinue] = React.useState(false)
+  React.useEffect(() => {
+    if (shouldContinue && is_completed) {
+      onNextStep(questionNumber - 1);
+      setShouldContinue(false);
+    }
+  }, [onNextStep, questionNumber, shouldContinue, is_completed]);
+
   return (
     <div data-test-id="student-exercise-question">
       <Question
@@ -133,12 +145,18 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
             {detailedSolution && (<div><strong>Detailed solution:</strong> <Content html={detailedSolution} /></div>)}
           </div>
           <div className="controls">
-            {canAnswer && needsSaved ?
+            {(canAnswer && needsSaved) || shouldContinue ?
               <SaveButton
-                disabled={apiIsPending || !answer_id}
-                isWaiting={apiIsPending}
+                disabled={apiIsPending || !answer_id || shouldContinue}
+                isWaiting={apiIsPending || shouldContinue}
                 attempt_number={attempt_number}
-                onClick={() => onAnswerSave(numberfyId(question.id))}
+                onClick={() => {
+                  onAnswerSave(numberfyId(question.id));
+                  if (!hasFeedback) {
+                    setShouldContinue(true);
+                  }
+                }}
+                willContinue={!hasFeedback}
               /> :
               <NextButton onClick={() => onNextStep(questionNumber - 1)} canUpdateCurrentStep={canUpdateCurrentStep} />}
           </div>

src/components/__snapshots__/ExerciseQuestion.spec.tsx.snap

@@ -470,6 +470,165 @@ exports[`ExerciseQuestion renders Save button 1`] = `
 </div>
 `;
 
+exports[`ExerciseQuestion renders Submit & continue button 1`] = `
+<div
+  data-test-id="student-exercise-question"
+>
+  <div
+    className="sc-dkzDqf cYzaBK openstax-question step-card-body has-incorrect-answer"
+    data-question-number={1}
+    data-test-id="question"
+  >
+    <div
+      className="question-stem"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Is this a question?",
+        }
+      }
+      data-question-number={1}
+    />
+    <div
+      className="answers-table"
+    >
+      <div
+        className="openstax-answer"
+      >
+        <section
+          className="answers-answer answer-selected"
+        >
+          <input
+            checked={true}
+            className="answer-input-box"
+            disabled={false}
+            id="1-option-0"
+            name="1-options"
+            onChange={[Function]}
+            type="radio"
+          />
+          <label
+            className="answer-label"
+            htmlFor="1-option-0"
+          >
+            <span
+              className="answer-letter-wrapper"
+            >
+              <button
+                aria-label="Selected Choice A:"
+                className="answer-letter"
+                data-test-id="answer-choice-A"
+                disabled={false}
+                onClick={[Function]}
+              >
+                A
+              </button>
+            </span>
+            <div
+              className="answer-answer"
+            >
+              <span
+                className="answer-content"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "True",
+                  }
+                }
+              />
+            </div>
+          </label>
+        </section>
+      </div>
+      <div
+        className="openstax-answer"
+      >
+        <section
+          className="answers-answer answer-incorrect"
+        >
+          <input
+            checked={false}
+            className="answer-input-box"
+            disabled={false}
+            id="1-option-1"
+            name="1-options"
+            onChange={[Function]}
+            type="radio"
+          />
+          <label
+            className="answer-label"
+            htmlFor="1-option-1"
+          >
+            <span
+              className="answer-letter-wrapper"
+            >
+              <button
+                aria-label="Choice B:"
+                className="answer-letter"
+                data-test-id="answer-choice-B"
+                disabled={true}
+                onClick={[Function]}
+              >
+                B
+              </button>
+            </span>
+            <div
+              className="answer-answer"
+            >
+              <div
+                className="sc-gsnTZi jsjSLp"
+              >
+                Incorrect
+                 Answer
+              </div>
+              <span
+                className="answer-content"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "False",
+                  }
+                }
+              />
+            </div>
+          </label>
+        </section>
+      </div>
+    </div>
+  </div>
+  <div
+    className="sc-hKMtZM eTQwo step-card-footer"
+  >
+    <div
+      className="step-card-footer-inner"
+    >
+      <div
+        className="points"
+        role="status"
+      >
+        <strong>
+          Points: 
+          1.0
+        </strong>
+        <span
+          className="attempts-left"
+        />
+        
+      </div>
+      <div
+        className="controls"
+      >
+        <button
+          className="sc-bczRLJ fLTvYy"
+          data-test-id="submit-answer-btn"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Submit & continue
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ExerciseQuestion renders all attempts remaining 1`] = `
 <div
   data-test-id="student-exercise-question"