From 5d799021f03ff199d366c59bc34ee4c8968b3f31 Mon Sep 17 00:00:00 2001
From: Nick Pegg <nick@nickpegg.com>
Date: Sat, 7 Oct 2017 12:27:33 -0700
Subject: [PATCH] HistoryNav working with routing

---
 src/App.js |  4 ++--
 src/Nav.js | 33 +++++++++++++++++++++------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/App.js b/src/App.js
index 5383c35..70fcff0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -14,7 +14,7 @@ import { Container, Row, Column } from './skeleton';
 import { Articles, RoutedArticle } from './Article';
 import { Footer } from './Footer';
 import { Header } from './Header';
-import { NavList, TagNav, HistoryNav, HistoryNavStart } from './Nav';
+import { NavList, TagNav, HistoryNav } from './Nav';
 
 
 class App extends Component {
@@ -47,7 +47,7 @@ class App extends Component {
             </Row>
 
             { /* Display HistoryNav if this is a series of articles */ }
-            <Route exact path="/" component={HistoryNavStart} />
+            <Route exact path="/" component={HistoryNav} />
             <Route exact path="/page/:page" component={HistoryNav} />
           </Container>
 
diff --git a/src/Nav.js b/src/Nav.js
index 84f3309..c92676b 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -73,29 +73,38 @@ class TagNav extends Component {
 
 class HistoryNav extends Component {
   render() {
+    let page = 0;
+    if (this.props.match.params.page) {
+      page = parseInt(this.props.match.params.page, 10);
+    }
+    console.log('nav page', page);
+
     let left = "";
-    if (!this.props.newest) {
+    if (page !== 0) {
+      let last_href = "/page/" + (page - 1);
+      if (page === 1) {
+        last_href = "/";
+      }
+
       left = (
-          <a href="">
-            <Icon name="arrow-left" />
-            <span> newer posts</span>
-          </a>
+        <Link to={last_href}>
+          <Icon name="arrow-left" />
+          <span> newer posts</span>
+        </Link>
       )
     }
+
+    let next_href = "/page/" + (page + 1);
     return (
       <Row>
         { left }
-        <a className="u-pull-right" href="">
+        <Link className="u-pull-right" to={next_href}>
           <span>older posts </span>
           <Icon name="arrow-right" />
-        </a>
+        </Link>
       </Row>
     );
   }
 }
 
-const HistoryNavStart = ({match}) => (
-  <HistoryNav newest />
-)
-
-export { ListLink, NavList, TagNav, HistoryNav, HistoryNavStart };
+export { ListLink, NavList, TagNav, HistoryNav };