Migrate organization add to functional component

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
@@ -14,19 +14,12 @@ import {
 import { OrganizationsAPI } from '@api';
 import { Config } from '@contexts/Config';
 import CardCloseButton from '@components/CardCloseButton';
-
 import OrganizationForm from '../shared/OrganizationForm';
 
-class OrganizationAdd extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.state = { error: '' };
-  }
+function OrganizationAdd({ history, i18n }) {
+  const [formError, setFormError] = useState(null);
 
-  async handleSubmit(values, groupsToAssociate) {
-    const { history } = this.props;
+  const handleSubmit = async (values, groupsToAssociate) => {
     try {
       const { data: response } = await OrganizationsAPI.create(values);
       await Promise.all(
@@ -36,43 +29,37 @@ class OrganizationAdd extends React.Component {
       );
       history.push(`/organizations/${response.id}`);
     } catch (error) {
-      this.setState({ error });
+      setFormError(error);
     }
-  }
+  };
 
-  handleCancel() {
-    const { history } = this.props;
+  const handleCancel = () => {
     history.push('/organizations');
-  }
+  };
 
-  render() {
-    const { error } = this.state;
-    const { i18n } = this.props;
-
-    return (
-      <PageSection>
-        <Card>
-          <CardHeader className="at-u-textRight">
-            <Tooltip content={i18n._(t`Close`)} position="top">
-              <CardCloseButton onClick={this.handleCancel} />
-            </Tooltip>
-          </CardHeader>
-          <CardBody>
-            <Config>
-              {({ me }) => (
-                <OrganizationForm
-                  handleSubmit={this.handleSubmit}
-                  handleCancel={this.handleCancel}
-                  me={me || {}}
-                />
-              )}
-            </Config>
-            {error ? <div>error</div> : ''}
-          </CardBody>
-        </Card>
-      </PageSection>
-    );
-  }
+  return (
+    <PageSection>
+      <Card>
+        <CardHeader className="at-u-textRight">
+          <Tooltip content={i18n._(t`Close`)} position="top">
+            <CardCloseButton onClick={handleCancel} />
+          </Tooltip>
+        </CardHeader>
+        <CardBody>
+          <Config>
+            {({ me }) => (
+              <OrganizationForm
+                handleSubmit={handleSubmit}
+                handleCancel={handleCancel}
+                me={me || {}}
+              />
+            )}
+          </Config>
+          {formError ? <div>error</div> : ''}
+        </CardBody>
+      </Card>
+    </PageSection>
+  );
 }
 
 OrganizationAdd.contextTypes = {