1 import React from 'react'; |
1 import React, { Component } from 'react'; |
|
2 import { connect } from 'react-redux'; |
|
3 import { bindActionCreators } from 'redux'; |
2 import PropTypes from 'prop-types'; |
4 import PropTypes from 'prop-types'; |
3 import {formatTimestamp} from '../utils'; |
5 import { formatTimestamp } from '../utils'; |
|
6 import SlateEditor from './SlateEditor'; |
|
7 import * as notesActions from '../actions/notesActions'; |
4 |
8 |
5 const Note = ({note}) => { |
9 class Note extends Component { |
6 return ( |
10 |
7 <div id={"note-" + note._id} className="note"> |
11 state = { |
8 <span className="start">{formatTimestamp(note.startedAt)}</span> |
12 edit: false |
9 <span className="finish">{formatTimestamp(note.finishedAt)}</span> |
13 } |
10 <div className="note-content" dangerouslySetInnerHTML={{ __html: note.html }} /> |
14 |
11 <div className="note-margin-comment"> |
15 toggleEditMode = () => { |
12 <small className="text-muted">{ note.marginComment }</small> |
16 const { edit } = this.state; |
|
17 this.setState({ edit: !edit }) |
|
18 } |
|
19 |
|
20 onClickDelete = (e) => { |
|
21 e.preventDefault(); |
|
22 e.stopPropagation(); |
|
23 |
|
24 this.props.notesActions.deleteNote(this.props.note); |
|
25 } |
|
26 |
|
27 renderNoteContent() { |
|
28 if (this.state.edit) { |
|
29 return ( |
|
30 <div className="note-content"> |
|
31 <SlateEditor ref="editor" |
|
32 onChange={this.onEditorChange} |
|
33 onEnterKeyDown={this.onAddNoteClick} |
|
34 onButtonClick={this.onAddNoteClick} |
|
35 onCheckboxChange={this.onCheckboxChange} |
|
36 isChecked={this.props.autoSubmit} |
|
37 isButtonDisabled={this.state.buttonDisabled} |
|
38 withButtons={false} |
|
39 note={this.props.note} /> |
|
40 </div> |
|
41 ) |
|
42 } |
|
43 |
|
44 return ( |
|
45 <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} /> |
|
46 ) |
|
47 } |
|
48 |
|
49 render() { |
|
50 return ( |
|
51 <div id={"note-" + this.props.note._id} className="note" onClick={ this.toggleEditMode }> |
|
52 <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span> |
|
53 <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span> |
|
54 { this.renderNoteContent() } |
|
55 <div className="note-margin-comment"> |
|
56 <small className="text-muted">{ this.props.note.marginComment }</small> |
|
57 </div> |
|
58 <a onClick={this.onClickDelete}> |
|
59 <span className="material-icons">delete</span> |
|
60 </a> |
13 </div> |
61 </div> |
14 </div> |
62 ); |
15 ); |
63 }; |
16 }; |
64 } |
17 |
65 |
18 Note.propTypes = { |
66 Note.propTypes = { |
19 note: PropTypes.object.isRequired |
67 note: PropTypes.object.isRequired |
20 }; |
68 }; |
21 |
69 |
22 export default Note; |
70 function mapStateToProps(state, props) { |
|
71 return props; |
|
72 } |
|
73 |
|
74 function mapDispatchToProps(dispatch) { |
|
75 return { |
|
76 notesActions: bindActionCreators(notesActions, dispatch), |
|
77 } |
|
78 } |
|
79 |
|
80 export default connect(mapStateToProps, mapDispatchToProps)(Note); |