All files / components/comments index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import Comment from '../comment';
import SubmitCommentForm from '../submitComment';
import { getTimestamp } from '../../utils';
import './styles.css';
 
const Comments = ({
  comments,
  currentUser,
  commentIdBeingEdited,
  userCommentBeingUpdated,
  handleEditUserComment,
  handleEditUserCommentChange,
  handleEditUserCommentSubmit,
  handleEditUserCommentCancel,
  handleDeleteUserComment,
  handleShowAllComments,
  isShowingAllComments,
  activeVersion
}) => {
  const commentsComponents = comments.map(comment => {
    const timestamp = getTimestamp(comment.timestamp);
    const lastUpdated = getTimestamp(comment.lastUpdated);
    const beingEdited = comment._id === commentIdBeingEdited;
 
    let userCommentBeingUpdatedFn;
    if (beingEdited) {
      userCommentBeingUpdatedFn = userCommentBeingUpdated === null
        ? comment.comment
        : userCommentBeingUpdated;
    } else {
      userCommentBeingUpdatedFn = userCommentBeingUpdated;
    }
 
    const commentOrSubmit = !!beingEdited === true
      ? <SubmitCommentForm
          key={comment._id}
          userComment={userCommentBeingUpdatedFn}
          handleChange={handleEditUserCommentChange}
          handleSubmit={handleEditUserCommentSubmit}
          onCommentCancel={handleEditUserCommentCancel}
          title={'Edit comment'}
          comment={comment}
          type={'Edit'}
        />
      : <Comment
          key={comment._id}
          handleEditUserComment={handleEditUserComment}
          handleDeleteUserComment={handleDeleteUserComment}
          currentUserIsOwner={currentUser === comment.userEmail}
          username={comment.userName}
          emailId={comment.userEmail}
          timestamp={timestamp}
          comment={comment.comment}
          commentId={comment._id}
          edited={comment.edited}
          lastUpdated={lastUpdated}
          version={comment.version}
          activeVersion={activeVersion}
        />;
 
    return commentOrSubmit;
  });
 
  const showAllCommentsLink = !isShowingAllComments
    ? <button style={{ marginBottom: 20 }} onClick={handleShowAllComments}>
        Show all comments
      </button>
    : null;
 
  return (
    <div>
      <ReactCSSTransitionGroup
        component="div"
        transitionName="comment"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}
        transitionAppear={false}
      >
        {comments.length
          ? commentsComponents
          : <p key="no-comments">No comments to show for this story.</p>}
      </ReactCSSTransitionGroup>
      {showAllCommentsLink}
    </div>
  );
};
 
Comments.propTypes = {
  comments: PropTypes.array,
  commentIdBeingEdited: PropTypes.string,
  userCommentBeingUpdated: PropTypes.string,
  currentUser: PropTypes.string.isRequired,
  handleEditUserComment: PropTypes.func.isRequired,
  handleEditUserCommentChange: PropTypes.func.isRequired,
  handleEditUserCommentSubmit: PropTypes.func.isRequired,
  handleEditUserCommentCancel: PropTypes.func.isRequired,
  handleDeleteUserComment: PropTypes.func.isRequired,
  handleShowAllComments: PropTypes.func.isRequired,
  isShowingAllComments: PropTypes.bool.isRequired,
  activeVersion: PropTypes.string.isRequired
};
 
Comment.defaultProps = {
  comments: []
};
 
export default Comments;