From f9b8e15aaaea4bd94516d8c15231f69207205d57 Mon Sep 17 00:00:00 2001
From: Erin Doyle <edoyle@cashstar.com>
Date: Sun, 19 Aug 2018 19:50:52 -0400
Subject: [PATCH] Replaced Modal with use of react-modal, an already accessible
 Modal component from reactjs.

---
 package.json                  |  1 +
 public/app.css                | 17 +++++++++--
 public/index.html             |  1 -
 src/primitives/Modal.js       | 40 --------------------------
 src/wishlist/MovieEditor.js   | 53 ++++++++++++++++++++++-------------
 src/wishlist/MovieWishlist.js |  9 +++---
 yarn.lock                     | 17 +++++++++++
 7 files changed, 71 insertions(+), 67 deletions(-)
 delete mode 100644 src/primitives/Modal.js

diff --git a/package.json b/package.json
index b28f5ba..8bda866 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "react-modal": "^3.5.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "1.1.4"
   },
diff --git a/public/app.css b/public/app.css
index 3049888..ce1578d 100644
--- a/public/app.css
+++ b/public/app.css
@@ -70,6 +70,19 @@ a {
     color: #3951b1;
 }
 
-.modal.show {
-    display: inherit;
+.dialog-modal {
+    position: absolute;
+    top: 40px;
+    left: 40px;
+    right: 40px;
+    bottom: 40px;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(77, 77, 77, 0.9);
 }
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index d679b2c..06a8b2e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,7 +31,6 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="app-root"></div>
-    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/primitives/Modal.js b/src/primitives/Modal.js
deleted file mode 100644
index 09f2edb..0000000
--- a/src/primitives/Modal.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-
-const modalRoot = document.getElementById('modal-root');
-const body = document.getElementsByTagName('body')[0];
-
-class Modal extends Component {
-    constructor(props) {
-        super(props);
-
-        this.el = document.createElement('div');
-    }
-
-    componentDidMount() {
-        modalRoot.appendChild(this.el);
-        body.className = "modal-open";
-    }
-
-    componentWillUnmount() {
-        modalRoot.removeChild(this.el);
-        body.className = "";
-    }
-
-    render() {
-        // Use a portal to render the children into the element
-        return ReactDOM.createPortal(
-            this.props.children,
-            this.el,
-        );
-    }
-}
-
-Modal.propTypes = {
-    children: PropTypes.node.isRequired
-};
-
-
-export default Modal;
diff --git a/src/wishlist/MovieEditor.js b/src/wishlist/MovieEditor.js
index 9be67d7..aa57dd9 100644
--- a/src/wishlist/MovieEditor.js
+++ b/src/wishlist/MovieEditor.js
@@ -1,8 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import Modal from 'react-modal';
 
-import Modal from '../primitives/Modal';
 
+// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
+Modal.setAppElement('#app-root');
 
 class MovieEditor extends Component {
     constructor(props) {
@@ -37,42 +39,53 @@ class MovieEditor extends Component {
     }
 
     render() {
+        const { isOpen } = this.props;
         const { notes } = this.state;
 
         return (
-            <Modal>
-                <div className="modal fade show">
-                    <div className="modal-dialog modal-dialog-centered">
-                        <div className="modal-content">
-                            <div className="modal-header">
-                                <h5 className="modal-title">Edit Movie</h5>
-                                <button type="button" className="close" onClick={this.handleClose}>
-                                    <span>&times;</span>
-                                </button>
-                            </div>
-                            <div className="modal-body">
-                                <div className="form-group">
-                                    <label>Notes:</label>
-                                    <textarea className="form-control" value={notes} onChange={this.handleChangeNotes} />
-                                </div>
-                            </div>
-                            <div className="modal-footer">
-                                <button type="button" className="btn btn-primary" onClick={this.handleSave}>Save</button>
+            <Modal
+                role="dialog"
+                isOpen={isOpen}
+                onRequestClose={this.handleClose}
+                className="dialog-modal"
+                overlayClassName="modal-overlay"
+                aria={{
+                    labelledby: "modal-title"
+                }}
+                shouldFocusAfterRender={true}
+                shouldCloseOnOverlayClick={true}
+            >
+                <div className="modal-dialog modal-dialog-centered">
+                    <div className="modal-content">
+                        <div className="modal-header">
+                            <h5 id="modal-title" className="modal-title">Edit Movie</h5>
+                            <button type="button" className="close" onClick={this.handleClose}>
+                                <span>&times;</span>
+                            </button>
+                        </div>
+                        <div className="modal-body">
+                            <div className="form-group">
+                                <label>Notes:</label>
+                                <textarea className="form-control" value={notes} onChange={this.handleChangeNotes} />
                             </div>
                         </div>
+                        <div className="modal-footer">
+                            <button type="button" className="btn btn-primary" onClick={this.handleSave}>Save</button>
+                        </div>
                     </div>
                 </div>
-                <div className="modal-backdrop fade show" />
             </Modal>
         );
     }
 }
 
 MovieEditor.defaultTypes = {
+    isOpen: false,
     movie: {}
 };
 
 MovieEditor.propTypes = {
+    isOpen: PropTypes.bool,
     movie: PropTypes.object,
     updateMovie: PropTypes.func.isRequired
 };
diff --git a/src/wishlist/MovieWishlist.js b/src/wishlist/MovieWishlist.js
index 82d77a5..bdd6e95 100644
--- a/src/wishlist/MovieWishlist.js
+++ b/src/wishlist/MovieWishlist.js
@@ -92,10 +92,11 @@ class MovieWishlist extends Component {
                                 />
                             </div>
 
-                            { showEditor
-                                ? <MovieEditor movie={movieInEditing} updateMovie={this.handleUpdateMovie} />
-                                : null
-                            }
+                            <MovieEditor
+                                movie={movieInEditing}
+                                updateMovie={this.handleUpdateMovie}
+                                isOpen={showEditor}
+                            />
                         </Fragment>
 
                         // No movies yet in the WishList
diff --git a/yarn.lock b/yarn.lock
index cb81d6e..ff09fda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2647,6 +2647,10 @@ execa@^0.7.0:
     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"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -5783,6 +5787,19 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+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-router-dom@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"