1 import React, { Component } from 'react'; |
1 import React, { Component } from 'react'; |
2 import { connect } from 'react-redux'; |
2 import { connect } from 'react-redux'; |
3 import { bindActionCreators } from 'redux'; |
3 import { bindActionCreators } from 'redux'; |
4 import { Panel, FormGroup, ControlLabel, FormControl, Button, InputGroup, HelpBlock, Glyphicon } from 'react-bootstrap'; |
4 import { Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap'; |
|
5 import GroupForm from './GroupForm'; |
5 import '../App.css'; |
6 import '../App.css'; |
6 import * as sessionsActions from '../actions/sessionsActions'; |
7 import * as sessionsActions from '../actions/sessionsActions'; |
7 import * as authActions from '../actions/authActions'; |
8 import * as authActions from '../actions/authActions'; |
8 import _ from 'lodash'; |
9 import _ from 'lodash'; |
9 |
10 |
10 class SessionForm extends Component { |
11 class SessionForm extends Component { |
11 |
12 |
12 state = { |
13 state = { |
13 createGroup: false |
14 createGroup: false |
14 } |
|
15 |
|
16 toggleCreateGroup = (e) => { |
|
17 e.preventDefault(); |
|
18 const { createGroup } = this.state; |
|
19 this.setState({ createGroup: !createGroup }); |
|
20 } |
|
21 |
|
22 onClickCreateGroup = (e) => { |
|
23 e.preventDefault(); |
|
24 const groupName = this.groupName.value; |
|
25 this.props.sessionsActions.createGroupAndUpdateSession(this.props.currentSession, groupName); |
|
26 } |
15 } |
27 |
16 |
28 onChange = (e) => { |
17 onChange = (e) => { |
29 const { name, value } = e.target; |
18 const { name, value } = e.target; |
30 const changes = { [name]: value } |
19 const changes = { [name]: value } |
34 onChangeThrottle = _.debounce((changes) => { |
23 onChangeThrottle = _.debounce((changes) => { |
35 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
24 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
36 }, 750) |
25 }, 750) |
37 |
26 |
38 onGroupChange = (e) => { |
27 onGroupChange = (e) => { |
39 const groupId = parseInt(this.group.value, 10); |
28 const groupName = e.target.value; |
40 const group = this.props.groups.find(group => group.id === groupId); |
|
41 |
29 |
42 this.props.sessionsActions.updateSession(this.props.currentSession, { group }); |
30 this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName }); |
43 } |
31 } |
44 |
32 |
45 componentWillUpdate = (nextProps, nextState) => { |
33 componentWillUpdate = (nextProps, nextState) => { |
46 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
34 if (nextState.createGroup && nextProps.createGroup.get('success')) { |
47 this.setState({ createGroup: false }) |
35 this.setState({ createGroup: false }) |
48 } |
36 } |
49 } |
|
50 |
|
51 renderCreateGroup = () => { |
|
52 const { createGroup } = this.props; |
|
53 const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name'); |
|
54 |
|
55 let errors = []; |
|
56 if (hasErrors) { |
|
57 const errorMessages = createGroup.get('errorMessages').toArray(); |
|
58 errors = errorMessages.map((message, key) => { |
|
59 return ( |
|
60 <HelpBlock key={ key }>{ message }</HelpBlock> |
|
61 ) |
|
62 }) |
|
63 } |
|
64 |
|
65 if (this.state.createGroup) { |
|
66 return ( |
|
67 <FormGroup validationState={ hasErrors ? 'error' : null }> |
|
68 <InputGroup> |
|
69 <FormControl |
|
70 type="text" |
|
71 placeholder="Enter a name for your group" |
|
72 inputRef={ ref => { this.groupName = ref; } } /> |
|
73 <InputGroup.Button> |
|
74 <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button> |
|
75 </InputGroup.Button> |
|
76 </InputGroup> |
|
77 { errors } |
|
78 <hr /> |
|
79 <Button onClick={ this.toggleCreateGroup }>Cancel</Button> |
|
80 </FormGroup> |
|
81 ) |
|
82 } |
|
83 |
|
84 return ( |
|
85 <FormGroup> |
|
86 <Button className="pull-right" bsSize="small" onClick={ this.toggleCreateGroup }> |
|
87 <Glyphicon glyph="plus" /> Create a new group |
|
88 </Button> |
|
89 </FormGroup> |
|
90 ) |
|
91 } |
37 } |
92 |
38 |
93 render() { |
39 render() { |
94 |
40 |
95 if (!this.props.currentSession) { |
41 if (!this.props.currentSession) { |
107 name="title" |
53 name="title" |
108 defaultValue={ this.props.currentSession.title } |
54 defaultValue={ this.props.currentSession.title } |
109 onChange={ this.onChange } |
55 onChange={ this.onChange } |
110 type="text" |
56 type="text" |
111 placeholder="Enter a title" |
57 placeholder="Enter a title" |
112 inputRef={ ref => { this.title = ref; } } |
|
113 /> |
58 /> |
114 </FormGroup> |
59 </FormGroup> |
115 <FormGroup> |
60 <FormGroup> |
116 <ControlLabel>Description</ControlLabel> |
61 <ControlLabel>Description</ControlLabel> |
117 <FormControl |
62 <FormControl |
118 name="description" |
63 name="description" |
119 componentClass="textarea" |
64 componentClass="textarea" |
120 defaultValue={ this.props.currentSession.description } |
65 defaultValue={ this.props.currentSession.description } |
121 onChange={ this.onChange } |
66 onChange={ this.onChange } |
122 placeholder="Enter a description" |
67 placeholder="Enter a description" |
123 inputRef={ ref => { this.description = ref; } } |
|
124 /> |
68 /> |
125 </FormGroup> |
69 </FormGroup> |
126 <FormGroup> |
70 <FormGroup> |
127 <ControlLabel>Group</ControlLabel> |
71 <ControlLabel>Group</ControlLabel> |
128 <FormControl |
72 <FormControl |
129 name="group" |
73 name="group" |
130 componentClass="select" |
74 componentClass="select" |
131 value={ this.props.group ? this.props.group.id : '' } |
75 value={ this.props.group ? this.props.group.get('name') : '' } |
132 onChange={ this.onGroupChange } |
76 onChange={ this.onGroupChange }> |
133 inputRef={ ref => { this.group = ref; } }> |
|
134 <option /> |
|
135 { this.props.groups.map((group, key) => |
77 { this.props.groups.map((group, key) => |
136 <option key={ key } value={ group.id }>{ group.name }</option> |
78 <option key={ key } value={ group.get('name') }>{ group.get('name') }</option> |
137 ) } |
79 ) } |
138 </FormControl> |
80 </FormControl> |
139 </FormGroup> |
81 </FormGroup> |
140 <FormGroup> |
82 <FormGroup> |
141 { this.renderCreateGroup() } |
83 <GroupForm session={this.props.session} /> |
142 </FormGroup> |
84 </FormGroup> |
143 </form> |
85 </form> |
144 </Panel> |
86 </Panel> |
145 ); |
87 ); |
146 } |
88 } |
147 } |
89 } |
148 |
90 |
149 function mapStateToProps(state, props) { |
91 function mapStateToProps(state, props) { |
150 |
92 |
151 let group; |
93 let group; |
152 if (props.session && props.session.group) { |
94 if (props.session && props.session.get('group')) { |
153 group = state.groups.find(group => props.session.group.get('id') === group.id) |
95 group = state.get('groups').find(group => props.session.get('group') === group.get('name')) |
154 } |
96 } |
155 |
97 |
156 return { |
98 return { |
157 currentSession: props.session, |
99 currentSession: props.session, |
158 createGroup: state.get('createGroup'), |
100 createGroup: state.get('createGroup'), |