show selected Article with Comments

src/App.js

@@ -8,6 +8,12 @@ import {
   selectArticle,
 } from './controllers/articles'
 
+import {
+  addTag,
+  selectTag,
+  removeTag,
+} from './controllers/tags'
+
 import {
   createTask,
   updateTask,
@@ -28,6 +34,7 @@ import { updateProfile } from './controllers/profile'
 import {
   About,
   Articles,
+  Article,
   UpdateArticle,
   Tasks,
   UpdateTask,
@@ -66,6 +73,9 @@ class App extends React.Component {
     this.updateArticle = updateArticle.bind(this)
     this.deleteArticle = deleteArticle.bind(this)
 
+    this.addTag = addTag.bind(this)
+    this.removeTag = removeTag.bind(this)
+
     this.createTask = createTask.bind(this)
     this.updateTask = updateTask.bind(this)
     this.deleteTask = deleteTask.bind(this)
@@ -198,6 +208,16 @@ class App extends React.Component {
       />
     )
   }
+  renderArticle() {
+    return (<Article
+      navigate={this.navigate}
+      addTag={this.addTag}
+      removeTag={this.removeTag}
+      deleteArticle={this.deleteArticle}
+      {...this.state}
+      />
+    )
+  }
   renderUpdateArticle() {
     return (<UpdateArticle
       handleChange={this.handleChange}
@@ -288,6 +308,8 @@ class App extends React.Component {
         : this.state.component === 'articles'
         ? this.renderArticles()
         : this.state.component === 'article'
+        ? this.renderArticle()
+        : this.state.component === 'update-article'
         ? this.renderUpdateArticle()
         : this.state.component === 'tasks'
         ? this.renderTasks(filtered, completed)

src/components/article.js

@@ -0,0 +1,30 @@
+import React from 'react'
+
+class Article extends React.Component {
+  constructor(props) {
+    super(props)
+    const article = props.articles.find(t => t.id === props.selectedArticleId)
+    this.state = article
+  }
+
+  render() {
+    return (
+      <div>
+        <button className="btn" onClick={() => this.props.navigate('articles')}>back</button>
+        <h2>{this.state.title}</h2>
+        <div>{this.state.text}</div>
+        <button onClick={() => this.props.navigate('update-article')}>Edit</button>
+        <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}
+          </li>
+        )) : "No comments yet."
+       }
+        </ul>
+      </div>
+    )
+  }
+}
+export default Article

src/components/index.js

@@ -1,6 +1,7 @@
 export { default as Navbar } from './navbar'
 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 Tasks } from './tasks'
 export { default as UpdateTask } from './update-task'

src/components/update-article.js

@@ -19,7 +19,7 @@ class UpdateArticle extends React.Component {
   render() {
     return (
       <div>
-        <span onClick={() => this.props.navigate('articles')}>&laquo; back</span>
+        <button className="btn" onClick={() => this.props.navigate('article')}>back</button>
         <form>
           <h2 className="form-group row">Article {this.state.id}</h2>
           <div className="form-group row">