Merge pull request #71 from jenn-jenn/reacthookstest

Reacthookstest

frontend/src/components/comment/comment_container.jsx

@@ -4,7 +4,7 @@ import {
   destroyComment
 } from "../../actions/comment_actions";
 import { fetchUsers } from "../../actions/user_actions";
-import Comments from './comments';
+import {Comments} from './comments';
 
 const mapStateToProps = state => {
     return {

frontend/src/components/comment/comment_list_item.jsx

@@ -1,42 +1,34 @@
 import React from "react";
 
-class CommentListItem extends React.Component {
-  constructor(props) {
-    super(props)
-    this.handleDelete = this.handleDelete.bind(this);
-  }
-
-  handleDelete(e){
+export const CommentListItem = props => {
+  const handleDelete = (e) => {
     e.preventDefault();
-    this.props.destroyComment(e.target.id)
+    props.destroyComment(e.target.id)
   }
 
-  render() {
-    let deletebutton = this.props.currentUser.id === this.props.comment.userId ? 
-      <i onClick={this.handleDelete}
-        id={this.props.comment._id}
-        className="fa fa-trash"/>
-      : "";
+  const date = new Date(props.comment.date);
+
+  const deletebutton = props.currentUser.id === props.comment.userId ? 
+  <i onClick={handleDelete}
+      id={props.comment._id}
+      className="fa fa-trash" />
+    : "";
 
-    const date = new Date(this.props.comment.date);
-    return (
-      <div className="comment">
-        <div className="comment-header">
-          <div className="comment-user">
-            <i className="fas fa-user-circle" />
-            {this.props.users[this.props.comment.userId].handle}
-          </div>
-
-            <div className="comment-footer">
-              {deletebutton}
-              <h4>Posted {`${date.getHours()}:${date.getMinutes()} ${date.toDateString()}`}</h4>
-            </div>
+  return (
+    <div className="comment">
+      <div className="comment-header">
+        <div className="comment-user">
+          <i className="fas fa-user-circle" />
+          {props.users[props.comment.userId].handle}
         </div>
 
-        <span>{this.props.comment.body}</span>
+        <div className="comment-footer">
+          {deletebutton}
+          <h4>Posted {`${date.getHours()}:${date.getMinutes()} ${date.toDateString()}`}</h4>
+        </div>
       </div>
-    );
-  }
-}
 
-export default CommentListItem;
+      <span>{props.comment.body}</span>
+    </div>
+  );
+}

frontend/src/components/comment/comments.jsx

@@ -1,30 +1,26 @@
-import React from "react";
-import CommentListItem from './comment_list_item';
+import React, { useEffect } from "react";
+import {CommentListItem} from './comment_list_item';
 import CommentFormContainer from './comment_form_container';
 import '../stylesheets/forum/comments.scss';
 
-class Comments extends React.Component {
+export const Comments = props => {
 
-    componentDidMount(){
-        this.props.fetchUsers()
-        .then(()=> this.props.fetchPostComments(this.props.post._id))
-    }
+    useEffect(() => {
+        props.fetchUsers()
+        .then(() => props.fetchPostComments(props.post._id))
+    })
 
-    render() {
-        return (
-            <div className="comments">
-                {this.props.comments.map( comment =>  
-                    <CommentListItem 
-                    users={this.props.users}
-                    currentUser = {this.props.currentUser}
-                    comment={comment} 
+    return (
+        <div className="comments">
+            {props.comments.map(comment =>
+                <CommentListItem
+                    users={props.users}
+                    currentUser={props.currentUser}
+                    comment={comment}
                     key={comment._id}
-                    destroyComment={this.props.destroyComment}/>
-                )}
-                <CommentFormContainer postId={this.props.post._id}/>
-            </div>
-        )
-    }   
-}
-
-export default Comments;
+                    destroyComment={props.destroyComment} />
+            )}
+            <CommentFormContainer postId={props.post._id} />
+        </div>
+    )
+}