From 9fad87918106ee49f76fedb8a8ff040fcfb6ae6b Mon Sep 17 00:00:00 2001
From: Nick Pegg <nick@nickpegg.com>
Date: Sat, 7 Oct 2017 17:31:33 -0700
Subject: [PATCH] Proper HistoryNav

Detects whether there's a previous page or next page, the old HistoryNav
was made to be dumber and most of the logic now lives in Posts (which is
the only thing that uses HistoryNav anyway)

The side-effect is that the nav is now within the content column, which
is okay since it's symmetric now.
---
 src/App.js     |  5 +---
 src/Article.js | 62 +++++++++++++++++++++++++++++++++++++++++++-------
 src/Nav.js     | 55 ++++++++++++++++++++------------------------
 3 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/src/App.js b/src/App.js
index 380a57f..5218828 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,7 +13,7 @@ import { Container, Row, Column } from './skeleton';
 import { Post, Posts } from './Article';
 import { Footer } from './Footer';
 import { Header } from './Header';
-import { NavList, TagNav, HistoryNav } from './Nav';
+import { NavList, TagNav } from './Nav';
 import { NotFound } from './NotFound';
 
 
@@ -51,9 +51,6 @@ class App extends Component {
               </Column>
             </Row>
 
-            { /* Display HistoryNav if this is a series of articles */ }
-            <Route exact path="/" component={HistoryNav} />
-            <Route exact path="/page/:page" component={HistoryNav} />
           </Container>
 
           <Footer />
diff --git a/src/Article.js b/src/Article.js
index a1ffac6..308328a 100644
--- a/src/Article.js
+++ b/src/Article.js
@@ -4,7 +4,7 @@ import Markdown from 'react-markdown';
 import { Link } from 'react-router-dom';
 import slugify from 'slugify';
 
-import { ListLink } from './Nav';
+import { ListLink, HistoryNav } from './Nav';
 import { NotFound } from './NotFound';
 
 
@@ -149,36 +149,79 @@ class Posts extends Component {
 
     // Number of Articles per page
     // TODO: Pull this from a configuration somehow
-    this.per_page = 4;
+    this.perPage = 4;
 
     this.params = props.match.params;
     this.state = {
       posts: null,
+      prevHref: null,
+      nextHref: null,
     }
   }
 
+  update() {
+    this.fetchPosts();
+  }
+
   fetchPosts() {
     // Fetch posts from JSON blob
     fetch('/site.json')
       .then((resp) => resp.json())
       .then((blob) => {
         let offset = 0;
-        if (this.params.page) {
-          offset = this.params.page * this.per_page;
+        let page = parseInt(this.params.page, 10);
+        if (!page) {
+          page = 0;
         }
-        let posts = blob.posts.slice(offset, offset + this.per_page);
+
+        offset = page * this.perPage;
+        let posts = blob.posts.slice(offset, offset + this.perPage);
+
+        // Check to see if we have more posts after these
+        let nextOffset = (page + 1) * this.perPage;
+        let nextPosts = blob.posts.slice(nextOffset,
+          nextOffset + this.perPage);
+        let hasMore = nextPosts.length > 0;
+        this.updateHistoryNav(page, hasMore);
 
         this.setState({posts: posts});
       });
   }
 
+  updateHistoryNav(page, hasMore) {
+    console.log("page" ,page);
+    console.log("more?", hasMore);
+    // Update prev state
+    let prev = null;
+    if (page === 1) {
+      prev = "/";
+    } else if (page > 1) {
+      prev = "/page/" + (page - 1);
+    } else {
+      prev = null;
+    }
+
+    // Update next state
+    let next = null;
+    if (hasMore) {
+      next = "/page/" + (page + 1);
+    } else {
+      next = null;
+    }
+
+    this.setState({
+      nextHref: next,
+      prevHref: prev,
+    })
+  }
+
   componentDidMount() {
-    this.fetchPosts();
+    this.update();
   }
 
   componentWillReceiveProps(props) {
     this.params = props.match.params;
-    this.fetchPosts();
+    this.update();
   }
 
   render() {
@@ -197,7 +240,10 @@ class Posts extends Component {
       }
 
       return (
-        <div>{ jawn }</div>
+        <div>
+          { jawn }
+          <HistoryNav prev={this.state.prevHref} next={this.state.nextHref} />
+        </div>
       )
     } else {
       return <p></p>
diff --git a/src/Nav.js b/src/Nav.js
index c21585a..cdd4eee 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -71,39 +71,34 @@ 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);
-    }
+const HistoryNav = (props) => {
+  let left = "";
+  let right = "";
 
-    let left = "";
-    if (page !== 0) {
-      let last_href = "/page/" + (page - 1);
-      if (page === 1) {
-        last_href = "/";
-      }
-
-      left = (
-        <Link to={last_href}>
-          <Icon name="arrow-left" />
-          <span> newer posts</span>
-        </Link>
-      )
-    }
-
-    let next_href = "/page/" + (page + 1);
-    return (
-      <Row>
-        { left }
-        <Link className="u-pull-right" to={next_href}>
-          <span>older posts </span>
-          <Icon name="arrow-right" />
-        </Link>
-      </Row>
+  if (props.prev) {
+    left = (
+      <Link to={props.prev}>
+        <Icon name="arrow-left" />
+        <span> newer posts</span>
+      </Link>
     );
   }
+
+  if (props.next) {
+    right = (
+      <Link className="u-pull-right" to={props.next}>
+        <span>older posts </span>
+        <Icon name="arrow-right" />
+      </Link>
+    );
+  }
+
+  return (
+    <Row>
+      { left }
+      { right }
+    </Row>
+  )
 }
 
 export { ListLink, NavList, TagNav, HistoryNav };