client/src/components/SessionList.js
changeset 154 a28361bda28c
parent 151 57d63a248f0d
child 155 e55ae84508bf
--- a/client/src/components/SessionList.js	Mon Sep 03 11:57:58 2018 +0200
+++ b/client/src/components/SessionList.js	Mon Sep 03 20:02:14 2018 +0200
@@ -13,17 +13,11 @@
 
 class SessionList extends Component {
 
-  constructor(props) {
-    super(props);
-      this.state = {
+  state = {
       show: false,
       modalIsOpen: false,
       sessionToDelete: null,
     }
-    this.doSomething = this.doSomething.bind(this);
-    this.toggleShow = this.toggleShow.bind(this);
-    this.hide = this.hide.bind(this);
-  }
 
   componentWillMount() {
     Modal.setAppElement('body');
@@ -34,17 +28,6 @@
     console.log(e.target.innerHTML);
   }
 
-  toggleShow(){
-    this.setState({show: !this.state.show});
-  }
-
-  hide(e){
-    if(e && e.relatedTarget){
-      e.relatedTarget.click();
-    }
-    this.setState({show: false});
-  }
-
   openModal = () => {
     this.setState({modalIsOpen: true});
   }
@@ -107,45 +90,36 @@
     return (
       <div>
         <Navbar history={this.props.history} />
-        <div className="top-fade"></div>
-        <button id="session-button" type="button" className="btn btn-primary btn-lg text-secondary" onClick={ this.createSession}>Créer une nouvelle session</button>
+        {/* <button id="session-button" type="button" className="btn btn-primary btn-lg text-secondary" onClick={ this.createSession}>Créer une nouvelle session</button> */}
         <div className="container-fluid">
-          <div className="row">
+          <div className="row mt-5 pt-5">
                 {this.props.sessions.map((session) =>
-                  <div>
-                      <div className="col-lg-4 session" key={session.get('_id')}>
+                  <div className="col-lg-4" id="session">
+                      <div className="col-md-auto m-4 p-4 session" key={session.get('_id')}>
                         <a className="sessions" onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>
                           <span className="session-title text-primary">{session.title || 'Session sans titre'}<br /></span>
                           <span className="session-date text-muted">{moment(session.get('date')).format('DD/MM/YYYY')}<br /></span>
                           <span className="session-description text-dark">{session.description}<br /></span>
                         </a>
-                        <button className="btn btn-link float-left" key={session.get('_id')}  id="toggle-edit" type="button" onClick={this.toggleShow} onBlur={this.hide}>
-                          <span className="material-icons edit">edit</span>
+                        <button type="button" id="delete" className="btn btn-link float-left" onClick={ this.onClickDelete.bind(this, session) }>
+                          <span className="material-icons delete text-dark">delete</span>
                         </button>
-                        {
-                        this.state.show &&
-                          (
-                        <button type="button" className="btn btn-link float-left" style={{display: 'block'}} onClick={ this.onClickDelete.bind(this, session) }>
-                        <span className="material-icons delete text-dark">delete</span>
-                        </button>
-                          )
-                        }
                       </div>
                   </div>
                 )}
             </div>
           </div>
         <Modal
-        className="Modal__Bootstrap modal-dialog"
+        className="Modal__Bootstrap modal-dialog mt-5 pt-5 justify-content-lg-center"
         // closeTimeoutMS={150}
         isOpen={this.state.modalIsOpen}
         onRequestClose={this.handleModalCloseRequest}
         >
-          <div id="delete-session-modal" className="modal-content text-center">
-            <button type="button" id="delete-session-close-modal-button" className="btn btn-secondary float-right" onClick={ this.handleModalCloseRequest }><span className="material-icons">close</span></button>
+          <div id="delete-session-modal" className="modal-content">
+            <span id="delete-session-close-modal-button" className="material-icons p-0 text-right" onClick={ this.handleModalCloseRequest }>close</span>
+            <div className="modal-body text-center">
             <span className="modal-text">Êtes-vous sûr(e) de vouloir supprimer cette session ?</span>
-            <div className="modal-footer text-center">
-              <button type="button" className="btn btn-primary text-secondary" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
+              <button type="button" className="btn btn-primary text-secondary font-weight-bold py-1 px-2 mt-3" id="delete-session-modal-button" onClick={ this.deleteSession }>Confirmer</button>
             </div>
           </div>
         </Modal>