Reset tagger toast when post changes

Clearing taggerToast when post changes. Convert Post to a proper
component so we can check for changes with componentDidUpdate and signal
tagger.

src/post.js

@@ -2,26 +2,34 @@ import React from 'react';
 import Tag from './tag.js';
 import TagSuggest from './tag-suggest.js';
 
-function renderTags(props) {
-  let tagReturn = []
-  if (props.post.Tags !== null) {
-    tagReturn = props.post.Tags.map((t) => {
-      return(<Tag key={t} tag={t} deleteTag={props.deleteTag}/>)
-    })
+class Post extends React.Component {
+  renderTags(props) {
+    let tagReturn = []
+    if (props.post.Tags !== null) {
+      tagReturn = props.post.Tags.map((t) => {
+        return(<Tag key={t} tag={t} deleteTag={props.deleteTag}/>)
+      })
+    }
+    tagReturn.push(<TagSuggest key="tagSuggest" allTags={props.allTags} addTag={props.addTag}/>)
+    return tagReturn
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.post.Hash !== prevProps.post.Hash) {
+      this.props.postUpdated()
+    }
   }
-  tagReturn.push(<TagSuggest key="tagSuggest" allTags={props.allTags}/>)
-  return tagReturn
-}
 
-function Post(props) {
-  return(
-    <div className="post">
-      <div className="post-title"><h3>{props.post.Description}</h3></div>
-      <div className="post-url"><a href={props.post.Url} target="_blank" rel="noopener noreferrer">{props.post.Url}</a></div>
-      <div className="post-description">{props.post.Extended}</div>
-      <div className="post-tags">Tags: {renderTags(props)}</div>
-    </div>
-  );
+  render() {
+    return(
+      <div className="post">
+        <div className="post-title"><h3>{this.props.post.Description}</h3></div>
+        <div className="post-url"><a href={this.props.post.Url} target="_blank" rel="noopener noreferrer">{this.props.post.Url}</a></div>
+        <div className="post-description">{this.props.post.Extended}</div>
+        <div className="post-tags">Tags: {this.renderTags(this.props)}</div>
+      </div>
+    );
+  }
 }
 
 export default Post;

src/tagger.js

@@ -23,6 +23,7 @@ class Tagger extends React.Component {
     this.nextPost = this.nextPost.bind(this)
     this.prevPost = this.prevPost.bind(this)
     this.handleDateChange = this.handleDateChange.bind(this)
+    this.postUpdated = this.postUpdated.bind(this)
   }
 
   async componentDidMount() {
@@ -192,6 +193,12 @@ class Tagger extends React.Component {
     })
   }
 
+  postUpdated() {
+    this.setState({
+      taggerToast: ""
+    })
+  }
+
   render() {
     const keyMap = {
       LEFTARROW: "ArrowLeft",
@@ -221,6 +228,7 @@ class Tagger extends React.Component {
           deleteTag={this.deleteTag}
           addTag={this.addTag}
           allTags={this.state.allTags}
+          postUpdated={this.postUpdated}
         />
       <div>
         <span className="tagger-toast">{this.state.taggerToast}</span>