--- a/client/src/components/Note.js	Thu Jun 22 12:37:53 2017 +0200
+++ b/client/src/components/Note.js	Fri Jun 23 10:16:49 2017 +0200
@@ -1,22 +1,80 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
-import {formatTimestamp} from '../utils';
+import { formatTimestamp } from '../utils';
+import SlateEditor from './SlateEditor';
+import * as notesActions from '../actions/notesActions';
+
+class Note extends Component {
+
+  state = {
+    edit: false
+  }
+
+  toggleEditMode = () => {
+    const { edit } = this.state;
+    this.setState({ edit: !edit })
+  }
+
+  onClickDelete = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.props.notesActions.deleteNote(this.props.note);
+  }
 
-const Note = ({note}) => {
-  return (
-    <div id={"note-" + note._id} className="note">
-      <span className="start">{formatTimestamp(note.startedAt)}</span>
-      <span className="finish">{formatTimestamp(note.finishedAt)}</span>
-      <div className="note-content" dangerouslySetInnerHTML={{ __html: note.html }} />
-      <div className="note-margin-comment">
-        <small className="text-muted">{ note.marginComment }</small>
+  renderNoteContent() {
+    if (this.state.edit) {
+      return (
+        <div className="note-content">
+          <SlateEditor ref="editor"
+            onChange={this.onEditorChange}
+            onEnterKeyDown={this.onAddNoteClick}
+            onButtonClick={this.onAddNoteClick}
+            onCheckboxChange={this.onCheckboxChange}
+            isChecked={this.props.autoSubmit}
+            isButtonDisabled={this.state.buttonDisabled}
+            withButtons={false}
+            note={this.props.note} />
+        </div>
+      )
+    }
+
+    return (
+      <div className="note-content" dangerouslySetInnerHTML={{ __html: this.props.note.html }} />
+    )
+  }
+
+  render() {
+    return (
+      <div id={"note-" + this.props.note._id} className="note" onClick={ this.toggleEditMode }>
+        <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
+        <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
+        { this.renderNoteContent() }
+        <div className="note-margin-comment">
+          <small className="text-muted">{ this.props.note.marginComment }</small>
+        </div>
+        <a onClick={this.onClickDelete}>
+          <span className="material-icons">delete</span>
+        </a>
       </div>
-    </div>
-  );
-};
+    );
+  };
+}
 
 Note.propTypes = {
   note: PropTypes.object.isRequired
 };
 
-export default Note;
+function mapStateToProps(state, props) {
+  return props;
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    notesActions: bindActionCreators(notesActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Note);