How to de-hackify this code?

[ugultopu]

Working demo

I have a usage question around React. React docs specify Stack Overflow as the place to get support, but nobody was able to provide an answer for my question there (not even a wrong answer), so I want to try asking my question here and hope that the knowledgeable members of the Preact community could help me.

I have implemented a SafeForm component. The idea is, this would be used exactly like the built-in HTML <form> component. However, behind the scenes, it would disable all INPUT (and SELECT and BUTTON) fields while the request is in progress, so that the user wouldn't double-submit a form by mistake, or edit some fields in the form and think that they were able to edit the value of a submitted field. This component would be useful especially when the server is slow to respond, or when the network is slow. After the request has been completed, the fields would be enabled again.

Although I have implemented such a component and it functionally works, the code is pretty hacky. I can't help but think that there must be a better, less hacky and more correct solution to it. However, my limited knowledge of React prevents me from discovering such solution. Hence, I would like to ask the members of the Preact community for their help.

Without further ado, this is how you would use the SafeForm component:

import { useState } from "react";
import SafeForm from "./SafeForm";

export default function Login({ onSuccess }) {
  const [token, setToken] = useState("");

  return (
    <SafeForm
      onSubmit={async () => {
        // Dummy HTTP response. Normally, there would be a `fetch` on
        // the right hand side of the assignment operator.
        const response = { ok: true };

        if (response.ok) onSuccess({ token });
      }}
    >
      <h3>Login</h3>
      <div>
        <label htmlFor="token">Token</label>
        <div>
          <input
            value={token}
            required
            onChange={({ target: { value } }) => {
              setToken(value);
            }}
          />
        </div>
      </div>
      <input type="submit" value="Login" />
    </SafeForm>
  );
}

and this is how the SafeForm component is implemented:

import React, {
  useLayoutEffect,
  useRef,
  useState,
} from "react";

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function disableInputElement(element) {
  const { nodeName, children } = element;

  if (['INPUT', 'SELECT', 'BUTTON'].includes(nodeName)) {
    element.disabled = true;
  }

  for (const child of children) disableInputElement(child);
}

export default function SafeForm({
  submitInfo,
  onSubmit,
  ...props
}) {
  const formRef = useRef(null);
  const [mounted, setMounted] = useState(true);
  const [requestInProgress, setRequestInProgress] = useState(false);

  if (formRef.current) {
    if (requestInProgress) disableInputElement(formRef.current);
  }

  useLayoutEffect(() => { setMounted(true) }, [mounted]);

  return mounted && (
    <form ref={formRef} {...props} onSubmit={async event => {
      event.preventDefault();

      setRequestInProgress(true);
      // For demonstration purposes only. This simulates a network
      // delay. In production code, this would be removed.
      await sleep(1000);
      await onSubmit(event);
      setRequestInProgress(false);
      setMounted(false);
    }}/>
  );
}

The hackiest part here is manually dismounting and re-mounting the component in order to revert (reset) the manual changes that have been done on the DOM (that is, for re-enabling the manually disabled the input fields). For this purpose, a state variable named mounted exists and this variable is set and subsequently unset after the request has been completed.

Previously, SafeForm was implemented as follows:

import React, { cloneElement, useState } from "react";

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function disableInputElement(element) {
  if (!React.isValidElement(element)) return element;

  const { type, props: { children } } = element;

  return cloneElement(
    element,
    { disabled: type === 'input' },
    ...(
      Array.isArray(children)
      ?
      children.map(child => disableInputElement(child))
      :
      [disableInputElement(children)]
    ),
  );
}

export default function SafeForm({ onSubmit, children, submitInfo }) {
  const [requestInProgress, setRequestInProgress] = useState(false);
  const [requestMade, setRequestMade] = useState(false);

  let dummy = React.createElement('div', {}, ...children);

  if (requestInProgress) {
    dummy = disableInputElement(dummy);
  }

  return (
    <form onSubmit={async event => {
      event.preventDefault();

      setRequestInProgress(true);
      await sleep(1000);
      await onSubmit(event);
      setRequestInProgress(false);
      setRequestMade(true);
    }}>
      {dummy.props.children}
    </form>
  );
}

