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 */ }
-
+
{ /* 404 fallback */ }
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}) => (
-
-)
+ this.state = {
+ body: '',
+ title: 'default title',
+ date: 'default date',
+ tags: [],
+ }
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
-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
-
-
-
-
- This is page number: {match.params.page}
-
-
-)
+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 (
+
+ {this.state.articles.map(article =>
+
+ )}
+
+ )
+ }
+}
export { Article, Articles, RoutedArticle };