External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 19:10:07 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6668 from nixocio/ui_refactor_users_functional

Browse Source 
Modify Users component to be function based

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-04-13 18:35:57 +00:00 committed by GitHub
commit 2830cdfdeb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
awx/ui_next/src/screens/User/Users.jsx
View File

@ -1,5 +1,5 @@
import React, { Component, Fragment } from 'react';
import { Route, withRouter, Switch } from 'react-router-dom';
import React, { Fragment, useState } from 'react';
import { Route, useRouteMatch, Switch } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@ -10,28 +10,19 @@ import UsersList from './UserList/UserList';
import UserAdd from './UserAdd/UserAdd';
import User from './User';
class Users extends Component {
constructor(props) {
super(props);
const { i18n } = props;
this.state = {
breadcrumbConfig: {
'/users': i18n._(t`Users`),
'/users/add': i18n._(t`Create New User`),
},
};
}
setBreadcrumbConfig = user => {
const { i18n } = this.props;
function Users({ i18n }) {
const [breadcrumbConfig, setBreadcrumbConfig] = useState({
'/users': i18n._(t`Users`),
'/users/add': i18n._(t`Create New User`),
});
const match = useRouteMatch();
const addUserBreadcrumb = user => {
if (!user) {
return;
}
const breadcrumbConfig = {
setBreadcrumbConfig({
'/users': i18n._(t`Users`),
'/users/add': i18n._(t`Create New User`),
[`/users/${user.id}`]: `${user.username}`,
@ -41,42 +32,30 @@ class Users extends Component {
[`/users/${user.id}/teams`]: i18n._(t`Teams`),
[`/users/${user.id}/organizations`]: i18n._(t`Organizations`),
[`/users/${user.id}/tokens`]: i18n._(t`Tokens`),
};
this.setState({ breadcrumbConfig });
});
};
render() {
const { match, history, location } = this.props;
const { breadcrumbConfig } = this.state;
return (
<Fragment>
<Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
<Switch>
<Route path={`${match.path}/add`}>
<UserAdd />
</Route>
<Route path={`${match.path}/:id`}>
<Config>
{({ me }) => (
<User
history={history}
location={location}
setBreadcrumb={this.setBreadcrumbConfig}
me={me || {}}
/>
)}
</Config>
</Route>
<Route path={`${match.path}`}>
<UsersList />
</Route>
</Switch>
</Fragment>
);
}
return (
<Fragment>
<Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
<Switch>
<Route path={`${match.path}/add`}>
<UserAdd />
</Route>
<Route path={`${match.path}/:id`}>
<Config>
{({ me }) => (
<User setBreadcrumb={addUserBreadcrumb} me={me || {}} />
)}
</Config>
</Route>
<Route path={`${match.path}`}>
<UsersList />
</Route>
</Switch>
</Fragment>
);
}
export { Users as _Users };
export default withI18n()(withRouter(Users));
export default withI18n()(Users);