client/src/components/SessionList.js
changeset 147 a2e61192db50
parent 146 4f4bb2b3ef39
child 148 fcce52a159bc
equal deleted inserted replaced
146:4f4bb2b3ef39 147:a2e61192db50
    14 class SessionList extends Component {
    14 class SessionList extends Component {
    15   constructor(props) {
    15   constructor(props) {
    16     super(props);
    16     super(props);
    17     this.state = {
    17     this.state = {
    18       modalIsOpen: false,
    18       modalIsOpen: false,
    19       sessionToDelete: null
    19       sessionToDelete: null,
    20     };
    20     };
    21   }
    21   }
    22 
    22 
    23   openModal = () => {
    23   openModal = () => {
    24     this.setState({modalIsOpen: true});
    24     this.setState({modalIsOpen: true});
    58 
    58 
    59   onClickDelete(session, e) {
    59   onClickDelete(session, e) {
    60     e.preventDefault();
    60     e.preventDefault();
    61     e.stopPropagation();
    61     e.stopPropagation();
    62 
    62 
       
    63 
    63     this.setState({
    64     this.setState({
    64       modalIsOpen: true,
    65       modalIsOpen: true,
    65       sessionToDelete: session
    66       sessionToDelete: session
    66     })
    67     })
    67   }
    68   }
    78   }
    79   }
    79 
    80 
    80   render() {
    81   render() {
    81     return (
    82     return (
    82       <div>
    83       <div>
       
    84       <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
    83         <Navbar history={this.props.history} />
    85         <Navbar history={this.props.history} />
    84         <div className="container-fluid">
    86         <div className="container-fluid">
    85           <div className="row">
    87           <div className="row">
    86             <div className="col-md-6 col-md-offset-3">
       
    87               <ul className="list-group">
       
    88                 {this.props.sessions.map((session) =>
    88                 {this.props.sessions.map((session) =>
    89                   <li className="list-group-item" key={session.get('_id')}>
    89                   <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
    90                     <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span>
    90                    <div className="col-md-4 session" key={session.get('_id')}>
    91                     <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
    91                       <span className="session-title">{session.title || ''}<br /></span>
    92                       <span className="material-icons">delete</span>
    92                       <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
    93                     </a>
    93                       <span className="session-description">{session.description}<br /></span>
    94                   </li>
    94                       <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
       
    95                         <span className="material-icons">delete</span>
       
    96                       </a>
       
    97                   </div>
       
    98                 </a>
    95                 )}
    99                 )}
    96               </ul>
   100                </div>
    97               <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
       
    98             </div>
       
    99           </div>
   101           </div>
   100         </div>
       
   101 
       
   102         <Modal
   102         <Modal
   103         className="Modal__Bootstrap modal-dialog"
   103         className="Modal__Bootstrap modal-dialog"
   104         // closeTimeoutMS={150}
   104         // closeTimeoutMS={150}
   105         isOpen={this.state.modalIsOpen}
   105         isOpen={this.state.modalIsOpen}
   106         onRequestClose={this.handleModalCloseRequest}
   106         onRequestClose={this.handleModalCloseRequest}
   118       </div>
   118       </div>
   119     );
   119     );
   120   }
   120   }
   121 }
   121 }
   122 
   122 
       
   123 
       
   124 
   123 function mapStateToProps(state, props) {
   125 function mapStateToProps(state, props) {
   124   return {
   126   return {
   125     sessions: getActiveSessions(state),
   127     sessions: getActiveSessions(state),
   126     currentUser: getCurrentUser(state),
   128     currentUser: getCurrentUser(state),
   127     groups: getGroups(state),
   129     groups: getGroups(state),