prettier

src/App.js

@@ -8,11 +8,7 @@ import {
   selectArticle,
 } from './controllers/articles'
 
-import {
+import { addTag, selectTag, removeTag } from './controllers/tags'
-  addTag,
-  selectTag,
-  removeTag,
-} from './controllers/tags'
 
 import {
   createTask,
@@ -59,7 +55,7 @@ const defaultState = {
   newTask: '',
   newProject: '',
   project: {},
-  newTag: ''
+  newTag: '',
 }
 
 class App extends React.Component {
@@ -160,7 +156,15 @@ class App extends React.Component {
     const projects = await this.fetchProjects()
     const comments = await this.fetchComments()
     const votes = await this.fetchVotes()
-    await this.setState({ loading: false, articles, tags, tasks, projects, comments, votes })
+    await this.setState({
+      loading: false,
+      articles,
+      tags,
+      tasks,
+      projects,
+      comments,
+      votes,
+    })
   }
 
   componentDidMount() {
@@ -185,8 +189,7 @@ class App extends React.Component {
   renderError() {
     if (!this.state.error) {
       return <div>There was an error.</div>
-    }
+    } else if (this.state.error.message === 'Network Error') {
-    else if (this.state.error.message === 'Network Error') {
       alert(`Failed to reach backend at\n${this.state.error.config.url}.`)
     } else {
       return (
@@ -214,7 +217,8 @@ class App extends React.Component {
     )
   }
   renderArticles() {
-    return (<Articles
+    return (
+      <Articles
         navigate={this.navigate}
         handleChange={this.handleChange}
         createArticle={this.createArticle}
@@ -226,7 +230,8 @@ class App extends React.Component {
     )
   }
   renderArticle() {
-    return (<Article
+    return (
+      <Article
         navigate={this.navigate}
         addTag={this.addTag}
         removeTag={this.removeTag}
@@ -238,7 +243,8 @@ class App extends React.Component {
     )
   }
   renderUpdateArticle() {
-    return (<UpdateArticle
+    return (
+      <UpdateArticle
         handleChange={this.handleChange}
         updateArticle={this.updateArticle}
         navigate={this.navigate}

src/components/article.js

@@ -11,23 +11,32 @@ class Article extends React.Component {
   render() {
     return (
       <div>
-        <Tags
+        <Tags {...this.props} />
-          {...this.props}
-        />
         <h2>{this.state.title}</h2>
         <div className="mb-3">{this.state.text}</div>
         <div>
-          <button className="btn btn-primary" onClick={() => this.props.navigate('articles')}>Back</button>
+          <button
-          <button className="btn btn-primary ml-1" onClick={() => this.props.navigate('update-article')}>Edit</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">
-        {this.props.comments ? this.props.comments.map(comment=>(
+          {this.props.comments
+            ? this.props.comments.map(comment => (
                 <li className="list-group-item" key={comment.id}>
                   {comment.text}
                 </li>
-        )) : "No comments yet."
+              ))
-       }
+            : 'No comments yet.'}
         </ul>
       </div>
     )

src/components/articles.js

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

@@ -9,14 +9,23 @@ class Tags extends React.Component {
   render() {
     return (
       <div>
-
+        {this.props.tags &&
-        {this.props.tags && this.props.tags.filter(t => t.articleId === this.props.selectedArticleId).map(tag => (
+          this.props.tags
+            .filter(t => t.articleId === this.props.selectedArticleId)
+            .map(tag => (
               <span key={tag.id}>
-          <button className="btn btn-outline-success ml-1"
+                <button
-            onClick={(e) => this.props.selectTag(tag.id)}>
+                  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>
+                <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}>
@@ -27,9 +36,15 @@ class Tags extends React.Component {
             value={this.props.newTag}
             onChange={this.props.handleChange}
           />
-      <button className="col btn btn-primary col-sm-1" onClick={this.props.addTag}>+</button>
+          <button
+            className="col btn btn-primary col-sm-1"
+            onClick={this.props.addTag}
+          >
+            +
+          </button>
         </form>
       </div>
-  )}
+    )
+  }
 }
 export default Tags

src/components/update-article.js

@@ -19,7 +19,9 @@ class UpdateArticle extends React.Component {
   render() {
     return (
       <div>
-        <button className="btn" onClick={() => this.props.navigate('article')}>back</button>
+        <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">
@@ -38,7 +40,7 @@ class UpdateArticle extends React.Component {
               className="form-control"
               name="text"
               rows="25"
-              value={this.state.text || ""}
+              value={this.state.text || ''}
               onChange={this.handleChange}
             />
           </div>