Implement addTag/deleteTag and begin wiring up

Delete tag is working and fully plumbed. AddTag can be tested from the
console, but the component for a new tag needs to be worked out.

src/post.js

@@ -1,18 +1,24 @@
 import React from 'react';
 import Tag from './tag.js';
 
+function renderTags(props) {
+  const tagReturn = []
+  if (props.post.Tags !== null) {
+    props.post.Tags.map((t) => {
+      return tagReturn.push(<Tag key={t} tag={t} deleteTag={props.deleteTag}/>)
+    })
+  }
+  // TODO: add new tag input
+  return tagReturn
+}
+
 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>
+      <p>Tags: {renderTags(props)}</p>
     </div>
   );
 }

src/tag.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 function Tag(props) {
   return(
-    <span className="post-tag">{props.tag} | x</span>
+    <span className="post-tag">{props.tag}  <button onClick={props.deleteTag.bind(this, props.tag)}>x</button></span>
   )
 }
 

src/tagger.js

@@ -14,6 +14,8 @@ class Tagger extends React.Component {
       isLoaded: false,
     }
 
+    this.addTag = this.addTag.bind(this)
+    this.deleteTag = this.deleteTag.bind(this)
     this.nextPost = this.nextPost.bind(this)
     this.prevPost = this.prevPost.bind(this)
   }
@@ -40,7 +42,53 @@ class Tagger extends React.Component {
     });
   }
 
-  updatePost(props) {
+  deleteTag(tag) {
+    const post = this.state.posts[this.state.currentPost]
+    const axios = this.props.axios
+    const params = new URLSearchParams()
+    params.append("url", post.Url)
+    params.append("tag", tag)
+    axios.post('/posts/deleteTag', params)
+      .then((res) => {
+        console.log("Deleted tag " + tag + " from URL:" + post.Url)
+
+        const posts = this.state.posts
+
+        // Delete tag from local state
+        post.Tags = post.Tags.filter((t) => {return t !== tag})
+        posts[this.state.currentPost] = post
+        this.setState({
+          posts: posts,
+          taggerToast: "Deleted tag: " + tag,
+        })
+      })
+      .catch((error) => {
+        console.log("Error deleting tag " + tag + " from URL:" + post.Url + ". Error:" + error.message)
+        this.setState({
+          taggerToast: "Failed to delete tag: " + tag,
+        })
+      });
+  }
+
+  addTag(tag) {
+    const post = this.state.posts[this.state.currentPost]
+    const axios = this.props.axios
+    const params = new URLSearchParams()
+    params.append("url", post.Url)
+    params.append("tag", tag)
+    axios.post('/posts/addTag', params)
+      .then((res) => {
+        console.log("Added tag " + tag + " to URL:" + post.Url)
+        this.setState({
+          taggerToast: "Added tag: " + tag,
+        })
+      })
+      .catch((error) => {
+        console.log("Error adding tag " + tag + " to URL:" + post.Url + ". Error:" + error.message)
+        this.setState({
+          taggerToast: "Failed to add tag: " + tag,
+        })
+      });
   }
 
   nextPost() {
@@ -65,6 +113,8 @@ class Tagger extends React.Component {
         <div id="tagger">
           <Post
             post={this.state.posts[this.state.currentPost]}
+            deleteTag={this.deleteTag}
+            addTag={this.addTag}
           />
         <br />
         <br />