Refactor AsyncForm class to function component component (#989)

* refactor: AsyncForm class to function component

* refactor: wrap handleSubmit in useCallback according to reviewer suggestion

---------

Co-authored-by: Talysson de Oliveira Cassiano <[email protected]>

Author: julialbq

app/assets/javascripts/components/forms/AsyncForm.js

@@ -1,26 +1,23 @@
-import React from 'react';
+import { useCallback, useState } from 'react';
 
-class AsyncForm extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { loading: false };
-    this._handleSubmit = this._handleSubmit.bind(this);
-  }
+const AsyncForm = ({ onSubmit, getFormData, children }) => {
+  const [loading, setLoading] = useState(false);
 
-  _handleSubmit(ev) {
-    ev.preventDefault();
-    this.setState({ loading: true });
-    this.props
-      .onSubmit(this.props.getFormData())
-      .catch(() => this.setState({ loading: false }));
-  }
+  const handleSubmit = useCallback(
+    async ev => {
+      ev.preventDefault();
+      setLoading(true);
+      try {
+        await onSubmit(getFormData());
+        setLoading(false);
+      } catch (error) {
+        setLoading(false);
+      }
+    },
+    [onSubmit, getFormData]
+  );
 
-  render() {
-    return this.props.children({
-      loading: this.state.loading,
-      handleSubmit: this._handleSubmit,
-    });
-  }
-}
+  return children({ loading, handleSubmit });
+};
 
 export default AsyncForm;