External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-24 07:51:23 -03: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
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
1 changed files with 48 additions and 62 deletions
Show Stats 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 { Route, withRouter, Switch } from 'react-router-dom';
import React, { useState, useCallback } from 'react';
import { Route, Switch } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@ -11,70 +11,56 @@ import HostList from './HostList';
import HostAdd from './HostAdd';
import Host from './Host';
class Hosts extends Component {
constructor(props) {
super(props);
function Hosts({ i18n }) {
const [breadcrumbConfig, setBreadcrumbConfig] = useState({
'/hosts': i18n._(t`Hosts`),
'/hosts/add': i18n._(t`Create New Host`),
});
const { i18n } = props;
this.state = {
breadcrumbConfig: {
const buildBreadcrumbConfig = useCallback(
host => {
if (!host) {
return;
}
setBreadcrumbConfig({
'/hosts': i18n._(t`Hosts`),
'/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 => {
const { i18n } = this.props;
if (!host) {
return;
}
const breadcrumbConfig = {
'/hosts': i18n._(t`Hosts`),
'/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`),
};
this.setState({ breadcrumbConfig });
};
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={`${match.path}/:id`}>
<Config>
{({ me }) => (
<Host
setBreadcrumb={this.setBreadcrumbConfig}
me={me || {}}
/>
)}
</Config>
</Route>
<Route path={`${match.path}`} render={() => <HostList />} />
</Switch>
</Card>
</PageSection>
</Fragment>
);
}
return (
<>
<Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
<PageSection>
<Card>
<Switch>
<Route path="/hosts/add">
<HostAdd />
</Route>
<Route path="/hosts/:id">
<Config>
{({ me }) => (
<Host setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
)}
</Config>
</Route>
<Route path="/hosts">
<HostList />
</Route>
</Switch>
</Card>
</PageSection>
</>
);
}
export { Hosts as _Hosts };
export default withI18n()(withRouter(Hosts));
export default withI18n()(Hosts);