# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1498121230 -7200
# Node ID 7634b424f426a6135b95293ffb1f5607f772e8da
# Parent  75dc1e794cf4544009dc9b2719c46916599b930b
Add checkbox to add not on enter key.

diff -r 75dc1e794cf4 -r 7634b424f426 client/src/App.scss
--- a/client/src/App.scss	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/App.scss	Thu Jun 22 10:47:10 2017 +0200
@@ -24,15 +24,23 @@
   padding-bottom: 10px;
   border-bottom: 2px solid #eee;
   margin-bottom: 20px;
+  display: flex;
+  align-items: center;
   .button {
     color: #ccc;
     cursor: pointer;
     margin-right: 10px;
   }
-
   .button[data-active="true"] {
     color: black;
   }
+  > *:last-child {
+    margin-left: auto;
+    .checkbox {
+        display: inline-block;
+        margin-right: 10px;
+    }
+  }
 }
 
 .hovering-menu {
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/actions/userActions.js
--- a/client/src/actions/userActions.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/actions/userActions.js	Thu Jun 22 10:47:10 2017 +0200
@@ -8,3 +8,10 @@
     lastname
   };
 }
+
+export const setAutoSubmit = (value) => {
+  return {
+    type: types.USER_TOGGLE_AUTO_SUBMIT,
+    value
+  };
+}
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/components/NoteInput.js
--- a/client/src/components/NoteInput.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/components/NoteInput.js	Thu Jun 22 10:47:10 2017 +0200
@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Form, FormControl, Button, Label } from 'react-bootstrap';
+import { Form, FormControl, Label } from 'react-bootstrap';
 import moment from 'moment';
 
 import PropTypes from 'prop-types';
 import SlateEditor from './SlateEditor';
 import * as notesActions from '../actions/notesActions';
+import * as userActions from '../actions/userActions';
 
 class NoteInput extends Component {
 
@@ -25,6 +26,7 @@
   }
 
   onAddNoteClick = () => {
+
     const plain = this.refs.editor.asPlain();
     const raw = this.refs.editor.asRaw();
     const html = this.refs.editor.asHtml();
@@ -44,6 +46,10 @@
     setTimeout(() => this.refs.editor.focus(), 250);
   }
 
+  onCheckboxChange = (e) => {
+    this.props.userActions.setAutoSubmit(e.target.checked);
+  }
+
   componentDidMount() {
     const text = this.refs.editor.asPlain();
     this.setState({ buttonDisabled: text.length === 0 });
@@ -68,7 +74,13 @@
       <Form>
         <div className="editor">
           <div className="editor-left">
-            <SlateEditor ref="editor" onChange={this.onEditorChange} onEnterKeyDown={this.onAddNoteClick} />
+            <SlateEditor ref="editor"
+              onChange={this.onEditorChange}
+              onEnterKeyDown={this.onAddNoteClick}
+              onButtonClick={this.onAddNoteClick}
+              onCheckboxChange={this.onCheckboxChange}
+              isChecked={this.props.autoSubmit}
+              isButtonDisabled={this.state.buttonDisabled} />
           </div>
           <div className="editor-right">
             <FormControl
@@ -79,19 +91,21 @@
             />
           </div>
         </div>
-        <Button disabled={this.state.buttonDisabled} bsStyle="primary" type="button" onClick={this.onAddNoteClick}>Add Note</Button>
       </Form>
     );
   }
 }
 
 function mapStateToProps(state, props) {
-  return {};
+  return {
+    autoSubmit: state.autoSubmit
+  };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     notesActions: bindActionCreators(notesActions, dispatch),
+    userActions: bindActionCreators(userActions, dispatch),
   }
 }
 
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/components/SlateEditor.js
--- a/client/src/components/SlateEditor.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/components/SlateEditor.js	Thu Jun 22 10:47:10 2017 +0200
@@ -1,6 +1,7 @@
 import { Editor, Plain, Raw } from 'slate'
 import React from 'react'
 import Portal from 'react-portal'
