refactor some code

README.md

@@ -1,20 +1,20 @@
 # notes
-############
+###########################################################
 training project based on:
     ---node
     ---express
-    ---react
-    ---flux
-############
+    ---react with flux pattern
+###########################################################
 thanks to:
   +awesome vebinar ==>
     https://github.com/krambertech
   +awesome react info ==>
     https://www.youtube.com/watch?v=iGbw7FFpvXQ
   +awesome flux ==>
     https://habrahabr.ru/post/249279
-
-todo:
-    -colorpicker;
-    -auth;
+  +awesome best-practice ==>
+    https://github.com/khotey 
+
+
+
 

client/api/index.js

@@ -4,13 +4,16 @@ import { apiPrefix } from '../etc/config.json';
 
 
 //super agent instead of axis
+
+//todo:add an api for updateNote
 export default {
     listNote () {
         return request.get(`${apiPrefix}/notes`).then();
     },
     createNote (data) {
         return request.post(`${apiPrefix}/notes`).send(data).then();
     },
+    //updateNote ()
     deleteNote (noteId) {
         return request.del(`${apiPrefix}/notes/${noteId}`).then();
     }

client/components/App.jsx

@@ -3,19 +3,19 @@ import React from 'react';
 import NotesStore from '../stores/NotesStore';
 import NotesActions from '../actions/NotesActions';
 
-import {NotesEditor} from "./NotesEditor.jsx";
-import {NotesGrid} from "./NotesGrid.jsx";
-import {Navbar} from "./Navbar.jsx";
+import {NotesEditor} from './NotesEditor.jsx';
+import {NotesGrid} from './NotesGrid.jsx';
+import {Navbar} from './Navbar.jsx';
 
 import './App.less';
 
 
-function getStateFromFlux() {
+const getStateFromFlux = () => {
     return {
         isLoading: NotesStore.isLoading(),
         notes: NotesStore.getNotes()
     }
-}
+};
 
 export class App extends React.Component {
     constructor(props) {
@@ -49,14 +49,10 @@ export class App extends React.Component {
         this.setState({noteToEdit: data});
     }
 
-    handleAuthentication() {
-
-    }
 
     render() {
         return (
-            <div className="App">
-                <h2 className="App__header">Notes App</h2>
+            <div className='App'>
                 <Navbar onAuthStart={this.handleAuthentication}/>
                 <NotesGrid
                     notes={this.state.notes}

client/components/App.less

@@ -2,11 +2,3 @@
   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/Navbar.jsx

@@ -20,6 +20,7 @@ export class Navbar extends React.Component {
                     <div>Category</div>
                     <div>About</div>
                 </div>
+                <h2 className='Navbar__header'>Notes App</h2>
                 <div className='Navbar__authentication'>
                     <div>
                         <FaUserSecret size='30' color='grey'/>

client/components/Navbar.less

@@ -3,7 +3,6 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
-  background-color: #FFFFFF;
   box-sizing: border-box;
   margin-bottom: 15px;
   border-radius: 2px;
@@ -38,6 +37,16 @@
   }
 }
 
+.Navbar__header {
+  align-self: center;
+  text-align: center;
+  font-weight: 500;
+  color: grey;
+  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
+  margin: 0 auto;
+}
+
+
 .Navbar__authentication {
   display: flex;
   align-items: stretch;

client/main.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {BrowserRouter} from 'react-router-dom';
 import {App} from "./components/App.jsx";
 
 ReactDOM.render(
-    <App />,
-    document.getElementById('mount-point')
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>
+    , document.getElementById('mount-point')
 );

package.json

@@ -16,9 +16,9 @@
     "cors": "^2.8.4",
     "events": "^1.1.1",
     "express": "^4.15.4",
-    "express-jwt": "^5.3.0",
     "express-session": "^1.15.5",
     "flux": "^3.1.3",
+    "jsonwebtoken": "^8.0.0",
     "keymirror": "^0.1.1",
     "less": "^2.7.2",
     "mongoose": "^4.11.7",

public/css/style.css

@@ -12,4 +12,32 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    align-content: center;
+}
+
+#loader {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border: 16px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 16px solid #80D8FF;
+    width: 120px;
+    height: 120px;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }

public/index.html

@@ -3,11 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <title>NotePad</title>
+    <link href="img/favicon.ico" rel="icon" type="image/x-icon" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300,500" type="text/css">
     <link rel="stylesheet" href="css/style.css" type="text/css">
 </head>
 <body>
-    <div id="mount-point"></div>
-    <script type="text/javascript" src="build/bundle.js"></script>
+    <div id="mount-point" >
+        <div id="loader"></div>
+        <script type="text/javascript" src="build/bundle.js"></script>
+
 </body>
 </html>

server/controllers/note.js

@@ -14,7 +14,11 @@ export const getNotes = (req, res, next) => {
 };
 
 export const addNote = (req, res, next) => {
+    console.log(req.body);
     const data = req.body;
+    const userId = req.user ? req.userId : undefined;
+
+    Note.userId = userId;
 
     Note.create(data)
         .then(data => {