--- a/client/src/components/NotesList.js	Fri Jun 23 17:58:21 2017 +0200
+++ b/client/src/components/NotesList.js	Fri Jun 23 18:01:40 2017 +0200
@@ -1,30 +1,100 @@
-import React from 'react';
-
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
+import { Alert, Modal, Button } from 'react-bootstrap';
+import Note from './Note';
+import * as notesActions from '../actions/notesActions';
 
-import { Alert } from 'react-bootstrap';
+class NotesList extends Component {
+
+  state = {
+    editingNote: null,
+    noteToDelete: null,
+    showModal: false,
+  }
+
+  enterEditMode = (note) => {
+    this.setState({ editingNote: note });
+  }
 
-import Note from './Note';
+  closeNote = () => {
+    this.setState({ editingNote: null });
+  }
+
+  confirmDelete = (note) => {
+    this.setState({
+      showModal: true,
+      noteToDelete: note
+    })
+  }
+
+  deleteNote = () => {
+    const { noteToDelete } = this.state;
+    this.props.notesActions.deleteNote(noteToDelete);
+    this.closeModal();
+  }
 
-const NotesList = ({notes}) => {
+  closeModal = () => {
+    this.setState({
+      showModal: false,
+      noteToDelete: null
+    })
+  }
+
+  updateNote = (note, data) => {
+    this.props.notesActions.updateNote(note, data);
+  }
+
+  render() {
+    if (this.props.notes.size === 0) {
+      return (
+        <Alert bsStyle="warning">No notes yet. Add notes with the textarea below.</Alert>
+      );
+    }
+
+    return (
+      <div>
 
-  if (notes.size === 0) {
-    return (
-      <Alert bsStyle="warning">No notes yet. Add notes with the textarea below.</Alert>
+        {this.props.notes.map((note) =>
+          <Note
+            note={ note }
+            key={ note._id }
+            onClick={ this.enterEditMode.bind(this, note) }
+            onClose={ this.closeNote }
+            onDelete={ this.confirmDelete.bind(this, note) }
+            onSave={ this.updateNote }
+            isEditing={ this.state.editingNote && note === this.state.editingNote } />
+        )}
+
+        <Modal show={this.state.showModal} onHide={this.closeModal}>
+          <Modal.Body>
+            Are you sure?
+          </Modal.Body>
+          <Modal.Footer>
+            <Button bsStyle="primary" onClick={ this.deleteNote }>Confirm</Button>
+            <Button onClick={ this.closeModal }>Close</Button>
+          </Modal.Footer>
+        </Modal>
+
+      </div>
     );
   }
-  return (
-    <div>
-      {notes.map((note) =>
-        <Note note={note} key={note._id} />
-      )}
-    </div>
-  );
 };
 
 NotesList.propTypes = {
   notes: PropTypes.instanceOf(Immutable.List).isRequired
 };
 
-export default NotesList;
+function mapStateToProps(state, props) {
+  return props;
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    notesActions: bindActionCreators(notesActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NotesList);