Refactor Hosts into functional component

awx/ui_next/src/screens/Host/Hosts.jsx

@@ -1,5 +1,5 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, useCallback } from 'react';
-import { Route, withRouter, Switch } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
@@ -11,28 +11,18 @@ import HostList from './HostList';
 import HostAdd from './HostAdd';
 import Host from './Host';
 
-class Hosts extends Component {
+function Hosts({ i18n }) {
-  constructor(props) {
+  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
-    super(props);
-
-    const { i18n } = props;
-
-    this.state = {
-      breadcrumbConfig: {
     '/hosts': i18n._(t`Hosts`),
     '/hosts/add': i18n._(t`Create New Host`),
-      },
+  });
-    };
-  }
-
-  setBreadcrumbConfig = host => {
-    const { i18n } = this.props;
 
+  const buildBreadcrumbConfig = useCallback(
+    host => {
       if (!host) {
         return;
       }
-
+      setBreadcrumbConfig({
-    const breadcrumbConfig = {
         '/hosts': i18n._(t`Hosts`),
         '/hosts/add': i18n._(t`Create New Host`),
         [`/hosts/${host.id}`]: `${host.name}`,
@@ -41,40 +31,36 @@ class Hosts extends Component {
         [`/hosts/${host.id}/facts`]: i18n._(t`Facts`),
         [`/hosts/${host.id}/groups`]: i18n._(t`Groups`),
         [`/hosts/${host.id}/completed_jobs`]: i18n._(t`Completed Jobs`),
-    };
+      });
-
+    },
-    this.setState({ breadcrumbConfig });
+    [i18n]
-  };
+  );
-
-  render() {
-    const { match } = this.props;
-    const { breadcrumbConfig } = this.state;
 
   return (
-      <Fragment>
+    <>
       <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
       <PageSection>
         <Card>
           <Switch>
-              <Route path={`${match.path}/add`} render={() => <HostAdd />} />
+            <Route path="/hosts/add">
-              <Route path={`${match.path}/:id`}>
+              <HostAdd />
+            </Route>
+            <Route path="/hosts/:id">
               <Config>
                 {({ me }) => (
-                    <Host
+                  <Host setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
-                      setBreadcrumb={this.setBreadcrumbConfig}
-                      me={me || {}}
-                    />
                 )}
               </Config>
             </Route>
-              <Route path={`${match.path}`} render={() => <HostList />} />
+            <Route path="/hosts">
+              <HostList />
+            </Route>
           </Switch>
         </Card>
       </PageSection>
-      </Fragment>
+    </>
   );
 }
-}
 
 export { Hosts as _Hosts };
-export default withI18n()(withRouter(Hosts));
+export default withI18n()(Hosts);