added etit function to client

client/actions/NotesActions.js

@@ -31,6 +31,12 @@ const NoteActions = {
         api.deleteNote(noteID)
             .then(() => this.loadNotes())
             .catch((err) => console.log(err));
+    },
+
+    updateNote(noteID, data) {
+        api.updateNote(noteID, data)
+            .then(()=> this.loadNotes())
+            .catch((err) => console.log(err))
     }
 };
 

client/components/App.jsx

@@ -20,17 +20,16 @@ export class App extends React.Component {
     constructor(props) {
         super(props);
         this.state = getStateFromFlux();
-        this.handleNoteAdd = this.handleNoteAdd.bind(this);
-        this.handleNoteDelete = this.handleNoteDelete.bind(this);
         this._onChange = this._onChange.bind(this);
+        this.handleNoteUpdate = this.handleNoteUpdate.bind(this);
     }
 
     componentWillMount() {
         NotesActions.loadNotes();
     }
 
     componentDidMount() {
-        NotesStore.addChangeListener(this._onChange)
+        NotesStore.addChangeListener(this._onChange);
     }
 
     componentWillUnmount() {
@@ -45,12 +44,24 @@ export class App extends React.Component {
         NotesActions.deleteNote(note.id);
     }
 
+    handleNoteUpdate(data) {
+        this.setState({noteToEdit: data});
+    }
+
     render() {
         return (
             <div className="App">
                 <h2 className="App_header">Notes App</h2>
-                <NotesGrid notes={this.state.notes} onNoteDelete={this.handleNoteDelete}/>
-                <NotesEditor onNoteAdd={this.handleNoteAdd}/>
+                <NotesGrid
+                    notes={this.state.notes}
+                    onNoteDelete={this.handleNoteDelete}
+                    onNoteUpdate={this.handleNoteUpdate}
+                />
+                <NotesEditor
+                    onNoteAdd={this.handleNoteAdd}
+                    onNoteUpdate={this.handleNoteUpdate}
+                    noteToEdit={this.state.noteToEdit}
+                />
             </div>
         );
     }

client/components/Note.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
 
+import {FaClose, FaEdit} from 'react-icons/lib/fa/';
+
 import './Note.less';
 
 export class Note extends React.Component {
     render() {
         const style = {backgroundColor: this.props.color};
-
         return (
             <div className='Note' style={style}>
-                <span className='Note__del-icon' onClick={this.props.onDelete}>x</span>
+                <FaClose className='Note__del-icon' onClick={this.props.onDelete} />
+                <FaEdit className="Note__edit-icon" onClick={this.props.onUpdate} />
                 {
                     this.props.title
                         ? <h4 className='Note__title'>{this.props.title}</h4>
@@ -17,6 +19,7 @@ export class Note extends React.Component {
                 {
                     this.props.date
                 }
+                {/*this.props.children > text of node Note*/}
                 <div className='Note__text'>{this.props.children}</div>
             </div>
         );

client/components/Note.less

@@ -17,6 +17,9 @@
     .Note__del-icon {
       display: block;
     }
+    .Note__edit-icon{
+      display: block;
+    }
   }
 }
 
@@ -32,4 +35,13 @@
   display: none;
   color: rgba(0,0,0,0.6);
   cursor: pointer;
+}
+
+.Note__edit-icon {
+  position: absolute;
+  top: 20px;
+  right:5px;
+  display: none;
+  color: rgba(0,0,0,0.6);
+  cursor: pointer;
 }

client/components/NotesEditor.jsx

@@ -25,19 +25,31 @@ export class NotesEditor extends React.Component {
 
     handleNoteAdd() {
         const newNote = {
+            id: this.state.id,
             title: this.state.title,
             text: this.state.text,
             color: this.state.color
         };
 
         this.props.onNoteAdd(newNote);
         this.setState({
+            id: undefined,
             title: '',
             text: '',
             color: '#FFFFFF'
         });
     }
 
+    //before mount we change state if props are exist. Edit function
+    componentWillReceiveProps(nextProps) {
+        if(nextProps.noteToEdit) this.setState(nextProps.noteToEdit);
+    }
+
+    //After successful update needs to change state in App. Edit function
+    componentDidUpdate(){
+        if (this.props.noteToEdit) this.props.onNoteUpdate();
+    }
+
     render() {
         return (
             <div className="NoteEditor">
@@ -61,7 +73,7 @@ export class NotesEditor extends React.Component {
                         disabled={!this.state.text}
                         onClick={this.handleNoteAdd}
                     >
-                        Add
+                        {this.state.id ? "Edit" : "Add"}
                     </button>
                 </div>
             </div>

client/components/NotesGrid.jsx

@@ -25,8 +25,9 @@ export class NotesGrid extends React.Component {
                             key={note.id}
                             title={note.title}
                             onDelete={this.props.onNoteDelete.bind(null, note)}
+                            onUpdate={this.props.onNoteUpdate.bind(null, note)}
                             color={note.color}
-                            date={`${note.createdAt.slice(10} {note.createdAt.slice(0,10)}`}
+                            date={`${note.createdAt.slice(11,19)} ${note.createdAt.slice(0,10)}`}
                         >
                             {note.text}
                         </Note>

client/stores/NotesStore.js

@@ -42,7 +42,6 @@ const NotesStore = Object.assign({}, EventEmitter.prototype, {
 });
 
 AppDispatcher.register(function(action) {
-    //console.log(AppConstants, action.type);
     switch(action.type) {
         case AppConstants.LOAD_NOTES_REQUEST: {
             _isLoading = true;