refactor router implementation + implement navbar

src/NavigationBar.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Link } from 'react-router-dom';
+
+export default ({ pages }) => {
+    return (
+        <nav>
+            <ul>{
+                pages.map((page, k) => {
+                    return (
+                        <li key={k}>
+                            <Link to={ page.path }>
+                                { page.name }
+                            </Link>
+                        </li>    
+                    )
+                })
+            }</ul>
+        </nav>
+    )
+}

src/Page.js

@@ -1,12 +1,24 @@
 import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
 
-class Page extends Component {
+export class Page extends Component {
     render() {
         const props = this.props
         return (
-            <div className="page">{props.name}</div>
-        );
+            <div className="page">
+                <h1>{props.name}</h1>
+                { props.children }
+            </div>
+        )
     }
 }
 
-export default Page;
+const RoutePage = (props) => {
+    return (
+        <Route exact={props.exact} path={props.path} render={() => (
+            <Page { ...props } />
+        )} />
+    )
+}
+
+export default RoutePage;

src/PageManager.js

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+
+import { withRouter, Switch } from 'react-router-dom'
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { TransitionGroup, CSSTransition } from 'react-transition-group'
+
+import Page from './Page'
+import NavigationBar from './NavigationBar'
+
+import './App.css';
+
+export class PageManager extends Component {
+	state = {
+		direction: 0
+	}
+
+	componentWillReceiveProps(nextProps) {
+		const findPage = (ref, elem) => {
+			return elem.indexOf(ref) === 0;
+		};
+		const pageOrder = React.Children.map(this.props.children, (child) => child.props.path)
+
+		console.log(pageOrder)
+
+		let indexCurrent = pageOrder.findIndex(
+			findPage.bind(this, this.props.location.pathname)
+		);
+		let indexNext = pageOrder.findIndex(
+			findPage.bind(this, nextProps.location.pathname)
+		);
+
+		// indexCurrent = indexCurrent !== -1 ? indexCurrent : index404;
+		// indexNext = indexNext !== -1 ? indexNext : index404;
+
+		this.setState({
+			direction: indexNext - indexCurrent
+		});
+	}
+
+	render() {
+		const { children, location } = this.props
+		const currentKey = location.pathname.split("/")[1] || "/";
+		const timeout = { enter: 500, exit: 500 };
+		let pages = []
+		const routes = React.Children.map(children, child => {
+			if (child.type === Page) {
+				pages.push({ name: child.props.name, path: child.props.path })
+				return child
+			} else {
+				return null
+			}
+		})
+		const navbars = children.filter(child => {
+			return child.type === NavigationBar
+		})
+		return (
+			<TransitionGroup component="div" className={"page-container " + (this.state.direction >= 0 ? "right" : "left")}>
+				<CSSTransition
+					key={currentKey}
+					timeout={timeout}
+					classNames="page"
+					appear
+				>
+					<div className={"page-inner"}>
+						<Switch location={location}>
+							{ routes }
+						</Switch>
+					</div>
+				</CSSTransition>
+				{ React.Children.map(navbars, (navbar) => {
+					return React.cloneElement(navbar, { pages })
+				}) }
+			</TransitionGroup>								
+		);
+	}
+}
+
+const PageManagerWithRouter = withRouter(PageManager)
+
+export default props => (
+	<Router>
+		<PageManagerWithRouter { ...props } />
+	</Router>
+);

src/index.js

@@ -1,13 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import './index.css';
-import Pages from './Pages';
+
+import PageManager from './PageManager';
 import Page from './Page';
+import NavigationBar from './NavigationBar';
+
 import registerServiceWorker from './registerServiceWorker';
 
 ReactDOM.render(
-    <Pages>
-        <Page name="home" exact path="/" />
-        <Page name="page 2" path="/two" />
-    </Pages>, document.getElementById('root'));
+    <div>
+        <PageManager>
+            <Page name="home" exact path="/" />
+            <Page name="page 2" exact path="/two" />
+            <NavigationBar position="bottom" />
+        </PageManager>
+    </div>
+    , document.getElementById('root'));
 registerServiceWorker();