Merge pull request #453 from DavinderJolly/snekbox-results-feedback

Fix rendering error message for failed unit tests.

1 files changed, 31 insertions, 7 deletions

diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
index 082be23..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 {
@@ -232,6 +233,9 @@ function FormPage(): JSX.Element {
 
             const questionRef = refMap.get(question.id);
             if (questionRef && questionRef.current) {
+                if(questionRef.current.props.question.type == QuestionType.Code){
+                    questionRef.current.props.public_state.set("unittestsFailed", false);
+                }
                 questionRef.current.validateField();
             }
             // In case when field is invalid, add this to invalid fields list.
@@ -263,7 +267,6 @@ function FormPage(): JSX.Element {
             return;
         }
 
-        setSending(true);
 
         const answers: { [key: string]: unknown } = {};
         questions.forEach(prop => {
@@ -296,12 +299,33 @@ function FormPage(): JSX.Element {
                     answers[question.id] = prop.props.public_state.get("value");
             }
         });
-
-        await ApiClient.post(`forms/submit/${id}`, {response: answers});
-        setSending(false);
-        setSent(true);
+        await ApiClient.post(`forms/submit/${id}`, { response: answers })
+            .then(() => {
+                setSending(true);
+                setSending(false);
+                setSent(true);
+            })
+            .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}/>