External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-19 14:57:39 -02:30
Code Issues Packages Projects Releases Wiki Activity

Refactor Hosts into functional component

Browse Source
This commit is contained in:
Marliana Lara
2020-02-26 15:10:17 -05:00
parent 4912cbd2da
commit 033848a605
1 changed files with 48 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
awx/ui_next/src/screens/Host/Hosts.jsx
View File

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