Added ability to customize html-static-task-example submit button

mephisto/abstractions/blueprints/static_html_task/source/dev/app.jsx

@@ -10,6 +10,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Button } from "react-bootstrap";
 import { useMephistoTask, postData } from "mephisto-task";
+import { useMephistoGlobalConfig } from "./hooks";
 const axios = require("axios");
 
 /* global
@@ -98,27 +99,20 @@ function MainApp() {
 
 function SubmitFrame({ children, onSubmit, currentTask }) {
   const [submitting, setSubmitting] = React.useState(false);
-  const [isSubmitButtonHidden, setIsSubmitButtonHidden] = React.useState(false);
-
-  const handleHideSubmitButtonEvent = React.useCallback(
-    (hideValue) => {
-      if (typeof hideValue == "boolean") setIsSubmitButtonHidden(hideValue);
-    },
-    [setIsSubmitButtonHidden]
+  const [
+    isSubmitButtonHidden,
+    setIsSubmitButtonHidden,
+  ] = useMephistoGlobalConfig(
+    "HIDE_SUBMIT_BUTTON",
+    false,
+    (val) => typeof val === "boolean"
   );
 
   React.useEffect(() => {
     // Reset submitting when switching from onboarding
     setSubmitting(false);
   }, []);
 
-  React.useEffect(() => {
-    window._MEPHISTO_CONFIG_.EVENT_EMITTER.on(
-      "HIDE_SUBMIT_BUTTON",
-      handleHideSubmitButtonEvent
-    );
-  }, [setIsSubmitButtonHidden]);
-
   function handleFormSubmit(event) {
     event.preventDefault();
     setSubmitting(true);

mephisto/abstractions/blueprints/static_html_task/source/dev/hooks.js

@@ -0,0 +1,33 @@
+import { useState, useCallback, useEffect } from "react";
+
+/**
+ * This hook is to be used with events that are supposed to update state when they are consumed.
+ * @param {string} eventName
+ * @param {any} defaultValue
+ * @param {function} validatorFunction
+ * @returns [any any]
+ */
+export function useMephistoGlobalConfig(
+  eventName,
+  defaultValue,
+  validatorFunction
+) {
+  const [configState, setConfigState] = useState(defaultValue ?? false);
+
+  const handleEvent = useCallback(
+    (eventValue) => {
+      if (validatorFunction) {
+        if (validatorFunction(eventValue)) {
+          setConfigState(eventValue);
+        }
+      } else setConfigState(eventValue);
+    },
+    [setConfigState]
+  );
+
+  useEffect(() => {
+    window._MEPHISTO_CONFIG_.EVENT_EMITTER.on(eventName, handleEvent);
+  }, [setConfigState]);
+
+  return [configState, setConfigState];
+}