Initial tagger app with posts loaded via API

Loading posts from API via global axios instance. Lazy conditional
rendering of placeholder for loading state. Appending posts to the posts
array so they can lazy loaded and iterated later.

src/index.css

@@ -8,7 +8,6 @@ body {
     margin: 20px auto 0;
     padding: 20px;
     height: 600px;
-    border: 1px solid #000;
 }
 
 .login {
@@ -37,3 +36,28 @@ body {
 .login input {
     display: table-cell;
 }
+
+.post-description {
+    padding: 10px;
+    margin: 10px 0px;
+}
+
+.post-tag {
+    margin: 10px;
+    padding: 8px 16px;
+    color: #ddd;
+    background-color: #777;
+}
+
+.post-controls {
+    padding: 10px;
+}
+
+.post-controls button {
+    border: none;
+    display: inline-block;
+    background-color: #009688;
+    vertical-align: middle;
+    padding: 8px 16px;
+    margin: 0 10px;
+}

src/post-controls.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Controls(props) {
+  return(
+    <div className="post-controls">
+      <button>&lt;- Prev</button>
+      Some stuff ought to go here
+      <button>Next -&gt;</button>
+    </div>
+  )
+}
+
+export default Controls;

src/post.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Tag from './tag.js';
+
+function Post(props) {
+  return(
+    <div className="post">
+      <h3>{props.post.Description}</h3>
+      <p><a href={props.post.Url}>{props.post.Url}</a></p>
+      <p className="post-description">{props.post.Extended}</p>
+      <p>{props.post.Tags.map((t) => {
+        return(
+          <Tag key={t} tag={t} />
+        );
+      })
+      }</p>
+    </div>
+  );
+}
+
+export default Post;

src/tag.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+function Tag(props) {
+  return(
+    <span className="post-tag">{props.tag} | x</span>
+  )
+}
+
+export default Tag;

src/tagger.js

@@ -1,19 +1,42 @@
 import React from 'react';
+import Post from './post.js';
+import Controls from './post-controls.js';
 
 
 class Tagger extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      hello: "there",
+      taggerToast: "",
       filterTags: [],
+      posts: [],
+      isLoaded: false,
     }
   }
 
-  getPosts(props) {
+  componentDidMount() {
+    this.getPosts()
   }
 
-  tagPost(props) {
+  getPosts() {
+    const axios = this.props.axios
+    axios.get('/posts/get?date=2019-10-25')
+    .then((res) => {
+      console.log(res.data)
+      const newPosts = this.state.posts.concat(res.data);
+      this.setState({
+        posts: newPosts,
+        isLoaded: true,
+      })
+    })
+    .catch((error) => {
+      this.setState({
+        taggerToast: "Error from server: " + error.message + ". Try again later.",
+      });
+    });
+  }
+
+  updatePost(props) {
   }
 
   nextPost(props) {
@@ -23,7 +46,22 @@ class Tagger extends React.Component {
   }
 
   render() {
-    return("Hooray!")
+    if (this.state.isLoaded) {
+      return(
+        <div id="tagger">
+          <Post
+            post={this.state.posts[0]}
+          />
+          <Controls  />
+        </div>
+      )
+    } else {
+      return(
+        <div id="tagger">
+          Loading...
+        </div>
+      )
+    }
   }
 }