zware/awx
1
0
Fork 0
mirror of https://github.com/ZwareBear/awx.git synced 2026-04-08 17:11:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

decouple App and Login components

Browse Source
This commit is contained in:
Jake McDermott
2019-01-02 01:35:34 -05:00
parent 6efd523db2
commit 9c6df68557
3 changed files with 259 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/App.jsx
View File

@@ -1,6 +1,4 @@
import React, { Fragment } from 'react';
import { ConfigContext } from './context';
import React, { Component } from 'react';
import {
Redirect,
Switch,
@@ -20,15 +18,15 @@ import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
import api from './api';
import { API_LOGOUT, API_CONFIG } from './endpoints';
import { ConfigContext } from './context';
import Login from './pages/Login';
import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo';
import NavExpandableGroup from './components/NavExpandableGroup';
class App extends React.Component {
constructor(props) {
class App extends Component {
constructor (props) {
super(props);
// initialize with a closed navbar if window size is small
@@ -47,13 +45,21 @@ class App extends React.Component {
};
onLogoClick = () => {
this.setState({ activeGroup: 'views_group' });
this.setState({
activeGroup: 'views_group'
});
}
onDevLogout = async () => {
await api.get(API_LOGOUT);
this.setState({ activeGroup: 'views_group', activeItem: 'views_group_dashboard' });
}
this.setState({
activeGroup: 'views_group',
activeItem: 'views_group_dashboard',
});
window.location.replace('/#/login');
};
async componentDidMount() {
// Grab our config data from the API and store in state
@@ -67,80 +73,77 @@ class App extends React.Component {
render () {
const { config, isNavOpen } = this.state;
const { logo, loginInfo, navLabel, routeGroups = [] } = this.props;
const { navLabel = '', routeGroups = [] } = this.props;
const header = (
<PageHeader
showNavToggle
onNavToggle={() => this.onNavToggle()}
logo={(
<TowerLogo
onClick={this.onLogoClick}
/>
)}
toolbar={(
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<HelpDropdown />
</ToolbarItem>
<ToolbarItem>
<LogoutButton
onDevLogout={() => this.onDevLogout()}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
/>
);
const sidebar = (
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={navLabel}>
<NavList>
{routeGroups.map(params => (
<NavExpandableGroup key={params.groupId} {...params} />
))}
</NavList>
</Nav>
)}
/>
);
return (
api.isAuthenticated () ? (
<Switch>
<Route path="/login" render={() => <Redirect to='/home' />} />
<Route exact path="/" render={() => <Redirect to='/home' />} />
<Route render={() => (
<ConfigContext.Provider value={config}>
<Page
usecondensed="True"
header={(
<PageHeader
showNavToggle
onNavToggle={() => this.onNavToggle()}
logo={(
<TowerLogo
onClick={this.onLogoClick}
/>
)}
toolbar={(
<Toolbar>
<ToolbarGroup>
<ToolbarItem>
<HelpDropdown />
</ToolbarItem>
<ToolbarItem>
<LogoutButton
onDevLogout={() => this.onDevLogout()}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
/>
<ConfigContext.Provider value={config}>
<Page
usecondensed="True"
header={header}
sidebar={sidebar}
>
{
//
// Extract a flattened array of all route params from the provided route config
// and use it to render route components.
//
// [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
//
routeGroups
.reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
.map(({ component: Component, path }) => (
<Route
key={path}
path={path}
render={params => (
<Component {...params } />
)}
sidebar={(
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={navLabel}>
<NavList>
{
routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
}
</NavList>
</Nav>
)}
/>
)}
>
{
//
// Extract a flattened array of all route params from the provided route config
// and use it to render route components.
//
// [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
//
routeGroups
.reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
.map(({ component: Component, path }) => (
<Route key={path} path={path} render={params => <Component {...params } />} />
))
}
</Page>
</ConfigContext.Provider>
)} />
</Switch>
) : (
<Switch>
<Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
<Redirect to="/login" />
</Switch>
)
/>
))
}
</Page>
</ConfigContext.Provider>
);
}
}