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 } from 'react-bootstrap'; |
4 import { Grid, Row, Col } 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 SessionForm from './SessionForm'; |
9 import * as sessionsActions from '../actions/sessionsActions'; |
10 import * as sessionsActions from '../actions/sessionsActions'; |
10 import * as notesActions from '../actions/notesActions'; |
11 import * as notesActions from '../actions/notesActions'; |
11 import _ from 'lodash'; |
|
12 |
12 |
13 class Session extends Component { |
13 class Session extends Component { |
14 |
14 |
15 onChange = (e) => { |
|
16 const { name, value } = e.target; |
|
17 const changes = { [name]: value } |
|
18 this.onChangeThrottle(changes); |
|
19 } |
|
20 |
|
21 onChangeThrottle = _.debounce((changes) => { |
|
22 this.props.sessionsActions.updateSession(this.props.currentSession, changes); |
|
23 }, 750) |
|
24 |
|
25 componentDidMount = () => { |
15 componentDidMount = () => { |
26 this.props.notesActions.loadNotesBySession({ _id: this.props.match.params.id }); |
16 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 onSubmit={ e => { e.preventDefault() } }> |
|
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 ); |
|
63 } |
17 } |
64 |
18 |
65 render() { |
19 render() { |
66 return ( |
20 return ( |
67 <div> |
21 <div> |
68 <Navbar history={this.props.history} /> |
22 <Navbar history={this.props.history} /> |
69 <div className="session-container"> |
23 <div className="session-container"> |
70 <Grid fluid className="session-notes"> |
24 <Grid fluid className="session-notes"> |
71 <Row> |
25 <Row> |
72 <Col md={3}> |
26 <Col md={3}> |
73 <Panel> |
27 <SessionForm session={this.props.currentSession} /> |
74 { this.renderForm() } |
|
75 </Panel> |
|
76 </Col> |
28 </Col> |
77 <Col md={9}> |
29 <Col md={9}> |
78 <NotesList notes={this.props.notes} /> |
30 <NotesList notes={this.props.notes} /> |
79 </Col> |
31 </Col> |
80 </Row> |
32 </Row> |