remove conditional redirect component

__tests__/components/ConditionalRedirect.test.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import {
-  Route,
-  Redirect
-} from 'react-router-dom';
-import { shallow } from 'enzyme';
-import ConditionalRedirect from '../../src/components/ConditionalRedirect';
-
-describe('<ConditionalRedirect />', () => {
-  test('renders Redirect when shouldRedirect is passed truthy func', () => {
-    const truthyFunc = () => true;
-    const shouldHaveRedirectChild = shallow(
-      <ConditionalRedirect
-        shouldRedirect={() => truthyFunc()}
-      />
-    );
-    const redirectChild = shouldHaveRedirectChild.find(Redirect);
-    expect(redirectChild.length).toBe(1);
-    const routeChild = shouldHaveRedirectChild.find(Route);
-    expect(routeChild.length).toBe(0);
-  });
-
-  test('renders Route when shouldRedirect is passed falsy func', () => {
-    const falsyFunc = () => false;
-    const shouldHaveRouteChild = shallow(
-      <ConditionalRedirect
-        shouldRedirect={() => falsyFunc()}
-      />
-    );
-    const routeChild = shouldHaveRouteChild.find(Route);
-    expect(routeChild.length).toBe(1);
-    const redirectChild = shouldHaveRouteChild.find(Redirect);
-    expect(redirectChild.length).toBe(0);
-  });
-});

src/App.jsx

@@ -5,7 +5,8 @@ import {
   HashRouter as Router,
   Redirect,
   Switch,
-  withRouter
+  withRouter,
+  Route,
 } from 'react-router-dom';
 import {
   BackgroundImage,
@@ -28,12 +29,10 @@ 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 HelpDropdown from './components/HelpDropdown';
 import LogoutButton from './components/LogoutButton';
 import TowerLogo from './components/TowerLogo';
-import ConditionalRedirect from './components/ConditionalRedirect';
 import NavExpandableGroup from './components/NavExpandableGroup';
 
 const catalogs = { en, ja };
@@ -61,6 +60,7 @@ class App extends React.Component {
   constructor(props) {
     super(props);
 
+    // initialize with a closed navbar if window size is small
     const isNavOpen = typeof window !== 'undefined'
       && window.innerWidth >= parseInt(breakpointMd.value, 10);
 
@@ -95,10 +95,9 @@ class App extends React.Component {
   }
 
   render () {
-    const { isNavOpen } = this.state;
+    const { config, isNavOpen } = this.state;
-    const { logo, loginInfo, history, routeConfig = [] } = this.props;
     // extract a flattened array of all routes from the provided route config
-    const allRoutes = routeConfig.reduce((flattened, { routes }) => flattened.concat(routes), []);
+    const { logo, loginInfo, routeGroups = [] } = this.props;
 
     return (
       <Router>
@@ -108,22 +107,25 @@ class App extends React.Component {
         >
           <I18n>
             {({ i18n }) => (
-              <Fragment>
+              api.isAuthenticated () ? (
-                <ConfigContext.Provider>
+                <ConfigContext.Provider value={config}>
-                  <BackgroundImage src={backgroundConfig} />
                   <Switch>
-                    <ConditionalRedirect
+                    <Route path="/login" render={() => <Redirect to='/home' />} />
-                      shouldRedirect={() => api.isAuthenticated()}
+                    <Route exact path="/" render={() => <Redirect to='/home' />} />
-                      redirectPath="/"
+                    <Route render={() => (
-                      path="/login"
-                      component={() => <Login logo={logo} loginInfo={loginInfo} />}
-                    />
                       <Fragment>
+                        <BackgroundImage src={backgroundConfig} />
                         <Page
                           usecondensed="True"
                           header={(
                             <PageHeader
-                            logo={<TowerLogo onClick={this.onLogoClick} />}
+                              showNavToggle
+                              onNavToggle={() => this.onNavToggle()}
+                              logo={(
+                                <TowerLogo
+                                  onClick={this.onLogoClick}
+                                />
+                              )}
                               toolbar={(
                                 <Toolbar>
                                   <ToolbarGroup>
@@ -131,13 +133,13 @@ class App extends React.Component {
                                       <HelpDropdown />
                                     </ToolbarItem>
                                     <ToolbarItem>
-                                    <LogoutButton onDevLogout={() => this.onDevLogout()} />
+                                      <LogoutButton
+                                        onDevLogout={() => this.onDevLogout()}
+                                      />
                                     </ToolbarItem>
                                   </ToolbarGroup>
                                 </Toolbar>
                               )}
-                            showNavToggle
-                            onNavToggle={this.onNavToggle}
                             />
                           )}
                           sidebar={(
@@ -146,44 +148,39 @@ class App extends React.Component {
                               nav={(
                                 <Nav aria-label={i18n._("Primary Navigation")}>
                                   <NavList>
-                                  { routeConfig.map(({ groupId, routes, title }) => (
+                                  {
-                                    <NavExpandableGroup
+                                    routeGroups.map(params => <NavExpandableGroup key={params.groupId} {...params} />)
-                                      key={groupId}
+                                  }
-                                      groupId={groupId}
-                                      title={i18n._(title)}
-                                      routes={routes.map(route => ({
-                                        path: route.path,
-                                        component: route.component,
-                                        title: i18n._(route.title)
-                                      }))}
-                                    />
-                                  ))}
                                   </NavList>
                                 </Nav>
                               )}
                             />
                           )}
                         >
-                        <ConditionalRedirect
+                        {
-                          shouldRedirect={() => !api.isAuthenticated()}
+                          //
-                          redirectPath="/login"
+                          // Extract a flattened array of all route params from the provided route groups
-                          exact path="/"
+                          // and use it to create the route components.
-                          component={() => (<Redirect to="/home" />)}
+                          //
-                        />
+                          // [{ routes }, { routes }] -> [route, route, route] -> (<Route/><Route/><Route/>)
-                        { allRoutes.map(({ component, path }) => (
+                          //
-                          <ConditionalRedirect
+                          routeGroups
-                            key={path}
+                            .reduce((allRoutes, { routes }) => allRoutes.concat(routes), [])
-                            path={path}
+                            .map(({ component: Component, path }) => (
-                            redirectPath="/login"
+                              <Route key={path} path={path} render={params => <Component {...params } />} />
-                            shouldRedirect={() => !api.isAuthenticated()}
+                            ))
-                            component={component}
+                        }
-                          />
-                        ))}
                         </Page>
                       </Fragment>
+                    )} />
                   </Switch>
                 </ConfigContext.Provider>
-              </Fragment>
+              ) : (
+                <Switch>
+                  <Route path="/login" render={() => <Login logo={logo} loginInfo={loginInfo} />} />
+                  <Redirect to="/login" />
+                </Switch>
+              )
             )}
           </I18n>
         </I18nProvider>

src/components/ConditionalRedirect.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import {
-  Route,
-  Redirect
-} from 'react-router-dom';
-
-const ConditionalRedirect = ({
-  component: Component,
-  shouldRedirect,
-  redirectPath,
-  location,
-  ...props
-}) => (shouldRedirect() ? (
-  <Redirect to={{
-    pathname: redirectPath,
-    state: { from: location }
-  }}
-  />
-) : (
-  <Route {...props} render={rest => (<Component {...rest} />)} />
-));
-
-export default ConditionalRedirect;