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 } from 'react-bootstrap'; |
4 import { Panel, FormGroup, ControlLabel, FormControl, Button, InputGroup, HelpBlock } from 'react-bootstrap'; |
5 import '../App.css'; |
5 import '../App.css'; |
6 import * as sessionsActions from '../actions/sessionsActions'; |
6 import * as sessionsActions from '../actions/sessionsActions'; |
|
7 import * as authActions from '../actions/authActions'; |
7 import _ from 'lodash'; |
8 import _ from 'lodash'; |
8 |
9 |
9 class SessionForm extends Component { |
10 class SessionForm extends Component { |
|
11 |
|
12 state = { |
|
13 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.authActions.createGroup(groupName); |
|
26 } |
10 |
27 |
11 onChange = (e) => { |
28 onChange = (e) => { |
12 const { name, value } = e.target; |
29 const { name, value } = e.target; |
13 const changes = { [name]: value } |
30 const changes = { [name]: value } |
14 this.onChangeThrottle(changes); |
31 this.onChangeThrottle(changes); |
15 } |
32 } |
16 |
33 |
17 onChangeThrottle = _.debounce((changes) => { |
34 onChangeThrottle = _.debounce((changes) => { |
18 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
35 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
19 }, 750) |
36 }, 750) |
|
37 |
|
38 renderCreateGroup = () => { |
|
39 const { createGroup } = this.props; |
|
40 const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name'); |
|
41 |
|
42 let errors = []; |
|
43 if (hasErrors) { |
|
44 const errorMessages = createGroup.get('errorMessages').toArray(); |
|
45 errors = errorMessages.map((message, key) => { |
|
46 return ( |
|
47 <HelpBlock key={ key }>{ message }</HelpBlock> |
|
48 ) |
|
49 }) |
|
50 } |
|
51 |
|
52 if (this.state.createGroup) { |
|
53 return ( |
|
54 <FormGroup validationState={ hasErrors ? 'error' : null }> |
|
55 <InputGroup> |
|
56 <FormControl |
|
57 type="text" |
|
58 placeholder="Enter a name for your group" |
|
59 inputRef={ ref => { this.groupName = ref; } } /> |
|
60 <InputGroup.Button> |
|
61 <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button> |
|
62 </InputGroup.Button> |
|
63 </InputGroup> |
|
64 { errors } |
|
65 <hr /> |
|
66 <Button onClick={ this.toggleCreateGroup }>Cancel</Button> |
|
67 </FormGroup> |
|
68 ) |
|
69 } |
|
70 |
|
71 return ( |
|
72 <FormGroup> |
|
73 <Button onClick={ this.toggleCreateGroup }>Create a group</Button> |
|
74 </FormGroup> |
|
75 ) |
|
76 } |
20 |
77 |
21 render() { |
78 render() { |
22 |
79 |
23 if (!this.props.currentSession) { |
80 if (!this.props.currentSession) { |
24 return ( |
81 return ( |
49 onChange={ this.onChange } |
106 onChange={ this.onChange } |
50 placeholder="Enter a description for this session" |
107 placeholder="Enter a description for this session" |
51 inputRef={ ref => { this.description = ref; } } |
108 inputRef={ ref => { this.description = ref; } } |
52 /> |
109 /> |
53 </FormGroup> |
110 </FormGroup> |
|
111 <FormGroup> |
|
112 { this.renderCreateGroup() } |
|
113 </FormGroup> |
54 </form> |
114 </form> |
55 </Panel> |
115 </Panel> |
56 ); |
116 ); |
57 } |
117 } |
58 } |
118 } |
59 |
119 |
60 function mapStateToProps(state, props) { |
120 function mapStateToProps(state, props) { |
61 return { |
121 return { |
62 currentSession: props.session, |
122 currentSession: props.session, |
|
123 createGroup: state.createGroup |
63 }; |
124 }; |
64 } |
125 } |
65 |
126 |
66 function mapDispatchToProps(dispatch) { |
127 function mapDispatchToProps(dispatch) { |
67 return { |
128 return { |
68 sessionsActions: bindActionCreators(sessionsActions, dispatch), |
129 sessionsActions: bindActionCreators(sessionsActions, dispatch), |
|
130 authActions: bindActionCreators(authActions, dispatch), |
69 } |
131 } |
70 } |
132 } |
71 |
133 |
72 export default connect(mapStateToProps, mapDispatchToProps)(SessionForm); |
134 export default connect(mapStateToProps, mapDispatchToProps)(SessionForm); |