All files Comments.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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
 
 
 
 
 
 
 
 
 
 
25x
25x
 
25x
 
 
 
25x
 
 
 
1x
1x
 
 
 
34x
1x
 
 
33x
33x
 
33x
20x
8x
 
20x
13x
4x
2x
 
 
4x
8x
 
 
4x
 
4x
9x
5x
 
5x
3x
 
 
5x
5x
 
5x
4x
2x
 
2x
6x
1x
1x
1x
 
5x
 
 
2x
1x
 
2x
2x
 
2x
6x
 
 
2x
2x
 
 
 
 
57x
 
57x
 
57x
57x
104x
104x
 
 
57x
57x
 
57x
57x
 
57x
57x
24x
 
 
57x
 
57x
 
 
 
 
 
 
 
 
25x
 
 
 
 
 
import React, { Component } from 'react';
import Websocket from 'react-websocket';
import dispatcher from '100notes-dispatcher';
import commentsRepository from './CommentsRepository';
import Comment from './Comment';
import Summary from './Summary';
import Form from './Form';
import style from './Comments.css';
 
class Comments extends Component {
  constructor(props) {
    super(props);
    this.state = { group: { comments: [] }, sort: props.sort ? props.sort.toLowerCase() : 'asc' };
 
    dispatcher.register(this, ['COMMENT-CREATE', 'COMMENT-UPDATE', 'COMMENT-DELETE', 'COMMENTS', 'LOAD_COMMENTS']);
  }
 
  componentWillMount() {
    commentsRepository.load(this.props.commentsId, 0, this.props.initialSize || this.props.size);
  }
 
  handleData(response) {
    response = JSON.parse(response);
    dispatcher.dispatch('COMMENT-' + response.eventType, response.data);
  }
 
  update(eventType, response) {
    if (this.props.commentsId !== response._id) {
      return;
    }
 
    var insertFunction = 'push';
    var group = this.state.group;
 
    if (eventType === 'COMMENTS') {
      if (this.state.sort === 'asc') {
        response.comments.reverse();
      }
      this.setState({group: response});
    } else if (eventType === 'LOAD_COMMENTS') {
      if (this.state.sort === 'asc') {
        insertFunction = 'unshift';
      }
 
      response.comments.forEach((comment) => {
        group.comments[insertFunction](comment);
      });
 
      group.count = response.count;
 
      this.setState({group: group});
    } else if (eventType === 'COMMENT-CREATE') {
      var comment = response.comments[0];
 
      if (this.state.sort === 'desc') {
        insertFunction = 'unshift';
      }
 
      group.count = response.count;
      group.comments[insertFunction](comment);
 
      this.setState({group: group});
    } else if (eventType === 'COMMENT-UPDATE') {
      var comment = response.comments[0];
 
      var exist = group.comments.filter((item) => {
        if (item._id === comment._id) {
          item.text = comment.text;
          item.updatedAt = comment.updatedAt;
          return true;
        }
        return false;
      }).length > 0;
 
      if (exist) {
        this.setState({group: group});
      }
    } else Eif (eventType === 'COMMENT-DELETE') {
      var comment = response.comments[0];
 
      group.comments = group.comments.filter((item) => {
        return item._id !== comment._id;
      });
 
      group.count = response.count;
      this.setState({group: group});
    }
  }
 
  render() {
    var commentNew = { group: { id: this.props.commentsId }, text: "" };
 
    var commentList = [];
 
    var comments = this.state.group.comments || [];
    comments.forEach((comment) => {
      var key = 'comment-' + comment._id;
      commentList.push(<Comment key={key} commentsId={this.props.commentsId} comment={comment} />);
    });
 
    var summaryKey = 'summary-' + this.props.commentsId;
    var summary = [<Summary key={summaryKey} commentsId={this.props.commentsId} size={this.props.size} group={this.state.group} />];
 
    var formKey = 'form-' + this.props.commentsId;
    var form = <Form key={formKey} commentsId={this.props.commentsId} comment={commentNew} />;
 
    var view = [form, commentList, summary];
    if (this.state.sort === 'asc') {
      view.reverse();
    }
 
    var wsUrl = 'ws://localhost:8080/ws/comment-groups/' + this.props.commentsId;
 
    return (
      <div className={style.comments} data-comments-id={this.props.commentsId}>
        {view}
        <Websocket url={wsUrl} onMessage={this.handleData} reconnect={true} />
      </div>
    );
  }
 
  componentWillUnmount() {
    dispatcher.unregister(this);
  }
}
 
export default Comments;