show Tags for Articles

src/App.js

@@ -59,6 +59,7 @@ const defaultState = {
   newTask: '',
   newProject: '',
   project: {},
+  newTag: ''
 }
 
 class App extends React.Component {
@@ -87,6 +88,7 @@ class App extends React.Component {
     this.updateProfile = updateProfile.bind(this)
 
     this.selectArticle = selectArticle.bind(this)
+    this.selectTag = selectTag.bind(this)
     this.selectTask = selectTask.bind(this)
     this.selectProject = selectProject.bind(this)
   }
@@ -131,6 +133,16 @@ class App extends React.Component {
     }
   }
 
+  async fetchTags() {
+    try {
+      const { data } = await axios.get(API + '/api/tags')
+      return data
+    } catch (error) {
+      console.log(error)
+      this.setState({ error })
+    }
+  }
+
   async fetchVotes() {
     try {
       const { data } = await axios.get(API + '/api/votes')
@@ -143,11 +155,12 @@ class App extends React.Component {
 
   async fetchData() {
     const articles = await this.fetchArticles()
+    const tags = await this.fetchTags()
     const tasks = await this.fetchTasks()
     const projects = await this.fetchProjects()
     const comments = await this.fetchComments()
     const votes = await this.fetchVotes()
-    await this.setState({ loading: false, articles, tasks, projects, comments, votes })
+    await this.setState({ loading: false, articles, tags, tasks, projects, comments, votes })
   }
 
   componentDidMount() {
@@ -204,6 +217,7 @@ class App extends React.Component {
       createArticle={this.createArticle}
       selectArticle={this.selectArticle}
       deleteArticle={this.deleteArticle}
+      selectTag={this.selectTag}
       {...this.state}
       />
     )

src/components/articles.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 function Articles(props) {
+  console.log(props.tags, props.articles)
   return (
     <div>
       <h3 className="mt-4">Articles</h3>
@@ -20,10 +21,17 @@ 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} comments
+                {props.comments.map(c => c.articleId === article.id).length} comment(s)
               </button>
             </li>
           ))}

src/controllers/tags.js

@@ -0,0 +1,56 @@
+import axios from 'axios'
+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.')
+  }
+  const tag = { name: this.state.newTag }
+  try {
+    const { data, error } = await axios.post(API + '/api/tags', tag)
+    if (error) {
+      alert(`Received error when adding tag ${tag.name}: ${error}`)
+    } else if (data.id) {
+      this.setState({
+        tags: this.state.tags.concat(data),
+        newTag: '',
+      })
+      console.log(`Added tag: `, data)
+    } else {
+      alert(`Failed to add tag '${tag}'.`)
+    }
+  } catch (e) {
+    alert(`Failed to add tag '${this.state.newTag}'.`)
+  }
+}
+
+export function selectTag(selectedTagId) {
+  this.setState({ selectedTagId })
+  this.navigate('tag')
+}
+
+export async function removeTag(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 removing tag ${tag.name}: ${error}`)
+    } else if (data.name) {
+      console.log('Removed tag:', data)
+      this.setState({
+        tags: this.state.tags.filter(p => p.id !== tag.id),
+      })
+    } else {
+      alert(`Failed to remove tag '${tag.name}'.`)
+    }
+  } catch (e) {
+    alert(`Failed to remove tag '${tag.name}': ${e}`)
+  }
+}