client/src/components/Note.js
changeset 84 bf35a7737f94
parent 82 6f2999873343
child 109 ef62de545a8d
--- a/client/src/components/Note.js	Fri Jun 23 17:58:21 2017 +0200
+++ b/client/src/components/Note.js	Fri Jun 23 18:01:40 2017 +0200
@@ -1,28 +1,15 @@
 import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import { formatTimestamp } from '../utils';
 import SlateEditor from './SlateEditor';
-import * as notesActions from '../actions/notesActions';
 
 class Note extends Component {
 
-  state = {
-    edit: false
-  }
-
-  enterEditMode = () => {
-    const { edit } = this.state;
-    if (edit) return;
-    this.setState({ edit: true })
-  }
-
   onClickDelete = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
-    this.props.notesActions.deleteNote(this.props.note);
+    this.props.onDelete();
   }
 
   onClickButton = (e) => {
@@ -32,25 +19,25 @@
     const html = this.refs.editor.asHtml();
     const categories = this.refs.editor.asCategories();
 
-    this.props.notesActions.updateNote(this.props.note, {
+    const data = {
       plain,
       raw,
       html,
       categories
-    });
+    }
 
-    this.setState({ edit: false })
+    this.props.onSave(this.props.note, data);
   }
 
   onClickClose = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
-    this.setState({ edit: false })
+    this.props.onClose();
   }
 
   renderNoteContent() {
-    if (this.state.edit) {
+    if (this.props.isEditing) {
       return (
         <div className="note-content">
           <SlateEditor ref="editor"
@@ -66,7 +53,7 @@
   }
 
   renderNoteRight() {
-    if (this.state.edit) {
+    if (this.props.isEditing) {
       return (
         <a onClick={this.onClickClose}>
           <span className="material-icons">close</span>
@@ -83,7 +70,7 @@
 
   render() {
     return (
-      <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }>
+      <div id={"note-" + this.props.note._id} className="note" onClick={ this.props.onClick }>
         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
         { this.renderNoteContent() }
@@ -97,17 +84,7 @@
 }
 
 Note.propTypes = {
-  note: PropTypes.object.isRequired
+  note: PropTypes.object.isRequired,
 };
 
-function mapStateToProps(state, props) {
-  return props;
-}
-
-function mapDispatchToProps(dispatch) {
-  return {
-    notesActions: bindActionCreators(notesActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Note);
+export default Note;