add logic to show error if comments don't retrieve

Author: James Wilson

src/AddComment.js

@@ -4,16 +4,17 @@ import {BASE_URL} from './constants';
 
 
 class AddComment extends React.Component{
-  
+
   state = {
     active: false,
     body: '',
   }
-  
-  submitComment = () => {
+
+  submitComment = (event) => {
+    event.preventDefault();
     const {_id} = this.props;
     const {body} = this.state;
-    
+
     fetch(`${BASE_URL}/articles/${_id}/comments`,
     {
       method: 'POST',
@@ -34,50 +35,56 @@ class AddComment extends React.Component{
       this.setState({body:''});
     });
   }
-  
+
   handleKeys = event => {
     if (event.key === 'Enter') this.submitComment();
   }
-  
+
   render () {
-    if (this.state.active) return (
+    const {body, active} = this.state;
+    if (active) return (
       <form>
         <input
           type="text"
           className="input field"
           autoFocus
           onChange={({target:{value}}) => this.setState({body:value})}
           onKeyPress={this.handleKeys}
-          value={this.state.body}
+          value={body}
         />
       <div className="field is-grouped">
         <button
+          type="button"
           className="button control"
           onClick={this.submitComment}
+          disabled={!body}
         >
           Submit Comment
         </button>
+
         <button
+          type="button"
           className="button control"
           onClick={()=>this.setState({active:false, body:''})}
         >
           Cancel
         </button>
       </div>
-      
+
       </form>
     );
-    
+
     else return (
-      
+
       <button
-      className="button control"
-      onClick={()=>this.setState({active:true})}>
-      {/* <FontAwesomeIcon icon={faPlus}/> */} New Comment
+        className="button control"
+        onClick={()=>this.setState({active:true})}
+      >
+        New Comment
       </button>
-      
+
     );
-    
+
   }
 }
 

src/Article.js

@@ -23,6 +23,7 @@ class Article extends React.Component {
     },
     comments: [],
     status: 200,
+    commentError: false,
   }
 
   componentDidMount () {
@@ -32,7 +33,10 @@ class Article extends React.Component {
     .then(newState => this.setState(newState));
 
     getCommentsFromArticleID(_id)
-    .then(newState => this.setState(newState));
+    .then(newState => {
+      if (newState.status !== undefined) this.setState({commentError: true});
+      else this.setState(newState);
+    });
 
   }
 
@@ -62,7 +66,7 @@ class Article extends React.Component {
   }
 
   render () {
-    const {status} = this.state;
+    const {status, commentError} = this.state;
     if (status !== 200) return <Error status={status}/>;
 
     const {topicName, topicId, title, avatarUrl, authorName,
@@ -85,13 +89,21 @@ class Article extends React.Component {
           <AuthorName name={authorName} _id={authorId}/>
           </h2>
           <p>{body}</p>
+
+          {commentError
+          ?
+          <p> Problem retrieving Comments </p>
+          :
           <CommentList
             comments={comments}
             changeVoting={this.changeVoting}
             _id={_id}
             optimisticallyAddComment={this.optimisticallyAddComment}
             optimisticallyDeleteComment={this.optimisticallyDeleteComment}
           />
+          }
+
+
         </div>
       );
     }

src/CommentList.js

@@ -27,8 +27,6 @@ class CommentList extends React.Component {
     this.setState({orderBy:value});
   };
 
-
-
   render () {
     const {comments, changeVoting, _id, optimisticallyAddComment,
       optimisticallyDeleteComment} = this.props;
@@ -50,7 +48,6 @@ class CommentList extends React.Component {
           optimisticallyDeleteComment={optimisticallyDeleteComment}
         />
 
-
         {sortedComments.map(comment => {
           return <Comment
             {...comment}