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,36 +217,39 @@ class App extends React.Component {
     )
   }
   renderArticles() {
-    return (<Articles
+    return (
-      navigate={this.navigate}
+      <Articles
-      handleChange={this.handleChange}
+        navigate={this.navigate}
-      createArticle={this.createArticle}
+        handleChange={this.handleChange}
-      selectArticle={this.selectArticle}
+        createArticle={this.createArticle}
-      deleteArticle={this.deleteArticle}
+        selectArticle={this.selectArticle}
-      selectTag={this.selectTag}
+        deleteArticle={this.deleteArticle}
-      {...this.state}
+        selectTag={this.selectTag}
+        {...this.state}
       />
     )
   }
   renderArticle() {
-    return (<Article
+    return (
-      navigate={this.navigate}
+      <Article
-      addTag={this.addTag}
+        navigate={this.navigate}
-      removeTag={this.removeTag}
+        addTag={this.addTag}
-      deleteArticle={this.deleteArticle}
+        removeTag={this.removeTag}
-      selectTag={this.selectTag}
+        deleteArticle={this.deleteArticle}
-      handleChange={this.handleChange}
+        selectTag={this.selectTag}
-      {...this.state}
+        handleChange={this.handleChange}
+        {...this.state}
       />
     )
   }
   renderUpdateArticle() {
-    return (<UpdateArticle
+    return (
-      handleChange={this.handleChange}
+      <UpdateArticle
-      updateArticle={this.updateArticle}
+        handleChange={this.handleChange}
-      navigate={this.navigate}
+        updateArticle={this.updateArticle}
-      selectTag={this.selectTag}
+        navigate={this.navigate}
-      {...this.state}
+        selectTag={this.selectTag}
+        {...this.state}
       />
     )
   }

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
-          <li className="list-group-item" key={comment.id}>
+            ? this.props.comments.map(comment => (
-            {comment.text}
+                <li className="list-group-item" key={comment.id}>
-          </li>
+                  {comment.text}
-        )) : "No comments yet."
+                </li>
-       }
+              ))
+            : 'No comments yet.'}
         </ul>
       </div>
     )

src/components/articles.js

@@ -26,38 +26,42 @@ 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)
-                {tag.name}
+                  .map(tag => (
-                </button>
+                    <button
-              ))
+                      className="btn btn-outline-success mr-1 float-right"
-              }
+                      key={tag.id}
+                      onClick={e => props.selectTag(tag.id)}
+                    >
+                      {tag.name}
+                    </button>
+                  ))}
             </li>
           ))}
 
-          <li className="list-group-item">
+        <li className="list-group-item">
-            <form className="form-group row" onSubmit={props.createArticle}>
+          <form className="form-group row" onSubmit={props.createArticle}>
-              <input
+            <input
-                className="form-control col input-sm"
+              className="form-control col input-sm"
-                placeholder="Create Article"
+              placeholder="Create Article"
-                name="newArticle"
+              name="newArticle"
-                value={props.newArticle}
+              value={props.newArticle}
-                onChange={props.handleChange}
+              onChange={props.handleChange}
-             />
+            />
-             <button
+            <button
-               type="submit"
+              type="submit"
-               className="form-control col col-sm-2 ml-1 btn btn-primary"
+              className="form-control col col-sm-2 ml-1 btn btn-primary"
-               onClick={props.createArticle}
+              onClick={props.createArticle}
-             >
+            >
-             Save
+              Save
-             </button>
+            </button>
-           </form>
+          </form>
         </li>
       </ul>
     </div>

src/components/tags.js

@@ -9,27 +9,42 @@ 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
-        <span key={tag.id}>
+            .filter(t => t.articleId === this.props.selectedArticleId)
-          <button className="btn btn-outline-success ml-1"
+            .map(tag => (
-            onClick={(e) => this.props.selectTag(tag.id)}>
+              <span key={tag.id}>
-          {tag.name}
+                <button
+                  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>
+              </span>
+            ))}
+        <form className="mt-2 mb-2" onSubmit={this.props.addTag}>
+          <input
+            className="col input-sm col-sm-3 ml-3 mr-1"
+            placeholder="Add tag"
+            name="newTag"
+            value={this.props.newTag}
+            onChange={this.props.handleChange}
+          />
+          <button
+            className="col btn btn-primary col-sm-1"
+            onClick={this.props.addTag}
+          >
+            +
           </button>
-          <button className="btn btn-danger mr-1" onClick={(e) => this.props.removeTag(tag.id)}>-</button>
+        </form>
-       </span>
+      </div>
-       ))}
+    )
-       <form className="mt-2 mb-2" onSubmit={this.props.addTag}>
+  }
-       <input
-        className="col input-sm col-sm-3 ml-3 mr-1"
-        placeholder="Add tag"
-        name="newTag"
-        value={this.props.newTag}
-        onChange={this.props.handleChange}
-      />
-      <button className="col btn btn-primary col-sm-1" onClick={this.props.addTag}>+</button>
-    </form>
-     </div>
-  )}
 }
 export default Tags

src/components/update-article.js

@@ -8,8 +8,8 @@ class UpdateArticle extends React.Component {
     this.handleChange = this.handleChange.bind(this)
 
     if (!props.selectedArticleId) {
-       props.navigate('articles')
+      props.navigate('articles')
-     }
+    }
   }
 
   handleChange(e) {
@@ -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">
@@ -29,7 +31,7 @@ class UpdateArticle extends React.Component {
               name="title"
               value={this.state.title}
               onChange={this.handleChange}
-          />
+            />
           </div>
 
           <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>