From 0968c22cf6439c2076f0f2732900c2bef40d4599 Mon Sep 17 00:00:00 2001
From: Nick Pegg <nick@nickpegg.com>
Date: Sat, 7 Oct 2017 12:08:50 -0700
Subject: [PATCH] Fetch Articles from JSON blob

---
 src/App.js     |  2 +-
 src/Article.js | 99 +++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 79 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index bf3f6e3..5383c35 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,7 +38,7 @@ class App extends Component {
 
                   { /* Article routes */ }
                   <Route path="/page/:page" component={Articles} />
-                  <Route path="/:year/:month/:title.html" component={RoutedArticle} />
+                  <Route path="/:year/:month/:title" component={RoutedArticle} />
 
                   { /* 404 fallback */ }
                   <Route component={FourOhFour} />
diff --git a/src/Article.js b/src/Article.js
index c3515f6..153fb5b 100644
--- a/src/Article.js
+++ b/src/Article.js
@@ -63,29 +63,86 @@ class Article extends Component {
   }
 }
 
+// Goofball article for routing testing
+class RoutedArticle extends Component {
+  constructor(props) {
+    super(props);
+    this.props = props;
+    this.params = props.match.params;
 
-const RoutedArticle = ({match}) => (
-  <Article title={match.params.title} />
-)
+    this.state = {
+      body: '',
+      title: 'default title',
+      date: 'default date',
+      tags: [],
+    }
+  }
+
+  render() {
+    return (
+      <Article title={this.state.title} date={this.state.date} />
+    )
+  }
+}
 
 
-const Articles = ({match}) => (
-  // TODO: This is the thing that'll fetch the articles from the JSON blob
-  // based on the URL that's hit. This will return one or more Articles
-  <div>
-    <Article
-      title="This is where a blog post would go"
-      date="1970-01-01"
-    />
-    <Article
-      title="This is another blog post!"
-      date="1970-01-01"
-      is_page
-    />
-    <p>
-      This is page number: {match.params.page}
-    </p>
-  </div>
-)
+class Articles extends Component {
+  constructor(props) {
+    super(props);
+
+    // Number of Articles per page
+    // TODO: Pull this from a configuration somehow
+    this.per_page = 5;
+
+    this.params = props.match.params;
+    this.state = {
+      articles: [],
+    }
+
+    console.log("page", this.params.page);
+  }
+
+  fetchArticles() {
+    // Fetch articles 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;
+        }
+        console.log("offset", offset);
+        let posts = blob.posts.slice(offset, offset + this.per_page);
+
+        this.setState({articles: posts});
+      })
+      .catch(function(error) {
+        console.log("Oh no! " + error);
+      });
+  }
+
+  componentDidMount() {
+    this.fetchArticles();
+  }
+
+  componentWillReceiveProps(props) {
+    this.params = props.match.params;
+    this.fetchArticles();
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.articles.map(article =>
+          <Article
+            key={article.title}
+            title={article.title}
+            date="1970-01-01"
+          />
+        )}
+      </div>
+    )
+  }
+}
 
 export { Article, Articles, RoutedArticle };