From 322ec599b823f5072bdb83c199b0f275ebbe4fac Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 5 Jan 2017 13:50:49 +0200
Subject: [PATCH] Add page structure and universal routing

---
 src/App.css                 |  3 ---
 src/App.js                  |  6 ------
 src/Routes.js               | 18 ++++++++++++++++++
 src/components/Page/Page.js | 11 +++++++++++
 src/components/index.js     |  5 +++++
 src/index.js                | 15 ++++++++++-----
 src/pages/Home.js           |  9 +++++++++
 src/pages/NotFound.js       |  9 +++++++++
 src/pages/Search.js         | 10 ++++++++++
 src/pages/index.js          |  9 +++++++++
 10 files changed, 81 insertions(+), 14 deletions(-)
 delete mode 100644 src/App.css
 delete mode 100644 src/App.js
 create mode 100644 src/Routes.js
 create mode 100644 src/components/Page/Page.js
 create mode 100644 src/components/index.js
 create mode 100644 src/pages/Home.js
 create mode 100644 src/pages/NotFound.js
 create mode 100644 src/pages/Search.js
 create mode 100644 src/pages/index.js

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index d810e456..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.root {
-  color: red;
-}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index aaa84f3f..00000000
--- a/src/App.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import css from './App.css';
-
-export default () => (
-  <div className={css.root}>hello, world</div>
-);
diff --git a/src/Routes.js b/src/Routes.js
new file mode 100644
index 00000000..4e95265d
--- /dev/null
+++ b/src/Routes.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Match, Miss, Redirect } from 'react-router';
+import * as pages from './pages';
+
+const RedirectTestPage = () => (
+  <Redirect to="/" />
+);
+
+const Routes = () => (
+  <div>
+    <Match exactly pattern="/" component={ pages.Home } />
+    <Match exactly pattern="/search" component={ pages.Search } />
+    <Match exactly pattern="/home" component={ RedirectTestPage } />
+    <Miss component={ pages.NotFound } />
+  </div>
+);
+
+export default Routes;
diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js
new file mode 100644
index 00000000..a8534a7e
--- /dev/null
+++ b/src/components/Page/Page.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default (props) => {
+  const { className, title, children } = props;
+  return (
+    <div className={ className }>
+      <h1>{ title }</h1>
+      { children }
+    </div>
+  );
+};
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 00000000..afd7ef74
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,5 @@
+import Page from './Page/Page';
+
+export {
+  Page
+};
diff --git a/src/index.js b/src/index.js
index 2c1417a4..62a9ea6f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,18 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { renderToString } from 'react-dom/server';
-import App from './App';
+import { BrowserRouter, ServerRouter } from 'react-router';
+import Routes from './Routes';
 import './index.css';
 
 if (typeof window !== 'undefined') {
   ReactDOM.render(
-    <App />,
+    <BrowserRouter>
+      <Routes />
+    </BrowserRouter>,
     document.getElementById('root')
   );
 }
 
 export default function render(url, serverContext) {
-  // TODO: Use ServerRouter from react-router
-  console.log(`src/index.js: render() url: ${url}, serverContext: ${serverContext}`);
-  return renderToString(<App />);
+  return renderToString(
+    <ServerRouter location={ url } context={ serverContext }>
+      <Routes />
+    </ServerRouter>
+  );
 }
diff --git a/src/pages/Home.js b/src/pages/Home.js
new file mode 100644
index 00000000..c53f3544
--- /dev/null
+++ b/src/pages/Home.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../components';
+
+export default () => (
+  <Page title="Index page">
+    <Link to="/search">search page</Link>
+  </Page>
+);
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
new file mode 100644
index 00000000..b37b736c
--- /dev/null
+++ b/src/pages/NotFound.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../components';
+
+export default () => (
+  <Page title="Page not found">
+    <Link to="/">index page</Link>
+  </Page>
+);
diff --git a/src/pages/Search.js b/src/pages/Search.js
new file mode 100644
index 00000000..521a20e0
--- /dev/null
+++ b/src/pages/Search.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Page } from '../components';
+
+export default () => (
+  <Page title="Search page">
+    <Link to="/">index page</Link><br />
+    <Link to="/home">home page</Link>
+  </Page>
+);
diff --git a/src/pages/index.js b/src/pages/index.js
new file mode 100644
index 00000000..f2384812
--- /dev/null
+++ b/src/pages/index.js
@@ -0,0 +1,9 @@
+import Home from './Home';
+import Search from './Search';
+import NotFound from './NotFound';
+
+export {
+  Home,
+  Search,
+  NotFound,
+};