import React from 'react';

import Logo from './components/logo'
import SocialButtons from './components/social-buttons'
import Navigation from './components/navigation'
import Home from './components/home';
import Footer from './components/footer';

import AppUrl from './appurl'

class Page {
  render() {
    
    let appUrl = new AppUrl();
    const siteComponent = this.props.siteComponent;
    
    return (
      <div id="wrapper" className="pure-g">
        <header className="pure-u-2-3">
          <Logo/>
          <SocialButtons/>
          <Navigation appUrl={appUrl} />
        </header>
        {siteComponent}
        <Footer />
      </div>
    )
  }
}

const rerender = (siteComponent = <Home />) => {
  React.render(<Page siteComponent={siteComponent} />, document.getElementById('app'));
};

import {parse as parseUrl} from 'url';
import Chronicle from './lexicon/chronicle'

window.addEventListener('hashchange', ({newURL: newUrl}) => {
  const parsedUrl = parseUrl(newUrl);
  processUrl(parsedUrl);  
});

function processUrl(parsedUrl) {
  if (parsedUrl && parsedUrl.hash && parsedUrl.hash.startsWith('#/')) {
    if (parsedUrl.hash.match(/^#\/chronicle/)) {
      Chronicle.componentWithData((chronicleComponent) => {
        rerender(chronicleComponent);
      });
    }
  } else {
    rerender(<Home />);
  }
}

processUrl();

import React from 'react';

import Logo from './components/logo'
import SocialButtons from './components/social-buttons'
import Navigation from './components/navigation'
import Home from './components/home'
import Footer from './components/footer'

class Page {
  render() {
    return (
      <div id="wrapper" className="pure-g">
        <header className="pure-u-2-3">
          <Logo/>
          <SocialButtons/>
          <Navigation />
        </header>
        <Home/>
        <Footer />
      </div>
    )
  }
}

React.render(<Page/>, document.getElementById('app'));

--- 
+++ 
@@ -3,53 +3,23 @@
 import Logo from './components/logo'
 import SocialButtons from './components/social-buttons'
 import Navigation from './components/navigation'
-import Home from './components/home';
-import Footer from './components/footer';
-
-import AppUrl from './appurl'
+import Home from './components/home'
+import Footer from './components/footer'
 
 class Page {
   render() {
-    
-    let appUrl = new AppUrl();
-    const siteComponent = this.props.siteComponent;
-    
     return (
       <div id="wrapper" className="pure-g">
         <header className="pure-u-2-3">
           <Logo/>
           <SocialButtons/>
-          <Navigation appUrl={appUrl} />
+          <Navigation />
         </header>
-        {siteComponent}
+        <Home/>
         <Footer />
       </div>
     )
   }
 }
 
-const rerender = (siteComponent = <Home />) => {
-  React.render(<Page siteComponent={siteComponent} />, document.getElementById('app'));
-};
-
-import {parse as parseUrl} from 'url';
-import Chronicle from './lexicon/chronicle'
-
-window.addEventListener('hashchange', ({newURL: newUrl}) => {
-  const parsedUrl = parseUrl(newUrl);
-  processUrl(parsedUrl);  
-});
-
-function processUrl(parsedUrl) {
-  if (parsedUrl && parsedUrl.hash && parsedUrl.hash.startsWith('#/')) {
-    if (parsedUrl.hash.match(/^#\/chronicle/)) {
-      Chronicle.componentWithData((chronicleComponent) => {
-        rerender(chronicleComponent);
-      });
-    }
-  } else {
-    rerender(<Home />);
-  }
-}
-
-processUrl();
+React.render(<Page/>, document.getElementById('app'));
Load the page according to the current url, using hashes.