Simplify loading of the application

src/components/Content/Content.js

@@ -1,23 +1,17 @@
 import React, { Component } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
-import Error from '../../scenes/Error/Error';
-
-import { defineCustomElements } from 'corporate-ui-dev';
-
-defineCustomElements(['c-content']);
+import { routes } from '../../routes';
 
 class Content extends Component {
   render() {
     return (
       <c-content>
         <Switch>
-          {this.props.items.map((item, key) => [
-              <Route exact path={item.url} component={item.ctrl} key={key} {...item.attrs}/>,
-              <Route path={item.url +'/:id'} component={item.ctrl} key={key} /> 
-            ]
-          )}
-          <Route component={Error} />
+          {routes.map((item, key) => [
+            <Route exact path={item.url} component={item.ctrl} key={key} {...item.attrs}/>,
+            <Route path={item.url + '/:id'} component={item.ctrl} key={key} />
+          ])}
         </Switch>
       </c-content>
     );

src/components/Header/Header.js

@@ -1,102 +1,16 @@
 import React, { Component } from 'react';
 import { NavLink } from 'react-router-dom';
-import Content from '../Content/Content'
-import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import data from './../../../package.json';
 
+// CSS
 import './Header.scss';
 
-import { defineCustomElements } from 'corporate-ui-dev';
-
-defineCustomElements(['c-header', 'c-navigation']);
-
-const Subnav = (props) => {
-  if(props.item && props.item.children) {
-    return  (
-      <c-navigation slot="sub" active target={'/' + data.name + props.item.url} expand="true">
-      { props.item.children.map((child, key) => 
-        <NavLink 
-          activeClassName="active"
-          to={props.item.url + child.url}
-          key={key} 
-          slot= {child.type + '-items'}
-          >{child.name}
-        </NavLink> ) }
-      </c-navigation>
-    )
-
-  } else {
-    return '';
-  }
-}
-
 class Header extends Component {
-  constructor(props) {
-    super(props);
-    this.toggle = this.toggle.bind(this);
-    this.onLoadActive = {};
-    this.state = {
-      active: {},
-      dropdownOpen: false
-    };
-  }
-
-  setActive(item) {
-    this.setState({ active: item });
-  }
-
-  toggle() {
-    this.setState(prevState => ({
-      dropdownOpen: !prevState.dropdownOpen
-    }));
-  }
-
-  matchUrl = (match, location) => {
-    const activeSegment = location.pathname.match(/^\/+\w*/gm);
-    if(match) {
-      this.onLoadActive = this.props.items.find(item => {
-        return item.url === activeSegment[0];
-      })
-    }
-    return match;
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if(prevState.active !== this.onLoadActive) this.setActive(this.onLoadActive)
-  }
-
   render() {
-    return [
+    return (
       <c-header site-name="App">
         <NavLink to="/global" slot="items">global</NavLink>
-      </c-header>,
-      <c-navigation>
-      {this.props.items.map((item, key) => 
-        <NavLink 
-          activeClassName="active"
-          to={item.url}
-          key={key} 
-          className={item.children ? 'parent' : ''}
-          slot= {item.type + '-items'} {...item.attrs}
-          onClick={() => this.setActive(item)}
-          isActive={this.matchUrl}
-          >{item.name}
-        </NavLink> 
-      )}
-
-      <UncontrolledDropdown setActiveFromChild slot="secondary-items">
-        <DropdownToggle tag="a" className="nav-item nav-link" caret>
-          User
-        </DropdownToggle>
-        <DropdownMenu right={true}>
-          <DropdownItem tag={NavLink} to="/user/profile">Profile</DropdownItem>
-          <DropdownItem tag={NavLink} to="/user/settings">Settings</DropdownItem>
-        </DropdownMenu>
-      </UncontrolledDropdown>
-
-      <Subnav item={ this.state.active } ctrl={Content}/>
-    </c-navigation>
-    ];
+      </c-header>
+    );
   }
 }
 

src/components/Header/Header.scss

@@ -1,19 +1,3 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-
-@import '~bootstrap/scss/dropdown';
-
-
-.dropdown-toggle {
-  padding:0;
-  cursor: pointer;
-  color: #909090;
-
-  &:after {
-    margin-right: 25px;
-  }
-  .show & {
-    color: #041e42;
-  }
-}

src/components/Navigation/Navigation.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+import { withRouter } from 'react-router';
+
+import { routes } from '../../routes';
+
+// CSS
+import './Navigation.scss';
+
+const NavItem = (props) => (
+  <NavLink 
+    activeClassName="active"
+    to={((props.parent || {}).url || '') + props.item.url || ''}
+    className={props.item.children ? 'parent' : ''}
+    slot= {props.item.type + '-items'}
+    isActive={() => props.active}
+    { ...props.item.attrs }
+    >{props.item.name}
+  </NavLink> 
+);
+
+class Navigation extends Component {
+  constructor(props) {
+    super(props);
+
+    this.parent = ''
+    this.active = {}
+
+    this.setActive();
+
+    this.props.history.listen((location) => this.setActive(location));
+  }
+
+  setActive(location=this.props.location) {
+    this.parent = '/' + location.pathname.split('/')[1]
+    this.active = routes.find(item => item.url === this.parent) || {}
+  }
+
+  render() {
+    return (
+      <c-navigation>
+        {routes.map((item, key) => 
+          <NavItem item={item} active={item.url === this.parent} key={key} />
+        )}
+
+        <div className="dropdown" slot="secondary-items">
+          <a className="dropdown-toggle" href="#" data-toggle="dropdown">User</a>
+
+          <div className="dropdown-menu">
+            <NavLink to="/user/profile" className="dropdown-item">Profile</NavLink>
+            <NavLink to="/user/setting" className="dropdown-item">Settings</NavLink>
+          </div>
+        </div>
+
+        <c-navigation slot="sub" caption={this.active.name} active={this.active.children} target={this.active.url} expand="true">
+          {(this.active.children || []).map((child, key) => 
+            <NavItem item={child} parent={this.active} active={child.url === '/' + this.props.location.pathname.split('/').pop()} key={key} />
+          )}
+        </c-navigation>
+      </c-navigation>
+    );
+  }
+}
+
+export default withRouter(Navigation);

src/components/Navigation/Navigation.scss

@@ -0,0 +1,19 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+@import '~bootstrap/scss/dropdown';
+
+
+.dropdown-toggle {
+  padding:0;
+  cursor: pointer;
+  color: #909090;
+
+  &:after {
+    margin-right: 25px;
+  }
+  .show & {
+    color: #041e42;
+  }
+}

src/index.js

@@ -1,57 +1,34 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router } from 'react-router-dom';
+import { defineCustomElements, addTheme } from 'corporate-ui-dev';
+import { theme as scania } from 'scania-theme';
 
+import * as serviceWorker from './serviceWorker';
 import data from '../package.json';
-import './index.scss';
 
-// Scenes
 import Header from './components/Header/Header';
+import Navigation from './components/Navigation/Navigation';
 import Content from './components/Content/Content';
 import Footer from './components/Footer/Footer';
 
-// Components
-import Home from './scenes/Home/Home';
-import Info from './scenes/Info/Info';
-
-import * as serviceWorker from './serviceWorker';
-
-import { defineCustomElements, addTheme } from 'corporate-ui-dev';
-import { theme as scania } from 'scania-theme';
+// CSS
+import './index.scss';
 
-defineCustomElements(['c-container', 'c-theme']);
+defineCustomElements(['c-theme', 'c-header', 'c-navigation', 'c-content', 'c-footer']);
 addTheme(scania);
 
+// TODO: Remove constructor and didMount and change to routes instead of items
 class App extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {ITEMS:[]}
-  }
-
-  componentDidMount() {
-    this.setState({
-      ITEMS: [
-        { name: 'Home', url: '/', ctrl: Home, attrs: { exact: true }, type : 'primary' },
-        { 
-          name: 'Info', url: '/info', ctrl: Info, type : 'primary',
-          children: [
-            { name: 'List', url:'/list', ctrl: Info, type : 'primary' },
-            { name: 'Table', url:'/table', ctrl: Info, type : 'primary' },
-            { name: 'Form', url:'/form', ctrl: Info, type : 'primary' }
-          ]
-        },
-      ]
-    })
-  }
-
   render () {
     return (
-    <Router basename={data.name}>
-      <c-theme name="scania" global="true"></c-theme>
-      <Header items={this.state.ITEMS} />
-      <Content items={this.state.ITEMS} />
-      <Footer />
-    </Router>
+      <Router basename={data.name}>
+        <c-theme name="scania" global="true"></c-theme>
+        <Header />
+        <Navigation />
+        <Content />
+        <Footer />
+      </Router>
     )
   }
 }

