# HG changeset patch
# User salimr <riwad.salim@yahoo.fr>
# Date 1534451556 -7200
# Node ID 4f4bb2b3ef39b83d5839f58bd21f28966445e656
# Parent  5d2bc8c877ea97cf2cf09d76a758f7f492ee0a07
Removing Modal from react-bootstrap and adding react-modal

diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/package.json
--- a/client/package.json	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/package.json	Thu Aug 16 22:32:36 2018 +0200
@@ -4,6 +4,7 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
+    "@types/react-modal": "^3.2.1",
     "immutable": "^3.8.1",
     "jwt-decode": "^2.2.0",
     "localforage": "^1.5.0",
@@ -14,6 +15,7 @@
     "react": "^15.5.4",
     "react-bootstrap": "^0.31.0",
     "react-dom": "^15.5.4",
+    "react-modal": "^3.5.1",
     "react-overlays": "^0.7.0",
     "react-portal": "^3.1.0",
     "react-redux": "^5.0.5",
diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/src/components/Navbar.js
--- a/client/src/components/Navbar.js	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/Navbar.js	Thu Aug 16 22:32:36 2018 +0200
@@ -6,7 +6,8 @@
 import { withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 // import logo from './logo.svg';
-import { NavDropdown, MenuItem, Modal} from 'react-bootstrap';
+import { NavDropdown, MenuItem } from 'react-bootstrap';
+import Modal from 'react-modal';
 import * as authActions from '../actions/authActions';
 import { forceSync } from '../actions/networkActions';
 import { groupSetCurrent } from '../actions/groupActions';
@@ -27,7 +28,7 @@
 
   if (isAuthenticated) {
     return (
-          <NavDropdown title={ currentUser.get('username') }>
+          <NavDropdown className="navs" title={ currentUser.get('username') }>
               <li>
                 <a className="user-dropdown"  href="#settings" onClick={onClickSettings}>Paramètres</a>
               </li>
@@ -107,13 +108,23 @@
 }
 
 class AppNavbar extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { modalIsOpen: false };
+  }
 
-  state = {
-    showModal: false
+  openModal = () => {
+    this.setState({modalIsOpen: true});
   }
 
   closeModal = () => {
-    this.setState({ showModal: false });
+    this.setState({modalIsOpen: false});
+  }
+
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({modalIsOpen: false});
   }
 
   onClickHome = (e) => {
@@ -131,7 +142,7 @@
     if (isSynchronized) {
       this.logout();
     } else {
-      this.setState({ showModal: true })
+      this.openModal()
     }
   }
 
@@ -193,18 +204,25 @@
               <LoginNav {...this.props} onLogout={this.onClickLogout} />
             </ul>
           </div>
-          <Modal show={this.state.showModal} onHide={this.closeModal}>
-            <Modal.Body>
-              <p className="text-center">
-                Certaines données n'ont pas encore été sauvegardées.
-                <br />
-                Si vous continuez, elles seront perdues.
-              </p>
-            </Modal.Body>
-            <Modal.Footer>
-              <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
-              <button type="submit" className="btn btn-default btn-lg" onClick={this.closeModal}>Fermer</button>
-            </Modal.Footer>
+          <Modal
+          className="Modal__Bootstrap modal-dialog"
+          // closeTimeoutMS={150}
+          isOpen={this.state.modalIsOpen}
+          onRequestClose={this.handleModalCloseRequest}
+          >
+            <div className="modal-content">
+              <div className="modal-body">
+                <p className="text-center">
+                  Certaines données n'ont pas encore été sauvegardées.
+                  <br />
+                  Si vous continuez, elles seront perdues.
+                </p>
+              </div>
+              <div className="modal-footer">
+                <button type="submit" className="btn btn-primary btn-lg" onClick={this.confirmLogout}>Confirmer</button>
+                <button type="submit" className="btn btn-default btn-lg" onClick={this.handleModalCloseRequest}>Fermer</button>
+              </div>
+            </div>
           </Modal>
         </div>
       </nav>
diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/src/components/Navbar.scss
--- a/client/src/components/Navbar.scss	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/Navbar.scss	Thu Aug 16 22:32:36 2018 +0200
@@ -38,5 +38,12 @@
 
 }
 
+.ReactModal__Overlay {
+    margin-top: 5%;
+}
 
-
+.modal-footer .btn {
+    margin-top: 40px;
+    padding: 16px;
+    font-weight: bold;
+}
diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/src/components/NotesList.js
--- a/client/src/components/NotesList.js	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/NotesList.js	Thu Aug 16 22:32:36 2018 +0200
@@ -1,15 +1,21 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Immutable from 'immutable';
-import { Modal } from 'react-bootstrap';
+import Modal  from 'react-modal';
 import Note from './Note';
 
 class NotesList extends Component {
-
-  state = {
+  constructor(props) {
+    super(props);
+    this.state = {
     editingNote: null,
     noteToDelete: null,
-    showModal: false,
+    modalIsOpen: false,
+    };
+  }
+
+  openModal = () => {
+    this.setState({modalIsOpen: true});
   }
 
   enterEditMode = (note) => {
@@ -22,7 +28,7 @@
 
   confirmDelete = (note) => {
     this.setState({
-      showModal: true,
+      modalIsOpen: true,
       noteToDelete: note
     })
   }
@@ -35,11 +41,21 @@
 
   closeModal = () => {
     this.setState({
-      showModal: false,
+      modalIsOpen: false,
       noteToDelete: null
     })
   }
 
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({
+      modalIsOpen: false,
+      noteToDelete: null
+    });
+  }
+
+
   updateNote = (note, data) => {
     this.props.updateNote(note, data);
   }
@@ -66,14 +82,21 @@
             annotationCategories={this.props.annotationCategories} />
         )}
 
