filter Articles by Tag

src/components/articles.js

@@ -1,49 +1,61 @@
 import React from 'react'
 
 function Articles(props) {
-  console.log(props.tags, props.articles)
+  var articles = props.articles || []
-  const articles = props.articles || []
   if (props.selectedTagId) {
-    const name = props.tags.filter(t => t.id === props.selectedTagId)['name']
+    articles = props.articles.filter(a =>
-    //articles = props.tags.getArticles()
+      filterArticles(a, props.selectedTagId),
+    )
+  }
+  function filterArticles(article, tagId) {
+    if (article.tags && article.tags.filter(t => t.id === tagId).length !== 0) {
+      return article
+    }
   }
   return (
     <div>
       <h3 className="mt-4">Articles</h3>
+      {props.selectedTagId ? (
+        <button
+          className="btn btn-primary mb-1"
+          onClick={() => props.selectTag()}
+        >
+          Show all
+        </button>
+      ) : (
+        ''
+      )}
       <ul className="list-group">
-        {props.articles &&
+        {articles.map(article => (
-          props.articles.map(article => (
+          <li className="list-group-item" key={article.id}>
-            <li className="list-group-item" key={article.id}>
+            <button
-              <button
+              className="btn btn-outline-danger mr-1"
-                className="btn btn-outline-danger mr-1"
+              onClick={() => props.deleteArticle(article.id)}
-                onClick={() => props.deleteArticle(article.id)}
+            >
-              >
+              X
-                X
+            </button>
-              </button>
+            <button
-              <button
+              className="btn ml-1"
-                className="btn ml-1"
+              onClick={() => props.selectArticle(article.id)}
-                onClick={() => props.selectArticle(article.id)}
+            >
-              >
+              {article.title}{' '}
-                {article.title}{' '}
+            </button>
-              </button>
+            <button className="btn ml-1 float-right">
-              <button className="btn ml-1 float-right">
+              {props.comments.map(c => c.articleId === article.id).length}{' '}
-                {props.comments.map(c => c.articleId === article.id).length}{' '}
+              comment(s)
-                comment(s)
+            </button>
-              </button>
+            {article.tags &&
-              {props.tags &&
+              article.tags.map(tag => (
-                props.tags
+                <button
-                  .filter(t => t.articleId === article.id)
+                  className="btn btn-outline-success mr-1 float-right"
-                  .map(tag => (
+                  key={article.id + tag.id}
-                    <button
+                  onClick={e => props.selectTag(tag.id)}
-                      className="btn btn-outline-success mr-1 float-right"
+                >
-                      key={tag.id}
+                  {tag.name}
-                      onClick={e => props.selectTag(tag.id)}
+                </button>
-                    >
+              ))}
-                      {tag.name}
+          </li>
-                    </button>
+        ))}
-                  ))}
-            </li>
-          ))}
 
         <li className="list-group-item">
           <form className="form-group row" onSubmit={props.createArticle}>

src/components/tags.js

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

src/controllers/tags.js

@@ -4,24 +4,32 @@ const API = process.env.REACT_APP_API || 'http://localhost:1337'
 export async function addTag(e) {
   e.preventDefault()
   if (this.state.newTag === '') {
-    return alert("Refusing to add an empty tag.")
+    return alert('Refusing to add an empty tag.')
+  }
+  const tag = {
+    name: this.state.newTag,
+    articleId: this.state.selectedArticleId,
   }
-  const tag = { name: this.state.newTag, articleId: this.state.selectedArticleId }
   try {
     const { data, error } = await axios.post(API + '/api/tags', tag)
     if (error) {
-      alert(`Received error when adding tag ${tag.name}: ${error}`)
+      alert(`Received error when adding tag ${tag.name} to article: ${error}`)
-    } else if (data.id) {
+    } else if (data.tag && data.article) {
+      const oldTags = this.state.tags.filter(t => t.id !== data.tag.id)
+      const oldArticles = this.state.articles.filter(
+        a => a.id !== data.article.id,
+      )
       this.setState({
-        tags: this.state.tags.concat(data),
+        tags: oldTags.concat(data.tag),
+        articles: oldArticles.concat(data.article),
         newTag: '',
       })
-      console.log(`Added tag: `, data)
+      console.log(`Added tag to article: `, data)
     } else {
-      alert(`Failed to add tag '${tag}'.`)
+      alert(`Failed to add tag to article '${tag}'.`)
     }
   } catch (e) {
-    alert(`Failed to add tag '${this.state.newTag}'.`)
+    alert(`Failed to add tag to article '${this.state.newTag}'.`)
   }
 }
 
@@ -36,21 +44,52 @@ export async function removeTag(id) {
     alert(`Could not find tag with id ${id}.`)
     return
   }
+  tag['articleId'] = this.state.selectedArticleId
   try {
-    const { data, error } = await axios.post(
+    const { data, error } = await axios.put(
-      API + `/api/tags/${tag.id}/delete`,
+      API + `/api/tags/${(tag, id)}}`,
+      tag,
     )
     if (error) {
       alert(`Received error when removing tag ${tag.name}: ${error}`)
+    } else if (data.tag && data.article) {
+      console.log(data)
+      const oldTags = this.state.tags.filter(t => t.id !== data.tag.id)
+      const oldArticles = this.state.articles.filter(
+        a => a.id !== data.article.id,
+      )
+      this.setState({
+        tags: oldTags.concat(data.tag),
+        articles: oldArticles.concat(data.article),
+      })
+      console.log('Removed tag from article:', data)
+    } else {
+      alert(`Failed to remove tag '${tag.name}' from article .`)
+    }
+  } catch (e) {
+    alert(`Failed to remove tag '${tag.name} from article ': ${e}`)
+  }
+}
+
+export async function deleteTag(id) {
+  const tag = this.state.tags.find(p => p.id === id)
+  if (!tag.id) {
+    alert(`Could not find tag with id ${id}.`)
+    return
+  }
+  try {
+    const { data, error } = await axios.post(API + `/api/tags/${tag.id}/delete`)
+    if (error) {
+      alert(`Received error when deleting tag ${tag.name}: ${error}`)
     } else if (data.name) {
-      console.log('Removed tag:', data)
+      console.log('Deleted tag:', data)
       this.setState({
         tags: this.state.tags.filter(p => p.id !== tag.id),
       })
     } else {
-      alert(`Failed to remove tag '${tag.name}'.`)
+      alert(`Failed to delete tag '${tag.name}'.`)
     }
   } catch (e) {
-    alert(`Failed to remove tag '${tag.name}': ${e}`)
+    alert(`Failed to delete tag '${tag.name}': ${e}`)
   }
 }