Update session in PouchDB.
authorAlexandre Segura <mex.zktk@gmail.com>
Wed, 14 Jun 2017 12:28:09 +0200
changeset 30 4d93f4ed95bc
parent 29 4cfeabef7d5e
child 31 63be3ce389f7
Update session in PouchDB.
client/src/actions/sessionsActions.js
client/src/components/Session.js
client/src/constants/actionTypes.js
client/src/sagas/index.js
--- a/client/src/actions/sessionsActions.js	Mon Jun 12 18:12:38 2017 +0200
+++ b/client/src/actions/sessionsActions.js	Wed Jun 14 12:28:09 2017 +0200
@@ -16,7 +16,7 @@
 
 export const updateSession = (session, values) => {
   return {
-    type: types.UPDATE_SESSION,
+    type: types.UPDATE_SESSION_ASYNC,
     session: session,
     values: values,
   };
--- a/client/src/components/Session.js	Mon Jun 12 18:12:38 2017 +0200
+++ b/client/src/components/Session.js	Wed Jun 14 12:28:09 2017 +0200
@@ -1,30 +1,67 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';
+import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
 import '../App.css';
 import Navbar from './Navbar';
 import NoteInput from './NoteInput';
 import NotesList from './NotesList';
 import * as sessionsActions from '../actions/sessionsActions';
 import * as notesActions from '../actions/notesActions';
+import _ from 'lodash';
 
 class Session extends Component {
 
-  saveSession = () => {
-    const title = this.title.value;
-    const description = this.description.value;
+  onChange = (e) => {
+    const { name, value } = e.target;
+    const changes = { [name]: value }
+    this.onChangeThrottle(changes);
+  }
 
-    this.props.sessionsActions.updateSession(this.props.currentSession, {
-      title: title,
-      description: description
-    });
-  }
+  onChangeThrottle = _.debounce((changes) => {
+    this.props.sessionsActions.updateSession(this.props.currentSession, changes);
+  }, 750)
 
   componentDidMount = () => {
     this.props.notesActions.loadNotesBySession({ _id: this.props.match.params.id });
   }
 
+  renderForm() {
+
+    if (!this.props.currentSession) {
+      return (
+        <form></form>
+      )
+    }
+
+    return (
+      <form>
+        <FormGroup>
+          <ControlLabel>Title</ControlLabel>
+          <FormControl
+            name="title"
+            defaultValue={ this.props.currentSession.title }
+            onChange={ this.onChange }
+            type="text"
+            placeholder="Enter a title for this session"
+            inputRef={ ref => { this.title = ref; } }
+          />
+        </FormGroup>
+        <FormGroup>
+          <ControlLabel>Description</ControlLabel>
+          <FormControl
+            name="description"
+            componentClass="textarea"
+            defaultValue={ this.props.currentSession.description }
+            onChange={ this.onChange }
+            placeholder="Enter a description for this session"
+            inputRef={ ref => { this.description = ref; } }
+          />
+        </FormGroup>
+      </form>
+    );
+  }
+
   render() {
     return (
       <div>
@@ -33,27 +70,7 @@
           <Row>
             <Col md={3}>
               <Panel>
-                <form>
-                  <FormGroup>
-                    <ControlLabel>Title</ControlLabel>
-                    <FormControl
-                      type="text"
-                      defaultValue={this.props.currentSession ? this.props.currentSession.title : ''}
-                      placeholder="Enter a title for this session"
-                      inputRef={ref => { this.title = ref; }}
-                    />
-                  </FormGroup>
-                  <FormGroup>
-                    <ControlLabel>Description</ControlLabel>
-                    <FormControl
-                      componentClass="textarea"
-                      defaultValue={this.props.currentSession ? this.props.currentSession.description : ''}
-                      placeholder="Enter a description for this session"
-                      inputRef={ref => { this.description = ref; }}
-                    />
-                  </FormGroup>
-                  <Button bsStyle="primary" onClick={this.saveSession}>Save session</Button>
-                </form>
+                { this.renderForm() }
               </Panel>
             </Col>
             <Col md={9}>
@@ -77,9 +94,9 @@
   const currentSession = sessions.find(session => session._id === sessionId);
 
   return {
-    currentSession: currentSession,
-    sessions: sessions,
-    notes: notes
+    currentSession,
+    sessions,
+    notes,
   };
 }
 
--- a/client/src/constants/actionTypes.js	Mon Jun 12 18:12:38 2017 +0200
+++ b/client/src/constants/actionTypes.js	Wed Jun 14 12:28:09 2017 +0200
@@ -6,5 +6,6 @@
 export const CREATE_SESSION = 'CREATE_SESSION';
 export const CREATE_SESSION_ASYNC = 'CREATE_SESSION_ASYNC';
 export const UPDATE_SESSION = 'UPDATE_SESSION';
+export const UPDATE_SESSION_ASYNC = 'UPDATE_SESSION_ASYNC';
 export const LOAD_SESSIONS = 'LOAD_SESSIONS';
 export const LOAD_SESSIONS_ASYNC = 'LOAD_SESSIONS_ASYNC';
--- a/client/src/sagas/index.js	Mon Jun 12 18:12:38 2017 +0200
+++ b/client/src/sagas/index.js	Wed Jun 14 12:28:09 2017 +0200
@@ -40,6 +40,28 @@
 
 // ---
 
+export function* updateSession(action) {
+
+  const { _id } = action.session;
+  let session;
+
+  const response = yield sessionsDB.get(_id).then(function(doc) {
+    session = Object.assign({}, doc, action.values);
+    return sessionsDB.put(session);
+  });
+
+  yield put({
+    type: types.UPDATE_SESSION,
+    session: Object.assign({}, session, { rev: response.rev })
+  })
+}
+
+export function* watchUpdateSession() {
+  yield takeLatest(types.UPDATE_SESSION_ASYNC, updateSession)
+}
+
+// ---
+
 export function* addNote(action) {
   const response = yield notesDB.put(action.note);
   // TODO Error control
@@ -73,5 +95,6 @@
     watchLoadNotesBySession(),
     watchAddNote(),
     watchCreateSession(),
+    watchUpdateSession(),
   ])
 }