Fix rendering error message for failed unit tests.

fix rendering of error message by updating public_state prop before updating state, and only catch 422 status code in FormPage

2 files changed, 22 insertions, 16 deletions

diff --git a/src/components/Question.tsx b/src/components/Question.tsx
index 3b63f07..ebacb4a 100644
--- a/src/components/Question.tsx
+++ b/src/components/Question.tsx
@@ -47,8 +47,8 @@ class RenderedQuestion extends React.Component<QuestionProp> {
     }
 
     setPublicState(target: string, value: string | boolean | null, callback?:() => void): void {
-        this.setState({[target]: value}, callback);
         this.props.public_state.set(target, value);
+        this.setState({[target]: value}, callback);
     }
 
     // This is here to allow dynamic selection between the general handler, textarea, and code field handlers.
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index c281729..f21e4f0 100644
--- a/src/pages/FormPage.tsx
+++ b/src/pages/FormPage.tsx
@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import React, { SyntheticEvent, useEffect, useState, createRef } from "react";
 import { useParams } from "react-router";
 import { PropagateLoader } from "react-spinners";
+import { AxiosError } from "axios";
 
 import HeaderBar from "../components/HeaderBar";
 import RenderedQuestion from "../components/Question";
@@ -89,7 +90,7 @@ class Navigation extends React.Component<NavigationProps> {
 
     constructor(props: NavigationProps) {
         super(props);
-        this.setState({"logged_in": false});
+        this.state = {"logged_in": false};
     }
 
     render(): JSX.Element {
@@ -298,28 +299,33 @@ function FormPage(): JSX.Element {
                     answers[question.id] = prop.props.public_state.get("value");
             }
         });
-
-        await ApiClient.post(`forms/submit/${id}`, {response: answers})
+        await ApiClient.post(`forms/submit/${id}`, { response: answers })
             .then(() => {
                 setSending(true);
                 setSending(false);
                 setSent(true);
             })
-            .catch(err => {
-                // Validation on a submitted code questions
-                const questionId = err.response.data.test_results[0].question_id;
-
-                questions.forEach((prop) => {
-                    const question: Question = prop.props.question;
-                    const questionRef = refMap.get(question.id);
-                    if (question.id === questionId){
-                        prop.props.public_state.set("unittestsFailed", true);
-                        questionRef.current.validateField();
+            .catch((err: AxiosError) => {
+                switch (err.response.status) {
+                    case 422: {
+                        // Validation on a submitted code questions
+                        const questionId =
+                            err.response.data.test_results[0].question_id;
+                        questions.forEach((prop) => {
+                            const question: Question = prop.props.question;
+                            const questionRef = refMap.get(question.id);
+                            if (question.id === questionId) {
+                                prop.props.public_state.set("unittestsFailed", true);
+                                questionRef.current.validateField();
+                            }
+                        });
+                        break;
                     }
-                });
+                    default:
+                        throw err;
+                }
             });
     }
-
     return (
         <div>
             <HeaderBar title={form.name} description={form.description}/>