Api added. Notes actions(add/init/del).

client/actions/NotesActions.js

@@ -0,0 +1,37 @@
+import AppDispatcher from '../dispatcher/AppDispatcher';
+import Constants from '../constants/AppConstants';
+
+import api from '../api';
+
+const NoteActions = {
+    loadNotes() {
+        AppDispatcher.dispatch({
+            type: Constants.LOAD_NOTES_REQUEST
+        });
+
+        api.listNote()
+            .then(({data}) =>
+                AppDispatcher.dispatch({
+                    type: Constants.LOAD_NOTES_SUCCESS,
+                    notes: data
+                }))
+            .catch(err => AppDispatcher.dispatch({
+                type: Constants.LOAD_NOTES_FAIL,
+                error: err
+            }))
+    },
+
+    createNote(note) {
+        api.createNote(note)
+            .then(() => this.loadNotes())
+            .catch(err => console.log(err));
+    },
+
+    deleteNotes(noteID) {
+        api.deleteNotes(noteID)
+            .then(() => this.loadNotes())
+            .catch((err) => console.log(err));
+    }
+};
+
+export default NoteActions;

client/api/index.js

@@ -0,0 +1,17 @@
+import request from 'superagent';
+
+import { apiPrefix } from '../../etc/config.json';
+
+
+//super agent instead of axis
+export default {
+    listNote () {
+        return request.get(`${apiPrefix}/notes`);
+    },
+    createNote (data) {
+        return request.post(`${apiPrefix}/notes`).send(data);
+    },
+    deleteNotes (noteId) {
+        return request.del(`${apiPrefix}/notes/${noteId}`);
+    }
+};

client/components/App.jsx

@@ -5,11 +5,20 @@ import {NotesGrid} from "./NotesGrid.jsx";
 import './App.less';
 
 export class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleNoteAdd = this.handleNoteAdd.bind(this);
+    }
+    //this handler to add note
+    handleNoteAdd() {
+        console.log(this.props);
+    }
+
     render() {
         return (
             <div className="App">
                 <h2 className="App_header">Notes App</h2>
-                <NotesGrid />
+                <NotesGrid/>
                 <NotesEditor onNoteAdd={this.handleNoteAdd}/>
             </div>
         );

client/components/App.less

@@ -1,12 +1,12 @@
-.App {
-  max-width: 1200px;
-  width: 100%;
-}
-
-.App__header {
-  text-align: center;
-  font-weight: 500;
-  color: grey;
-  text-shadow: 0px 2px 3px rbga(255,255,255,0.5);
-}
-
+.App {
+  max-width: 1200px;
+  width: 100%;
+}
+
+.App__header {
+  text-align: center;
+  font-weight: 500;
+  color: grey;
+  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
+}
+

client/components/Note.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
-
-export class Note extends React.Component {
-    render() {
-        return <h1>Note</h1>;
-    }
+import React from 'react';
+
+export class Note extends React.Component {
+    render() {
+        return <h1>Note</h1>;
+    }
 }

client/components/NoteEditor.less

@@ -1,79 +1,79 @@
-.NoteEditor {
-  width: 100%;
-  max-width: 600px;
-  padding: 16px;
-  margin: 16px auto;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-  border-radius: 2px;
-  display: flex;
-  flex-direction: column;
-}
-
-.NoteEditor__text {
-  width: 100%;
-  resize: none;
-  margin: 5px;
-  font-size: 14px;
-  border: none;
-  font-weight: 300;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.NoteEditor__title {
-  font-size: 14px;
-  width: 100%;
-  resize: none;
-  margin: 5px;
-  border: none;
-  font-weight: 500;
-
-  &:focus {
-    outline: 0;
-  }
-}
-
-.NoteEditor__footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.NoteEditor__button {
-  border: 0 none;
-  border-radius: 24px;
-  padding: 10px 15px;
-  margin: 10px;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 160px;
-  text-align: center;
-  line-height: 1.3;
-  font-size: 15px;
-  color: #fff;
-  text-transform: uppercase;
-  font-weight: 500;
-  transition: all 100ms ease-in-out;
-  background: #3ac569;
-  color: white;
-
-  &:hover {
-    opacity: .9;
-    transition: all 100ms ease;
-  }
-
-  &:active {
-    opacity: .75;
-    transform: scale(.97);
-    transition: all 100ms ease;
-  }
-
-  &:focus {
-    outline: 0;
-  }
+.NoteEditor {
+  width: 100%;
+  max-width: 600px;
+  padding: 16px;
+  margin: 16px auto;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+}
+
+.NoteEditor__text {
+  width: 100%;
+  resize: none;
+  margin: 5px;
+  font-size: 14px;
+  border: none;
+  font-weight: 300;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.NoteEditor__title {
+  font-size: 14px;
+  width: 100%;
+  resize: none;
+  margin: 5px;
+  border: none;
+  font-weight: 500;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.NoteEditor__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.NoteEditor__button {
+  border: 0 none;
+  border-radius: 24px;
+  padding: 10px 15px;
+  margin: 10px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 0 0 160px;
+  text-align: center;
+  line-height: 1.3;
+  font-size: 15px;
+  color: #fff;
+  text-transform: uppercase;
+  font-weight: 500;
+  transition: all 100ms ease-in-out;
+  background: #3ac569;
+  color: white;
+
+  &:hover {
+    opacity: .9;
+    transition: all 100ms ease;
+  }
+
+  &:active {
+    opacity: .75;
+    transform: scale(.97);
+    transition: all 100ms ease;
+  }
+
+  &:focus {
+    outline: 0;
+  }
 }