Display actual error within the form.

src/common/WiFiSettings/ResetWiFiSettings.js

@@ -27,7 +27,6 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
         const module = "wifi";
         ws.subscribe(module)
             .bind(module, "reset", () => {
-                setIsLoading(true);
                 // eslint-disable-next-line no-restricted-globals
                 setTimeout(() => location.reload(), 1000);
             });
@@ -45,6 +44,7 @@ export default function ResetWiFiSettings({ ws, endpoint }) {
 
     function onReset() {
         dismissAlert();
+        setIsLoading(true);
         postReset();
     }
 

src/common/WiFiSettings/__tests__/WiFiSettings.test.js

@@ -39,9 +39,10 @@ describe("<WiFiSettings/>", () => {
     it("should handle error", async () => {
         const webSockets = new WebSockets();
         const { getByText } = render(<WiFiSettings ws={webSockets} ws={webSockets} endpoint={endpoint} resetEndpoint="foo" />);
-        mockJSONError();
+        const errorMessage = "An API error occurred.";
+        mockJSONError(errorMessage);
         await wait(() => {
-            expect(getByText("An error occurred while fetching data.")).toBeTruthy();
+            expect(getByText(errorMessage)).toBeTruthy();
         });
     });
 

src/form/components/ForisForm.js

@@ -11,7 +11,6 @@ import { Prompt } from "react-router-dom";
 
 import { ALERT_TYPES } from "../../bootstrap/Alert";
 import { API_STATE } from "../../api/utils";
-import { ErrorMessage } from "../../utils/ErrorMessage";
 import { formFieldsSize } from "../../bootstrap/constants";
 import { Spinner } from "../../bootstrap/Spinner";
 import { useAlert } from "../../alertContext/AlertContext";
@@ -19,6 +18,7 @@ import { useAPIPost } from "../../api/hooks";
 
 import { useForisModule, useForm } from "../hooks";
 import { STATES as SUBMIT_BUTTON_STATES, SubmitButton } from "./SubmitButton";
+import { ErrorMessage } from "../../utils/ErrorMessage";
 
 ForisForm.propTypes = {
     /** Optional WebSocket object. See `scr/common/WebSockets.js`.
@@ -91,7 +91,7 @@ export function ForisForm({
     children,
 }) {
     const [formState, onFormChangeHandler, resetFormData] = useForm(validator, prepData);
-    const [setAlert] = useAlert();
+    const [setAlert, dismissAlert] = useAlert();
 
     const [forisModuleState] = useForisModule(ws, forisConfig);
     useEffect(() => {
@@ -111,7 +111,7 @@ export function ForisForm({
     }, [postCallback, postState.state, postState.data, setAlert]);
 
     if (forisModuleState.state === API_STATE.ERROR) {
-        return <ErrorMessage />;
+        return <ErrorMessage message={forisModuleState.data} />;
     }
     if (!formState.data) {
         return <Spinner />;
@@ -120,6 +120,7 @@ export function ForisForm({
     function onSubmitHandler(event) {
         event.preventDefault();
         resetFormData();
+        dismissAlert();
         const copiedFormData = JSON.parse(JSON.stringify(formState.data));
         const preparedData = prepDataToSubmit(copiedFormData);
         post({ data: preparedData });

src/utils/ErrorMessage.js

@@ -6,11 +6,18 @@
  */
 
 import React from "react";
+import PropTypes from "prop-types";
 
-export function ErrorMessage() {
+ErrorMessage.propTypes = {
+    message: PropTypes.string,
+};
+
+ErrorMessage.defaultProps = {
+    message: _("An error occurred while fetching data."),
+};
+
+export function ErrorMessage({ message }) {
     return (
-        <p className="text-center text-danger">
-            {_("An error occurred while fetching data.")}
-        </p>
+        <p className="text-center text-danger">{message}</p>
     );
 }