src/routes.js

@@ -0,0 +1,16 @@
+import Home from './scenes/Home/Home';
+import Info from './scenes/Info/Info';
+import Error from './scenes/Error/Error';
+
+export const routes = [
+  { name: 'Home', url: '/', ctrl: Home, attrs: { exact: true }, type : 'primary' },
+  { 
+    name: 'Info', url: '/info', ctrl: Info, type : 'primary',
+    children: [
+      { name: 'List', url: '/list', ctrl: Info, type : 'primary' },
+      { name: 'Table', url: '/table', ctrl: Info, type : 'primary' },
+      { name: 'Form', url: '/form', ctrl: Info, type : 'primary' },
+    ]
+  },
+  { name: 'Error', ctrl: Error },
+]

src/scenes/Info/Info.js

@@ -52,20 +52,19 @@ function DetailInfo( {match} ) {
 }
 
 class Info extends Component {
-  constructor(props) {
-    super(props);
-  }
   render() {
     return (
       <section>
         <div className="container-fluid">
           <h1>Info</h1>
           <h4>{this.props.match.params.id}</h4>
-          <div className="col-md-4">
-            <Switch>
-              <Route path={'/info/'+this.props.match.params.id} component={DetailInfo} />
-              <Redirect from="/info" to="/info/list" />
-            </Switch>
+          <div className="row">
+            <div className="col-md-4">
+              <Switch>
+                <Route path={'/info/'+this.props.match.params.id} component={DetailInfo} />
+                <Redirect from="/info" to="/info/list" />
+              </Switch>
+            </div>
           </div>
         </div>
       </section>