move router setup to RootProvider

This commit is contained in:
John Mitchell
2019-04-11 17:07:46 -04:00
parent 85b9b4f896
commit 64aecb85fa
4 changed files with 217 additions and 208 deletions

View File

@@ -84,7 +84,7 @@ In the root of `/src`, there are a few files which are used to initialize the re
- Sets standard page layout, about modal, and root dialog modal. - Sets standard page layout, about modal, and root dialog modal.
- **RootProvider.jsx** - **RootProvider.jsx**
- Sets up all context providers. - Sets up all context providers.
- Initializes i18n. - Initializes i18n and router
### Naming files ### Naming files

View File

@@ -1,7 +1,13 @@
import React from 'react';
import { mount } from 'enzyme'; import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import { main } from '../src/index'; import { main } from '../src/index';
const render = template => mount(template); const render = template => mount(
<MemoryRouter>
{template}
</MemoryRouter>
);
describe('index.jsx', () => { describe('index.jsx', () => {
test('index.jsx loads without issue', () => { test('index.jsx loads without issue', () => {

View File

@@ -3,6 +3,10 @@ import {
I18nProvider, I18nProvider,
} from '@lingui/react'; } from '@lingui/react';
import {
HashRouter
} from 'react-router-dom';
import { NetworkProvider } from './contexts/Network'; import { NetworkProvider } from './contexts/Network';
import { RootDialogProvider } from './contexts/RootDialog'; import { RootDialogProvider } from './contexts/RootDialog';
import { ConfigProvider } from './contexts/Config'; import { ConfigProvider } from './contexts/Config';
@@ -25,18 +29,20 @@ class RootProvider extends Component {
const language = getLanguage(navigator); const language = getLanguage(navigator);
return ( return (
<I18nProvider <HashRouter>
language={language} <I18nProvider
catalogs={catalogs} language={language}
> catalogs={catalogs}
<RootDialogProvider> >
<NetworkProvider> <RootDialogProvider>
<ConfigProvider> <NetworkProvider>
{children} <ConfigProvider>
</ConfigProvider> {children}
</NetworkProvider> </ConfigProvider>
</RootDialogProvider> </NetworkProvider>
</I18nProvider> </RootDialogProvider>
</I18nProvider>
</HashRouter>
); );
} }
} }

View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { import {
HashRouter,
Route, Route,
Switch, Switch,
Redirect Redirect
@@ -54,199 +53,197 @@ export function main (render) {
const el = document.getElementById('app'); const el = document.getElementById('app');
return render( return render(
<HashRouter> <RootProvider>
<RootProvider> <I18n>
<I18n> {({ i18n }) => (
{({ i18n }) => ( <Background>
<Background> <Switch>
<Switch> <Route
<Route path="/login"
path="/login" render={() => (
render={() => ( <Config>
<Config> {({ custom_logo, custom_login_info }) => (
{({ custom_logo, custom_login_info }) => ( <Login
<Login logo={custom_logo}
logo={custom_logo} loginInfo={custom_login_info}
loginInfo={custom_login_info} />
/> )}
)} </Config>
</Config> )}
)} />
/> <Route exact path="/" render={() => <Redirect to="/home" />} />
<Route exact path="/" render={() => <Redirect to="/home" />} /> <Route
<Route render={() => (
render={() => ( <App
<App navLabel={i18n._(t`Primary Navigation`)}
navLabel={i18n._(t`Primary Navigation`)} routeGroups={[
routeGroups={[ {
{ groupTitle: i18n._(t`Views`),
groupTitle: i18n._(t`Views`), groupId: 'views_group',
groupId: 'views_group', routes: [
routes: [ {
{ title: i18n._(t`Dashboard`),
title: i18n._(t`Dashboard`), path: '/home',
path: '/home', component: Dashboard
component: Dashboard },
}, {
{ title: i18n._(t`Jobs`),
title: i18n._(t`Jobs`), path: '/jobs',
path: '/jobs', component: Jobs
component: Jobs },
}, {
{ title: i18n._(t`Schedules`),
title: i18n._(t`Schedules`), path: '/schedules',
path: '/schedules', component: Schedules
component: Schedules },
}, {
{ title: i18n._(t`My View`),
title: i18n._(t`My View`), path: '/portal',
path: '/portal', component: Portal
component: Portal },
}, ],
], },
}, {
{ groupTitle: i18n._(t`Resources`),
groupTitle: i18n._(t`Resources`), groupId: 'resources_group',
groupId: 'resources_group', routes: [
routes: [ {
{ title: i18n._(t`Templates`),
title: i18n._(t`Templates`), path: '/templates',
path: '/templates', component: Templates
component: Templates },
}, {
{ title: i18n._(t`Credentials`),
title: i18n._(t`Credentials`), path: '/credentials',
path: '/credentials', component: Credentials
component: Credentials },
}, {
{ title: i18n._(t`Projects`),
title: i18n._(t`Projects`), path: '/projects',
path: '/projects', component: Projects
component: Projects },
}, {
{ title: i18n._(t`Inventories`),
title: i18n._(t`Inventories`), path: '/inventories',
path: '/inventories', component: Inventories
component: Inventories },
}, {
{ title: i18n._(t`Inventory Scripts`),
title: i18n._(t`Inventory Scripts`), path: '/inventory_scripts',
path: '/inventory_scripts', component: InventoryScripts
component: InventoryScripts },
}, ],
], },
}, {
{ groupTitle: i18n._(t`Access`),
groupTitle: i18n._(t`Access`), groupId: 'access_group',
groupId: 'access_group', routes: [
routes: [ {
{ title: i18n._(t`Organizations`),
title: i18n._(t`Organizations`), path: '/organizations',
path: '/organizations', component: Organizations
component: Organizations },
}, {
{ title: i18n._(t`Users`),
title: i18n._(t`Users`), path: '/users',
path: '/users', component: Users
component: Users },
}, {
{ title: i18n._(t`Teams`),
title: i18n._(t`Teams`), path: '/teams',
path: '/teams', component: Teams
component: Teams },
}, ],
], },
}, {
{ groupTitle: i18n._(t`Administration`),
groupTitle: i18n._(t`Administration`), groupId: 'administration_group',
groupId: 'administration_group', routes: [
routes: [ {
{ title: i18n._(t`Credential Types`),
title: i18n._(t`Credential Types`), path: '/credential_types',
path: '/credential_types', component: CredentialTypes
component: CredentialTypes },
}, {
{ title: i18n._(t`Notifications`),
title: i18n._(t`Notifications`), path: '/notification_templates',
path: '/notification_templates', component: NotificationTemplates
component: NotificationTemplates },
}, {
{ title: i18n._(t`Management Jobs`),
title: i18n._(t`Management Jobs`), path: '/management_jobs',
path: '/management_jobs', component: ManagementJobs
component: ManagementJobs },
}, {
{ title: i18n._(t`Instance Groups`),
title: i18n._(t`Instance Groups`), path: '/instance_groups',
path: '/instance_groups', component: InstanceGroups
component: InstanceGroups },
}, {
{ title: i18n._(t`Integrations`),
title: i18n._(t`Integrations`), path: '/applications',
path: '/applications', component: Applications
component: Applications },
}, ],
], },
}, {
{ groupTitle: i18n._(t`Settings`),
groupTitle: i18n._(t`Settings`), groupId: 'settings_group',
groupId: 'settings_group', routes: [
routes: [ {
{ title: i18n._(t`Authentication`),
title: i18n._(t`Authentication`), path: '/auth_settings',
path: '/auth_settings', component: AuthSettings
component: AuthSettings },
}, {
{ title: i18n._(t`Jobs`),
title: i18n._(t`Jobs`), path: '/jobs_settings',
path: '/jobs_settings', component: JobsSettings
component: JobsSettings },
}, {
{ title: i18n._(t`System`),
title: i18n._(t`System`), path: '/system_settings',
path: '/system_settings', component: SystemSettings
component: SystemSettings },
}, {
{ title: i18n._(t`User Interface`),
title: i18n._(t`User Interface`), path: '/ui_settings',
path: '/ui_settings', component: UISettings
component: UISettings },
}, {
{ title: i18n._(t`License`),
title: i18n._(t`License`), path: '/license',
path: '/license', component: License
component: License },
}, ],
], },
}, ]}
]} render={({ routeGroups }) => (
render={({ routeGroups }) => ( <Switch>
<Switch> {routeGroups
{routeGroups .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
.reduce((allRoutes, { routes }) => allRoutes.concat(routes), []) .map(({ component: PageComponent, path }) => (
.map(({ component: PageComponent, path }) => ( <Route
<Route key={path}
key={path} path={path}
path={path} render={({ match }) => (
render={({ match }) => ( <PageComponent match={match} />
<PageComponent match={match} /> )}
)} />
/> ))
)) .concat([
.concat([ <NotifyAndRedirect key="redirect" to="/" />
<NotifyAndRedirect key="redirect" to="/" /> ])}
])} </Switch>
</Switch> )}
)} />
/> )}
)} />
/> </Switch>
</Switch> </Background>
</Background> )}
)} </I18n>
</I18n> </RootProvider>, el || document.createElement('div')
</RootProvider>
</HashRouter>, el || document.createElement('div')
); );
} }