add / remove Tag to Article

src/App.js

@@ -231,6 +231,8 @@ class App extends React.Component {
       addTag={this.addTag}
       removeTag={this.removeTag}
       deleteArticle={this.deleteArticle}
+      selectTag={this.selectTag}
+      handleChange={this.handleChange}
       {...this.state}
       />
     )
@@ -240,6 +242,7 @@ class App extends React.Component {
       handleChange={this.handleChange}
       updateArticle={this.updateArticle}
       navigate={this.navigate}
+      selectTag={this.selectTag}
       {...this.state}
       />
     )

src/components/article.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Tags from './tags'
 
 class Article extends React.Component {
   constructor(props) {
@@ -10,12 +11,17 @@ class Article extends React.Component {
   render() {
     return (
       <div>
-        <button className="btn" onClick={() => this.props.navigate('articles')}>back</button>
+        <Tags
+          {...this.props}
+        />
         <h2>{this.state.title}</h2>
-        <div>{this.state.text}</div>
+        <div className="mb-3">{this.state.text}</div>
-        <button onClick={() => this.props.navigate('update-article')}>Edit</button>
+        <div>
+          <button className="btn btn-primary" onClick={() => this.props.navigate('articles')}>Back</button>
+          <button className="btn btn-primary ml-1" onClick={() => this.props.navigate('update-article')}>Edit</button>
+        </div>
+        <h2 className="mt-3">Comments</h2>
         <ul className="list-group">
-        <h2>Comments</h2>
         {this.props.comments ? this.props.comments.map(comment=>(
           <li className="list-group-item" key={comment.id}>
             {comment.text}

src/components/articles.js

@@ -2,6 +2,11 @@ import React from 'react'
 
 function Articles(props) {
   console.log(props.tags, props.articles)
+  const articles = props.articles || []
+  if (props.selectedTagId) {
+    const name = props.tags.filter(t => t.id === props.selectedTagId)['name']
+    //articles = props.tags.getArticles()
+  }
   return (
     <div>
       <h3 className="mt-4">Articles</h3>
@@ -21,18 +26,18 @@ function Articles(props) {
               >
                 {article.title}{' '}
               </button>
-              {props.tags && props.tags.filter(t => t.articleId === article.id).map(tag => (
-                <button className="btn btn-outline" key={tag.id}
-                        onClick={(e) => props.selectTag(tag.id)}>
-                {tag.name}
-                </button>
-              ))
-              }
               <button
                 className="btn ml-1 float-right"
               >
                 {props.comments.map(c => c.articleId === article.id).length} comment(s)
               </button>
+              {props.tags && props.tags.filter(t => t.articleId === article.id).map(tag => (
+                <button className="btn btn-outline-success mr-1 float-right" key={tag.id}
+                        onClick={(e) => props.selectTag(tag.id)}>
+                {tag.name}
+                </button>
+              ))
+              }
             </li>
           ))}
 

src/components/index.js

@@ -3,6 +3,7 @@ export { default as About } from './about'
 export { default as Articles } from './articles'
 export { default as Article } from './article'
 export { default as UpdateArticle } from './update-article'
+export { default as Tags } from './tags'
 export { default as Tasks } from './tasks'
 export { default as UpdateTask } from './update-task'
 export { default as Profile } from './profile'

src/components/tags.js

@@ -0,0 +1,35 @@
+import React from 'react'
+
+class Tags extends React.Component {
+  constructor(props) {
+    super(props)
+    //props.state.tags = tags
+  }
+
+  render() {
+    return (
+      <div>
+
+        {this.props.tags && this.props.tags.filter(t => t.articleId === this.props.selectedArticleId).map(tag => (
+        <span key={tag.id}>
+          <button className="btn btn-outline-success ml-1"
+            onClick={(e) => this.props.selectTag(tag.id)}>
+          {tag.name}
+          </button>
+          <button className="btn btn-danger mr-1" onClick={(e) => this.props.removeTag(tag.id)}>-</button>
+       </span>
+       ))}
+       <form className="mt-2 mb-2" onSubmit={this.props.addTag}>
+       <input
+        className="col input-sm col-sm-3 ml-3 mr-1"
+        placeholder="Add tag"
+        name="newTag"
+        value={this.props.newTag}
+        onChange={this.props.handleChange}
+      />
+      <button className="col btn btn-primary col-sm-1" onClick={this.props.addTag}>+</button>
+    </form>
+     </div>
+  )}
+}
+export default Tags

src/controllers/tags.js

@@ -4,9 +4,9 @@ const API = process.env.REACT_APP_API || 'http://localhost:1337'
 export async function addTag(e) {
   e.preventDefault()
   if (this.state.newTag === '') {
-    return alert('No, i will not add an empty tag.')
+    return alert("Refusing to add an empty tag.")
   }
-  const tag = { name: this.state.newTag }
+  const tag = { name: this.state.newTag, articleId: this.state.selectedArticleId }
   try {
     const { data, error } = await axios.post(API + '/api/tags', tag)
     if (error) {
@@ -27,7 +27,7 @@ export async function addTag(e) {
 
 export function selectTag(selectedTagId) {
   this.setState({ selectedTagId })
-  this.navigate('tag')
+  this.navigate('articles')
 }
 
 export async function removeTag(id) {