This was fine until I realized that it doesn't work when an INPUT element is declared within the render method of a child, instead of being declared as a child of the SafeForm or one of its descendants.

BONUS: The SafeForm component actually contains functionality to replace an error message placeholder. That is, the user of the SafeForm would declare a placeholder div for any potential error messages to be placed into and the SafeForm component would replace it with the actual HTML elements to show the error message. Example usage:

import { useState } from "react";

import SafeForm from "./SafeForm";

export default function Login({ onSuccess }) {
  const [token, setToken] = useState('');
  const [submitInfo, setSubmitInfo] = useState({
    success: false,
    message: 'Login failed.'
  });

  return (
    <SafeForm
      onSubmit={async () => {
        // Dummy HTTP response. Normally, there would be a `fetch` on
        // the right hand side of the assignment operator.
        const response = {
          ok: false,
          error: 'No such token exists.',
        }

        if (response.ok) {
          setSubmitInfo({
            success: true,
            message: 'Login successful.'
          });
          onSuccess({
            ...(await response.json()),
            token
          });
        } else {
          setSubmitInfo({
            success: false,
            message: `Login failed. ${response.error}`
          });
        }
      }}
      submitInfo={submitInfo}
    >
      <h3>Login</h3>
      <div id="error-message-placeholder"></div>
      <div className="mb-3">
        <label className="form-label" htmlFor="token">Token</label>
        <input className="form-control" id="token" value={token}
          required
          onChange={({ target: { value } }) => { setToken(value); }}
        />
      </div>
      <input className="btn btn-primary" type='submit' value='Login' />
    </SafeForm>
  );
}

and SafeForm is implemented as follows:

import React, {
  useLayoutEffect,
  useRef,
  useState,
} from "react";

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function disableInputElement(element) {
  const { nodeName, children } = element;

  if (['INPUT', 'SELECT', 'BUTTON'].includes(nodeName)) {
    element.disabled = true;
  }

  for (const child of children) disableInputElement(child);
}

function setErrorMessage(element, submitInfo) {
  const { id, children } = element;

  if (id === 'error-message-placeholder') {
    const { success, message } = submitInfo;

    const errorMessage = document.createElement('div');

    errorMessage.setAttribute(
      'class',
      `alert alert-${success ? 'success' : 'info'}`
    );
    errorMessage.appendChild(document.createTextNode(message));

    element.replaceWith(errorMessage); return;
  }

  for (const child of children) setErrorMessage(child, submitInfo);
}

export default function SafeForm({
  submitInfo,
  onSubmit,
  ...props
}) {
  const formRef = useRef(null);
  const [mounted, setMounted] = useState(true);
  const [requestInProgress, setRequestInProgress] = useState(false);
  const [requestMade, setRequestMade] = useState(false);

  if (formRef.current) {
    if (requestInProgress) disableInputElement(formRef.current);
    if (requestMade) setErrorMessage(formRef.current, submitInfo);
  }

  useLayoutEffect(() => { setMounted(true) }, [mounted]);

  return mounted && (
    <form ref={formRef} {...props} onSubmit={async event => {
      event.preventDefault();

      setRequestInProgress(true);
      await sleep(1000);
      await onSubmit(event);
      setRequestInProgress(false);
      setRequestMade(true);
      setMounted(false);
    }}/>
  );
}

Similarly, the issue here is not using (not being able to use?) JSX and instead, creating regular HTML Element objects with the help of the document.createElement method. I believe the proper solution for the first issue would automatically solve this issue as well but in case it doesn't (that is, in case this issue requires a different approach), I wanted to include this here too.

[zim32]

Just wondering.maybe it is easier to put some div on top of form so user will not be able to interact with form at all?