# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1498209394 -7200
# Node ID b3a02ea6d09701ec26a6804e5a0b8a24f545bd03
# Parent  772b73e31069d2154f4e74a387856a5e6f752afb
Implement note edition.

diff -r 772b73e31069 -r b3a02ea6d097 client/src/actions/notesActions.js
--- a/client/src/actions/notesActions.js	Fri Jun 23 10:16:49 2017 +0200
+++ b/client/src/actions/notesActions.js	Fri Jun 23 11:16:34 2017 +0200
@@ -50,3 +50,11 @@
     note
   };
 }
+
+export const updateNote = (note, data) => {
+  return {
+    type: types.UPDATE_NOTE,
+    note,
+    data
+  };
+}
diff -r 772b73e31069 -r b3a02ea6d097 client/src/components/Note.js
--- a/client/src/components/Note.js	Fri Jun 23 10:16:49 2017 +0200
+++ b/client/src/components/Note.js	Fri Jun 23 11:16:34 2017 +0200
@@ -12,9 +12,10 @@
     edit: false
   }
 
-  toggleEditMode = () => {
+  enterEditMode = () => {
     const { edit } = this.state;
-    this.setState({ edit: !edit })
+    if (edit) return;
+    this.setState({ edit: true })
   }
 
   onClickDelete = (e) => {
@@ -24,19 +25,30 @@
     this.props.notesActions.deleteNote(this.props.note);
   }
 
+  onClickButton = (e) => {
+
+    const plain = this.refs.editor.asPlain();
+    const raw = this.refs.editor.asRaw();
+    const html = this.refs.editor.asHtml();
+    const categories = this.refs.editor.asCategories();
+
+    this.props.notesActions.updateNote(this.props.note, {
+      plain,
+      raw,
+      html,
+      categories
+    });
+
+    this.setState({ edit: false })
+  }
+
   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} />
+            onButtonClick={ this.onClickButton }
+            note={ this.props.note } />
         </div>
       )
     }
@@ -48,7 +60,7 @@
 
   render() {
     return (
-      <div id={"note-" + this.props.note._id} className="note" onClick={ this.toggleEditMode }>
+      <div id={"note-" + this.props.note._id} className="note" onClick={ this.enterEditMode }>
         <span className="start">{ formatTimestamp(this.props.note.startedAt) }</span>
         <span className="finish">{ formatTimestamp(this.props.note.finishedAt) }</span>
         { this.renderNoteContent() }
diff -r 772b73e31069 -r b3a02ea6d097 client/src/components/NoteInput.js
--- a/client/src/components/NoteInput.js	Fri Jun 23 10:16:49 2017 +0200
+++ b/client/src/components/NoteInput.js	Fri Jun 23 11:16:34 2017 +0200
@@ -68,8 +68,7 @@
               onButtonClick={this.onAddNoteClick}
               onCheckboxChange={this.onCheckboxChange}
               isChecked={this.props.autoSubmit}
-              isButtonDisabled={this.state.buttonDisabled}
-              withButtons={true} />
+              isButtonDisabled={this.state.buttonDisabled} />
           </div>
           <div className="editor-right">
             <FormControl
diff -r 772b73e31069 -r b3a02ea6d097 client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Fri Jun 23 10:16:49 2017 +0200
+++ b/client/src/components/SlateEditor.js	Fri Jun 23 11:16:34 2017 +0200
@@ -426,21 +426,23 @@
     )
   }
 
+  renderToolbarCheckbox = () => {
+    return (
+      <div className="checkbox">
+        <label>
+          <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note
+        </label>
+      </div>
+    )
+  }
+
   renderToolbarButtons = () => {
-    if (!this.props.withButtons) {
-      return (
-        <div />
-      )
-    }
-
     return (
       <div>
-        <div className="checkbox">
-          <label>
-            <input type="checkbox" checked={this.props.isChecked} onChange={this.onCheckboxChange} /> <kbd>Enter</kbd> = add note
-          </label>
-        </div>
-        <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>Add note</Button>
+        { !this.props.note && this.renderToolbarCheckbox() }
+        <Button bsStyle="primary" disabled={this.props.isButtonDisabled} onClick={this.onButtonClick}>
+        { this.props.note ? 'Save note' : 'Add note' }
+        </Button>
       </div>
     );
   }
diff -r 772b73e31069 -r b3a02ea6d097 client/src/constants/actionTypes.js
--- a/client/src/constants/actionTypes.js	Fri Jun 23 10:16:49 2017 +0200
+++ b/client/src/constants/actionTypes.js	Fri Jun 23 11:16:34 2017 +0200
@@ -2,6 +2,7 @@
 
 export const ADD_NOTE = 'ADD_NOTE';
 export const DELETE_NOTE = 'DELETE_NOTE';
+export const UPDATE_NOTE = 'UPDATE_NOTE';
 
 export const CREATE_SESSION = 'CREATE_SESSION';
 export const UPDATE_SESSION = 'UPDATE_SESSION';
diff -r 772b73e31069 -r b3a02ea6d097 client/src/reducers/notesReducer.js
--- a/client/src/reducers/notesReducer.js	Fri Jun 23 10:16:49 2017 +0200
+++ b/client/src/reducers/notesReducer.js	Fri Jun 23 11:16:34 2017 +0200
@@ -2,6 +2,14 @@
 import * as types from '../constants/actionTypes';
 import NoteRecord from '../store/noteRecord';
 
+const findNoteIndex = (notes, id) => {
+  return notes.findIndex((note) => note.get('_id') === id);
+}
+
+const findNote = (notes, id) => {
+  return notes.get(findNoteIndex(notes, id));
+}
+
 export default (state = Immutable.List([]), action) => {
   switch (action.type) {
     case types.ADD_NOTE:
@@ -9,6 +17,15 @@
     case types.DELETE_NOTE:
       const noteIndex = state.findIndex((note) => note.get('_id') === action.note.get('_id'));
       return state.delete(noteIndex);
+    case types.UPDATE_NOTE:
+      const index = findNoteIndex(state, action.note.get('_id'));
+      const note = findNote(state, action.note.get('_id'));
+      const newNote = note
+        .set('plain', action.data.plain)
+        .set('raw', action.data.raw)
+        .set('html', action.data.html)
+        .set('categories', action.data.categories);
+      return state.set(index, newNote);
     default:
       return state;
   }