--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/SessionForm.js Mon Jun 19 11:56:06 2017 +0200
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';
+import '../App.css';
+import * as sessionsActions from '../actions/sessionsActions';
+import _ from 'lodash';
+
+class SessionForm extends Component {
+
+ onChange = (e) => {
+ const { name, value } = e.target;
+ const changes = { [name]: value }
+ this.onChangeThrottle(changes);
+ }
+
+ onChangeThrottle = _.debounce((changes) => {
+ this.props.sessionsActions.updateSession(this.props.currentSession, changes);
+ }, 750)
+
+ render() {
+
+ if (!this.props.currentSession) {
+ return (
+ <form></form>
+ )
+ }
+
+ return (
+ <Panel>
+ <form onSubmit={ e => { e.preventDefault() } }>
+ <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>
+ </Panel>
+ );
+ }
+}
+
+function mapStateToProps(state, props) {
+ return {
+ currentSession: props.session,
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ sessionsActions: bindActionCreators(sessionsActions, dispatch),
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);