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

move wrapper / shared components out of App component

Browse Source
This commit is contained in:
Jake McDermott
2019-01-02 01:30:08 -05:00
parent f975f9fa75
commit 6efd523db2
3 changed files with 267 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/App.jsx
View File

@@ -2,10 +2,8 @@ import React, { Fragment } from 'react';
import { ConfigContext } from './context';
import {
HashRouter as Router,
Redirect,
Switch,
withRouter,
Route,
} from 'react-router-dom';
import {
@@ -19,30 +17,16 @@ import {
ToolbarItem
} from '@patternfly/react-core';
import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
import { I18nProvider, I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import api from './api';
import { API_LOGOUT, API_CONFIG } from './endpoints';
import ja from '../build/locales/ja/messages';
import en from '../build/locales/en/messages';
import Login from './pages/Login';
import Background from './components/Background';
import HelpDropdown from './components/HelpDropdown';
import LogoutButton from './components/LogoutButton';
import TowerLogo from './components/TowerLogo';
import NavExpandableGroup from './components/NavExpandableGroup';
const catalogs = { en, ja };
// Derive the language and the region from global user agent data. Example: es-US
// https://developer.mozilla.org/en-US/docs/Web/API/Navigator
const language = (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage;
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
class App extends React.Component {
constructor(props) {
super(props);
@@ -83,94 +67,80 @@ class App extends React.Component {
render () {
const { config, isNavOpen } = this.state;
// extract a flattened array of all routes from the provided route config
const { logo, loginInfo, routeGroups = [] } = this.props;
const { logo, loginInfo, navLabel, routeGroups = [] } = this.props;
return (
<Router>
<I18nProvider
language={languageWithoutRegionCode}
catalogs={catalogs}
>
<I18n>
{({ i18n }) => (
api.isAuthenticated () ? (
<ConfigContext.Provider value={config}>
<Switch>
<Route path="/login" render={() => <Redirect to='/home' />} />
<Route exact path="/" render={() => <Redirect to='/home' />} />
<Route render={() => (
<Background>
<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>
)}
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()}
/>
)}
sidebar={(
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={i18n._("Primary Navigation")}>
<NavList>
{
routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
}
</NavList>
</Nav>
)}
/>
)}
>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
)}
/>
)}
sidebar={(
<PageSidebar
isNavOpen={isNavOpen}
nav={(
<Nav aria-label={navLabel}>
<NavList>
{
//
// Extract a flattened array of all route params from the provided route groups
// and use it to create the 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 } />} />
))
routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
}
</Page>
</Background>
)} />
</Switch>
</ConfigContext.Provider>
) : (
<Switch>
<Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
<Redirect to="/login" />
</Switch>
)
)}
</I18n>
</I18nProvider>
</Router>
</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>
)
);
}
}