All files Form.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
 
 
 
 
 
 
 
 
44x
 
44x
 
 
 
34x
 
 
 
1x
1x
1x
 
 
 
2x
2x
 
 
 
1x
1x
 
 
 
79x
79x
 
79x
6x
 
 
 
 
79x
13x
 
 
 
 
79x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { Component } from 'react';
import Textarea from 'react-textarea-autosize';
import Header from './Header'
import commentsRepository from './CommentsRepository';
import style from './Comments.css';
 
class Form extends Component {
  constructor(props) {
    super(props);
 
    this.state = {comment: {...props.comment}};
  }
 
  componentWillReceiveProps(nextProps) {
    this.setState({comment: {...nextProps.comment}});
  }
 
  onChange(e) {
    let comment = this.state.comment;
    comment[e.target.name] = e.target.value;
    this.setState({comment: comment});
  }
 
  save(e) {
    e.preventDefault();
    commentsRepository.save(this.props.commentsId, this.state.comment);
  }
 
  removeComment(e) {
    e.preventDefault();
    commentsRepository.remove(this.props.commentsId, this.state.comment._id);
  }
 
  render() {
    let cancelLink = null;
    let removeLink = null;
 
    if (this.props.cancel) {
      cancelLink = (
        <a href="#" className="btn btn-link cancel" onClick={this.props.cancel}>Cancel</a>
      );
    }
 
    if (this.state.comment._id) {
      removeLink = (
        <a href="#" className="btn btn-danger float-left" onClick={this.removeComment.bind(this)}>Remove</a>
      );
    }
 
    return (
      <div className={style.comment + ' ' + style['comment-form']} data-comment-id={this.state.comment.id}>
        <form method="post" onSubmit={this.save.bind(this)}>
          <Header comment={this.state.comment} />
          <div className={style.field}>
            <Textarea name="text" className="form-control" rows={3} value={this.state.comment.text} onChange={this.onChange.bind(this)} />
          </div>
          <div className={style.actions}>
            {removeLink}
            {cancelLink}
            <button className="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    )
  }
}
 
export default Form;