-        <Modal show={this.state.showModal} onHide={this.closeModal}>
-          <Modal.Body>
-            Êtes vous sûr(e) ?
-          </Modal.Body>
-          <Modal.Footer>
-            <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirm</button>
-            <button type="submit" className="btn btn-default btn-lg" onClick={ this.closeModal }>Close</button>
-          </Modal.Footer>
+        <Modal
+        className="Modal__Bootstrap modal-dialog"
+        // closeTimeoutMS={150}
+        isOpen={this.state.modalIsOpen}
+        onRequestClose={this.handleModalCloseRequest}
+        >
+          <div className="modal-content">
+            <div className="modal-body">
+              Êtes vous sûr(e) ?
+            </div>
+            <div className="modal-footer">
+              <button type="submit" className="btn btn-primary btn-lg" onClick={ this.deleteNote }>Confirmer</button>
+              <button type="submit" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+            </div>
+          </div>
         </Modal>
 
       </div>
diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/src/components/SessionList.js
--- a/client/src/components/SessionList.js	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/src/components/SessionList.js	Thu Aug 16 22:32:36 2018 +0200
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Modal } from 'react-bootstrap';
+import Modal from 'react-modal';
 import moment from 'moment';
 import '../App.css';
 import './SessionList.css';
@@ -12,10 +12,26 @@
 import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors';
 
 class SessionList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modalIsOpen: false,
+      sessionToDelete: null
+    };
+  }
 
-  state = {
-    showModal: false,
-    sessionToDelete: null
+  openModal = () => {
+    this.setState({modalIsOpen: true});
+  }
+
+  closeModal = () => {
+    this.setState({modalIsOpen: false});
+  }
+
+  handleModalCloseRequest = () => {
+    // opportunity to validate something and keep the modal open even if it
+    // requested to be closed
+    this.setState({modalIsOpen: false});
   }
 
   createSession = () => {
@@ -45,22 +61,18 @@
     e.stopPropagation();
 
     this.setState({
-      showModal: true,
+      modalIsOpen: true,
       sessionToDelete: session
     })
   }
 
-  closeModal = () => {
-    this.setState({ showModal: false })
-  }
-
   deleteSession = () => {
     const { sessionToDelete } = this.state;
 
     this.props.sessionsActions.deleteSession(sessionToDelete);
 
     this.setState({
-      showModal: false,
+      modalIsOpen: false,
       sessionToDelete: null
     })
   }
@@ -87,14 +99,21 @@
           </div>
         </div>
 
-        <Modal show={ this.state.showModal } onHide={ this.closeModal }>
-          <Modal.Body>
-          Êtes-vous sûr(e) ?
-          </Modal.Body>
-          <Modal.Footer>
-            <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
-            <button type="button" className="btn btn-default btn-lg" onClick={ this.closeModal }>Fermer</button>
-          </Modal.Footer>
+        <Modal
+        className="Modal__Bootstrap modal-dialog"
+        // closeTimeoutMS={150}
+        isOpen={this.state.modalIsOpen}
+        onRequestClose={this.handleModalCloseRequest}
+        >
+          <div className="modal-content">
+            <div className="modal-body">
+            Êtes-vous sûr(e) ?
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-primary btn-lg" onClick={ this.deleteSession }>Confirmer</button>
+              <button type="button" className="btn btn-default btn-lg" onClick={ this.handleModalCloseRequest }>Fermer</button>
+            </div>
+          </div>
         </Modal>
       </div>
     );
diff -r 5d2bc8c877ea -r 4f4bb2b3ef39 client/yarn.lock
--- a/client/yarn.lock	Wed Aug 15 23:39:02 2018 +0200
+++ b/client/yarn.lock	Thu Aug 16 22:32:36 2018 +0200
@@ -9,6 +9,25 @@
     address "^1.0.1"
     debug "^2.6.0"
 
+"@types/prop-types@*":
+  version "15.5.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.5.tgz#17038dd322c2325f5da650a94d5f9974943625e3"
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-modal@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.2.1.tgz#48578bb362fd8be732d4e5c57c137b7e1dfd273d"
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.4.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.11.tgz#330f3d864300f71150dc2d125e48644c098f8770"
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 JSONStream@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
@@ -2110,6 +2129,10 @@
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.6.tgz#2ae1db2319642d8b80a668d2d025c6196071e788"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -2839,6 +2862,10 @@
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -7026,6 +7053,19 @@
   version "16.3.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
+react-modal@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.5.1.tgz#33d38527def90ea324848f7d63e53acc4468a451"
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.0"
+    warning "^3.0.0"
+
 react-overlays@^0.7.0, react-overlays@^0.7.4:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.4.tgz#ef2ec652c3444ab8aa014262b18f662068e56d5c"