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 { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap'; |
4 import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl } from 'react-bootstrap'; |
5 import '../App.css'; |
5 import '../App.css'; |
6 import Navbar from './Navbar'; |
6 import Navbar from './Navbar'; |
7 import NoteInput from './NoteInput'; |
7 import NoteInput from './NoteInput'; |
8 import NotesList from './NotesList'; |
8 import NotesList from './NotesList'; |
9 import * as sessionsActions from '../actions/sessionsActions'; |
9 import * as sessionsActions from '../actions/sessionsActions'; |
10 import * as notesActions from '../actions/notesActions'; |
10 import * as notesActions from '../actions/notesActions'; |
|
11 import _ from 'lodash'; |
11 |
12 |
12 class Session extends Component { |
13 class Session extends Component { |
13 |
14 |
14 saveSession = () => { |
15 onChange = (e) => { |
15 const title = this.title.value; |
16 const { name, value } = e.target; |
16 const description = this.description.value; |
17 const changes = { [name]: value } |
|
18 this.onChangeThrottle(changes); |
|
19 } |
17 |
20 |
18 this.props.sessionsActions.updateSession(this.props.currentSession, { |
21 onChangeThrottle = _.debounce((changes) => { |
19 title: title, |
22 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
20 description: description |
23 }, 750) |
21 }); |
|
22 } |
|
23 |
24 |
24 componentDidMount = () => { |
25 componentDidMount = () => { |
25 this.props.notesActions.loadNotesBySession({ _id: this.props.match.params.id }); |
26 this.props.notesActions.loadNotesBySession({ _id: this.props.match.params.id }); |
|
27 } |
|
28 |
|
29 renderForm() { |
|
30 |
|
31 if (!this.props.currentSession) { |
|
32 return ( |
|
33 <form></form> |
|
34 ) |
|
35 } |
|
36 |
|
37 return ( |
|
38 <form> |
|
39 <FormGroup> |
|
40 <ControlLabel>Title</ControlLabel> |
|
41 <FormControl |
|
42 name="title" |
|
43 defaultValue={ this.props.currentSession.title } |
|
44 onChange={ this.onChange } |
|
45 type="text" |
|
46 placeholder="Enter a title for this session" |
|
47 inputRef={ ref => { this.title = ref; } } |
|
48 /> |
|
49 </FormGroup> |
|
50 <FormGroup> |
|
51 <ControlLabel>Description</ControlLabel> |
|
52 <FormControl |
|
53 name="description" |
|
54 componentClass="textarea" |
|
55 defaultValue={ this.props.currentSession.description } |
|
56 onChange={ this.onChange } |
|
57 placeholder="Enter a description for this session" |
|
58 inputRef={ ref => { this.description = ref; } } |
|
59 /> |
|
60 </FormGroup> |
|
61 </form> |
|
62 ); |
26 } |
63 } |
27 |
64 |
28 render() { |
65 render() { |
29 return ( |
66 return ( |
30 <div> |
67 <div> |
31 <Navbar history={this.props.history} /> |
68 <Navbar history={this.props.history} /> |
32 <Grid fluid> |
69 <Grid fluid> |
33 <Row> |
70 <Row> |
34 <Col md={3}> |
71 <Col md={3}> |
35 <Panel> |
72 <Panel> |
36 <form> |
73 { this.renderForm() } |
37 <FormGroup> |
|
38 <ControlLabel>Title</ControlLabel> |
|
39 <FormControl |
|
40 type="text" |
|
41 defaultValue={this.props.currentSession ? this.props.currentSession.title : ''} |
|
42 placeholder="Enter a title for this session" |
|
43 inputRef={ref => { this.title = ref; }} |
|
44 /> |
|
45 </FormGroup> |
|
46 <FormGroup> |
|
47 <ControlLabel>Description</ControlLabel> |
|
48 <FormControl |
|
49 componentClass="textarea" |
|
50 defaultValue={this.props.currentSession ? this.props.currentSession.description : ''} |
|
51 placeholder="Enter a description for this session" |
|
52 inputRef={ref => { this.description = ref; }} |
|
53 /> |
|
54 </FormGroup> |
|
55 <Button bsStyle="primary" onClick={this.saveSession}>Save session</Button> |
|
56 </form> |
|
57 </Panel> |
74 </Panel> |
58 </Col> |
75 </Col> |
59 <Col md={9}> |
76 <Col md={9}> |
60 <NotesList notes={this.props.notes} /> |
77 <NotesList notes={this.props.notes} /> |
61 <hr /> |
78 <hr /> |