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

@@ -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 />

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>

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 };