+import { Button } from 'react-bootstrap'
 import moment from 'moment'
 import Immutable from 'immutable'
 import HtmlSerializer from '../HtmlSerializer'
@@ -83,6 +84,7 @@
       hoveringMenu: null,
       isPortalOpen: false,
       categories: Immutable.List([]),
+      isCheckboxChecked: false,
     };
   }
 
@@ -197,12 +199,11 @@
 
   onKeyDown = (e, data, state) => {
 
-    if (data.key === 'enter') {
-      if (typeof this.props.onEnterKeyDown === 'function') {
-        e.preventDefault();
-        this.props.onEnterKeyDown();
-        return state;
-      }
+    if (data.key === 'enter' && this.props.isChecked && typeof this.props.onEnterKeyDown === 'function') {
+      e.preventDefault();
+      this.props.onEnterKeyDown();
+
+      return state;
     }
 
     if (!data.isMod) return
@@ -376,6 +377,18 @@
     });
   }
 
+  onButtonClick = () => {
+    if (typeof this.props.onButtonClick === 'function') {
+      this.props.onButtonClick();
+    }
+  }
+
+  onCheckboxChange = (e) => {
+    if (typeof this.props.onCheckboxChange === 'function') {
+      this.props.onCheckboxChange(e);
+    }
+  }
+
   /**
    * Render.
    *
@@ -407,6 +420,14 @@
 
         {this.renderBlockButton('numbered-list', 'format_list_numbered')}
         {this.renderBlockButton('bulleted-list', 'format_list_bulleted')}
+        <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>
+        </div>
       </div>
     )
   }
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/constants/actionTypes.js
--- a/client/src/constants/actionTypes.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/constants/actionTypes.js	Thu Jun 22 10:47:10 2017 +0200
@@ -16,3 +16,4 @@
 
 export const USER_UPDATE_SETTINGS_ASYNC = 'USER_UPDATE_SETTINGS_ASYNC';
 export const USER_UPDATE_SETTINGS = 'USER_UPDATE_SETTINGS'
+export const USER_TOGGLE_AUTO_SUBMIT = 'USER_TOGGLE_AUTO_SUBMIT';
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/reducers/index.js
--- a/client/src/reducers/index.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/reducers/index.js	Thu Jun 22 10:47:10 2017 +0200
@@ -5,6 +5,7 @@
 import notes from './notesReducer';
 import { sessions } from './sessionsReducer';
 import { isAuthenticated, currentUser, login, token } from './authReducer';
+import { autoSubmit } from './miscReducer';
 
 const rootReducer = combineReducers({
   sessions,
@@ -14,6 +15,7 @@
   login,
   token,
   router: routerReducer,
+  autoSubmit
 });
 
 export default rootReducer;
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/reducers/miscReducer.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/reducers/miscReducer.js	Thu Jun 22 10:47:10 2017 +0200
@@ -0,0 +1,12 @@
+import * as types from '../constants/actionTypes';
+
+export const autoSubmit = (state = false, action) => {
+  switch (action.type) {
+    case types.USER_TOGGLE_AUTO_SUBMIT:
+      return action.value;
+    default:
+      return state;
+  }
+}
+
+
diff -r 75dc1e794cf4 -r 7634b424f426 client/src/store/configureStore.js
--- a/client/src/store/configureStore.js	Wed Jun 21 14:12:45 2017 +0200
+++ b/client/src/store/configureStore.js	Thu Jun 22 10:47:10 2017 +0200
@@ -28,6 +28,7 @@
   isAuthenticated: false,
   currentUser: null,
   token: '',
+  autoSubmit: false,
   login: Immutable.Map({
     loading: false,
     success: false,
@@ -43,7 +44,7 @@
 const persistOptions = {
   storage: localForage,
   transforms: [immutableTransform(immutableTransformConfig)],
-  whitelist: ['sessions', 'notes', 'isAuthenticated', 'currentUser', 'token', 'offline']
+  whitelist: ['sessions', 'notes', 'isAuthenticated', 'currentUser', 'token', 'offline', 'autoSubmit']
 }
 
 const apiClient = new APIClient(config.apiRootUrl);