client/src/components/SessionList.js
changeset 147 a2e61192db50
parent 146 4f4bb2b3ef39
child 148 fcce52a159bc
--- a/client/src/components/SessionList.js	Thu Aug 16 22:32:36 2018 +0200
+++ b/client/src/components/SessionList.js	Mon Aug 27 19:53:40 2018 +0200
@@ -16,7 +16,7 @@
     super(props);
     this.state = {
       modalIsOpen: false,
-      sessionToDelete: null
+      sessionToDelete: null,
     };
   }
 
@@ -60,6 +60,7 @@
     e.preventDefault();
     e.stopPropagation();
 
+
     this.setState({
       modalIsOpen: true,
       sessionToDelete: session
@@ -80,25 +81,24 @@
   render() {
     return (
       <div>
+      <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
         <Navbar history={this.props.history} />
         <div className="container-fluid">
           <div className="row">
-            <div className="col-md-6 col-md-offset-3">
-              <ul className="list-group">
                 {this.props.sessions.map((session) =>
-                  <li className="list-group-item" key={session.get('_id')}>
-                    <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>
-                    <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
-                      <span className="material-icons">delete</span>
-                    </a>
-                  </li>
+                  <a className="sessions" href="#session" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
+                   <div className="col-md-4 session" key={session.get('_id')}>
+                      <span className="session-title">{session.title || ''}<br /></span>
+                      <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
+                      <span className="session-description">{session.description}<br /></span>
+                      <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>
+                        <span className="material-icons">delete</span>
+                      </a>
+                  </div>
+                </a>
                 )}
-              </ul>
-              <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={this.createSession}>Créer une nouvelle session</button>
-            </div>
+               </div>
           </div>
-        </div>
-
         <Modal
         className="Modal__Bootstrap modal-dialog"
         // closeTimeoutMS={150}
@@ -120,6 +120,8 @@
   }
 }
 
+
+
 function mapStateToProps(state, props) {
   return {
     sessions: getActiveSessions(state),