filter Articles by Tag

src/components/articles.js

@@ -1,18 +1,32 @@
 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}>
             <button
               className="btn btn-outline-danger mr-1"
@@ -30,13 +44,11 @@ function Articles(props) {
               {props.comments.map(c => c.articleId === article.id).length}{' '}
               comment(s)
             </button>
-              {props.tags &&
+            {article.tags &&
-                props.tags
+              article.tags.map(tag => (
-                  .filter(t => t.articleId === article.id)
-                  .map(tag => (
                 <button
                   className="btn btn-outline-success mr-1 float-right"
-                      key={tag.id}
+                  key={article.id + tag.id}
                   onClick={e => props.selectTag(tag.id)}
                 >
                   {tag.name}

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]
-  }
-
-  render() {
   return (
     <div>
-        {this.props.tags &&
+      {article.tags &&
-          this.props.tags
+        article.tags.map(tag => (
-            .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)}
+              onClick={e => props.selectTag(tag.id)}
             >
               {tag.name}
             </button>
             <button
               className="btn btn-danger mr-1"
-                  onClick={e => this.props.removeTag(tag.id)}
+              onClick={e => props.removeTag(tag.id)}
             >
               -
             </button>
           </span>
         ))}
-        <form className="mt-2 mb-2" onSubmit={this.props.addTag}>
+      <form className="mt-2 mb-2" onSubmit={props.addTag}>
         <input
           className="col input-sm col-sm-3 ml-3 mr-1"
           placeholder="Add tag"
           name="newTag"
-            value={this.props.newTag}
+          value={props.newTag}
-            onChange={this.props.handleChange}
+          onChange={props.handleChange}
         />
-          <button
+        <button className="col btn btn-primary col-sm-1" onClick={props.addTag}>
-            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}`)
   }
 }