import React from 'react';
import 'babel/polyfill';

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'
import People from './lexicon/people'

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);
      });
    }
    if (parsedUrl.hash.match(/^#\/people/)) {
      People.componentWithData((peopleComponent) => {
        rerender(peopleComponent);
      });
    }
  } else {
    rerender(<Home />);
  }
}

processUrl();

@@ -1018,46 +1018,8 @@
 %3E %7B%0A
-  const parsedUrl = parseUrl(newUrl);%0A
   pr
@@ -1023,30 +1023,27 @@
  processUrl(
-parsed
+new
 Url);  %0A%7D);%0A
@@ -1067,20 +1067,49 @@
 Url(
-parsedUrl) %7B
+url) %7B%0A  const parsedUrl = parseUrl(url);
 %0A  i
@@ -1540,15 +1540,35 @@
 %0AprocessUrl(
+window.location.href
 );%0A

Make a hash url also load the right page when going directly to it, without a change event.