Update session in PouchDB.
--- 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(),
])
}