1 import React, { Component } from 'react';

     2 import { connect } from 'react-redux';

     3 import { bindActionCreators } from 'redux';

     4 import { Grid, Row, Col, Panel, FormGroup, ControlLabel, FormControl, Button } from 'react-bootstrap';

     5 import '../App.css';

     6 import Navbar from './Navbar';

     7 import NoteInput from './NoteInput';

     8 import NotesList from './NotesList';

     9 import * as sessionsActions from '../actions/sessionsActions';

    10 import * as notesActions from '../actions/notesActions';

    11 

    12 class Session extends Component {

    13 

    14   saveSession = () => {

    15     const title = this.title.value;

    16     const description = this.description.value;

    17 

    18     this.props.sessionsActions.updateSession(this.props.currentSession, {

    19       title: title,

    20       description: description

    21     });

    22   }

    23 

    24   render() {

    25     return (

    26       <div>

    27         <Navbar history={this.props.history} />

    28         <Grid fluid>

    29           <Row>

    30             <Col md={3}>

    31               <Panel>

    32                 <form>

    33                   <FormGroup>

    34                     <ControlLabel>Title</ControlLabel>

    35                     <FormControl

    36                       type="text"

    37                       defaultValue={this.props.currentSession.title}

    38                       placeholder="Enter a title for this session"

    39                       inputRef={ref => { this.title = ref; }}

    40                     />

    41                   </FormGroup>

    42                   <FormGroup>

    43                     <ControlLabel>Description</ControlLabel>

    44                     <FormControl

    45                       componentClass="textarea"

    46                       defaultValue={this.props.currentSession.description}

    47                       placeholder="Enter a description for this session"

    48                       inputRef={ref => { this.description = ref; }}

    49                     />

    50                   </FormGroup>

    51                   <Button bsStyle="primary" onClick={this.saveSession}>Save session</Button>

    52                 </form>

    53               </Panel>

    54             </Col>

    55             <Col md={9}>

    56               <NotesList notes={this.props.notes} />

    57               <hr />

    58               <NoteInput session={this.props.currentSession} addNote={this.props.notesActions.addNote} />

    59             </Col>

    60           </Row>

    61         </Grid>

    62       </div>

    63     );

    64   }

    65 }

    66 

    67 function mapStateToProps(state, props) {

    68 

    69   const sessionId = props.match.params.id;

    70 

    71   const sessions = state.get('sessions');

    72   const notes = state.get('notes');

    73 

    74   const currentSession = sessions.find(session => session.id === sessionId);

    75   const notesBySession = notes.filter(note => note.session === sessionId);

    76 

    77   return {

    78     currentSession: currentSession,

    79     sessions: sessions,

    80     notes: notesBySession

    81   };

    82 }

    83 

    84 function mapDispatchToProps(dispatch) {

    85   return {

    86     sessionsActions: bindActionCreators(sessionsActions, dispatch),

    87     notesActions: bindActionCreators(notesActions, dispatch),

    88   }

    89 }

    90 

    91 export default connect(mapStateToProps, mapDispatchToProps)(Session);