Mercurial Mercurial > irinotes / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client/src/components/Note.js
changeset 84 bf35a7737f94
parent 82 6f2999873343
child 109 ef62de545a8d
equal deleted inserted replaced
83:76a4e4b11762 84:bf35a7737f94 
     1 import React, { Component } from 'react';
 
     1 import React, { Component } from 'react';
 
     2 import { connect } from 'react-redux';
 
       
     3 import { bindActionCreators } from 'redux';
 
       
     4 import PropTypes from 'prop-types';
 
     2 import PropTypes from 'prop-types';
 
     5 import { formatTimestamp } from '../utils';
 
     3 import { formatTimestamp } from '../utils';
 
     6 import SlateEditor from './SlateEditor';
 
     4 import SlateEditor from './SlateEditor';
 
     7 import * as notesActions from '../actions/notesActions';
 
       
     8 
     5 
     9 class Note extends Component {
 
     6 class Note extends Component {
 
    10 
       
    11   state = {
 
       
    12     edit: false
 
       
    13   }
 
       
    14 
       
    15   enterEditMode = () => {
 
       
    16     const { edit } = this.state;
 
       
    17     if (edit) return;
 
       
    18     this.setState({ edit: true })
 
       
    19   }
 
       
    20 
     7 
    21   onClickDelete = (e) => {
 
     8   onClickDelete = (e) => {
 
    22     e.preventDefault();
 
     9     e.preventDefault();
 
    23     e.stopPropagation();
 
    10     e.stopPropagation();
 
    24 
    11 
    25     this.props.notesActions.deleteNote(this.props.note);
 
    12     this.props.onDelete();
 
    26   }
 
    13   }
 
    27 
    14 
    28   onClickButton = (e) => {
 
    15   onClickButton = (e) => {
 
    29 
    16 
    30     const plain = this.refs.editor.asPlain();
 
    17     const plain = this.refs.editor.asPlain();
 
    31     const raw = this.refs.editor.asRaw();
 
    18     const raw = this.refs.editor.asRaw();
 
    32     const html = this.refs.editor.asHtml();
 
    19     const html = this.refs.editor.asHtml();
 
    33     const categories = this.refs.editor.asCategories();
 
    20     const categories = this.refs.editor.asCategories();
 
    34 
    21 
    35     this.props.notesActions.updateNote(this.props.note, {
 
    22     const data = {
 
    36       plain,
 
    23       plain,
 
    37       raw,
 
    24       raw,
 
    38       html,
 
    25       html,
 
    39       categories
 
    26       categories
 
    40     });
 
    27     }
 
    41 
    28 
    42     this.setState({ edit: false })
 
    29     this.props.onSave(this.props.note, data);
 
    43   }
 
    30   }
 
    44 
    31 
    45   onClickClose = (e) => {
 
    32   onClickClose = (e) => {
 
    46     e.preventDefault();
 
    33     e.preventDefault();
 
    47     e.stopPropagation();
 
    34     e.stopPropagation();
 
    48 
    35 
    49     this.setState({ edit: false })
 
    36     this.props.onClose();
 
    50   }
 
    37   }
 
    51 
    38 
    52   renderNoteContent() {
 
    39   renderNoteContent() {
 
    53     if (this.state.edit) {
 
    40     if (this.props.isEditing) {
 
    54       return (
 
    41       return (
 
    55         <div className="note-content">
 
    42         <div className="note-content">
 
    56           <SlateEditor ref="editor"
 
    43           <SlateEditor ref="editor"
 
    57             onButtonClick={ this.onClickButton }
 
    44             onButtonClick={ this.onClickButton }
 
    58             note={ this.props.note } />
 
    45             note={ this.props.note } />
 
    64       <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
 
    51       <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
 
    65     )
 
    52     )
 
    66   }
 
    53   }
 
    67 
    54 
    68   renderNoteRight() {
 
    55   renderNoteRight() {
 
    69     if (this.state.edit) {
 
    56     if (this.props.isEditing) {
 
    70       return (
 
    57       return (
 
    71         <a onClick={this.onClickClose}>
 
    58         <a onClick={this.onClickClose}>
 
    72           <span className="material-icons">close</span>
 
    59           <span className="material-icons">close</span>
 
    73         </a>
 
    60         </a>
 
    74       );
 
    61       );
 
    81     )
 
    68     )
 
    82   }
 
    69   }
 
    83 
    70 
    84   render() {
 
    71   render() {
 
    85     return (
 
    72     return (
 
    86       <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }>
 
    73       <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }>
 
    87         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
 
    74         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
 
    88         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
 
    75         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
 
    89         { this.renderNoteContent() }
 
    76         { this.renderNoteContent() }
 
    90         <div className="note-margin-comment">
 
    77         <div className="note-margin-comment">
 
    91           <small className="text-muted">{ this.props.note.marginComment }</small>
 
    78           <small className="text-muted">{ this.props.note.marginComment }</small>
 
    95     );
 
    82     );
 
    96   };
 
    83   };
 
    97 }
 
    84 }
 
    98 
    85 
    99 Note.propTypes = {
 
    86 Note.propTypes = {
 
   100   note: PropTypes.object.isRequired
 
    87   note: PropTypes.object.isRequired,
 
   101 };
 
    88 };
 
   102 
    89 
   103 function mapStateToProps(state, props) {
 
    90 export default Note;
 
   104   return props;
 
       
   105 }
 
       
   106 
       
   107 function mapDispatchToProps(dispatch) {
 
       
   108   return {
 
       
   109     notesActions: bindActionCreators(notesActions, dispatch),
 
       
   110   }
 
       
   111 }
 
       
   112 
       
   113 export default connect(mapStateToProps, mapDispatchToProps)(Note);
irinotes