From e6da977c48c6bfd2a165898124de511eb15955ab Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 23 Sep 2018 19:40:50 +0100
Subject: [PATCH 1/4] Prevented overlapping modals in react tree and fixed
 request canceling.

---
 package.json                        |  2 +-
 src/components/modals/OpenModal.jsx | 87 ++++++++++++++++-------------
 2 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/package.json b/package.json
index 90d191be..83a0fc21 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-aria-menubutton": "^5.1.1",
-    "react-aria-modal": "^2.12.1",
+    "react-aria-modal": "^3.0.0",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.7.2",
     "react-codemirror2": "^4.2.1",
diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 5d9901fa..7afbb61b 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -76,7 +76,10 @@ class OpenModal extends React.Component {
   onStyleSelect = (styleUrl) => {
     this.clearError();
 
+    const requestController = new AbortController();
+
     const activeRequest = fetch(styleUrl, {
+      signal: requestController.signal,
       mode: 'cors',
       credentials: "same-origin"
     })
@@ -165,49 +168,53 @@ class OpenModal extends React.Component {
       );
     }
 
-    return <Modal
-      data-wd-key="open-modal"
-      isOpen={this.props.isOpen}
-      onOpenToggle={() => this.onOpenToggle()}
-      title={'Open Style'}
-    >
-      {errorElement}
-      <section className="maputnik-modal-section">
-        <h2>Upload Style</h2>
-        <p>Upload a JSON style from your computer.</p>
-        <FileReaderInput onChange={this.onUpload} tabIndex="-1">
-          <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
-        </FileReaderInput>
-      </section>
+    return  (
+      <div>
+        <Modal
+          data-wd-key="open-modal"
+          isOpen={this.props.isOpen}
+          onOpenToggle={() => this.onOpenToggle()}
+          title={'Open Style'}
+        >
+          {errorElement}
+          <section className="maputnik-modal-section">
+            <h2>Upload Style</h2>
+            <p>Upload a JSON style from your computer.</p>
+            <FileReaderInput onChange={this.onUpload} tabIndex="-1">
+              <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
+            </FileReaderInput>
+          </section>
 
-      <section className="maputnik-modal-section">
-        <h2>Load from URL</h2>
-        <p>
-          Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
-        </p>
-        <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
-        <div>
-          <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
-        </div>
-      </section>
+          <section className="maputnik-modal-section">
+            <h2>Load from URL</h2>
+            <p>
+              Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
+            </p>
+            <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
+            <div>
+              <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
+            </div>
+          </section>
 
-      <section className="maputnik-modal-section maputnik-modal-section--shrink">
-        <h2>Gallery Styles</h2>
-        <p>
-          Open one of the publicly available styles to start from.
-        </p>
-        <div className="maputnik-style-gallery-container">
-        {styleOptions}
-        </div>
-      </section>
+          <section className="maputnik-modal-section maputnik-modal-section--shrink">
+            <h2>Gallery Styles</h2>
+            <p>
+              Open one of the publicly available styles to start from.
+            </p>
+            <div className="maputnik-style-gallery-container">
+            {styleOptions}
+            </div>
+          </section>
+        </Modal>
 
-      <LoadingModal
-        isOpen={!!this.state.activeRequest}
-        title={'Loading style'}
-        onCancel={(e) => this.onCancelActiveRequest(e)}
-        message={"Loading: "+this.state.activeRequestUrl}
-      />
-    </Modal>
+        <LoadingModal
+          isOpen={!!this.state.activeRequest}
+          title={'Loading style'}
+          onCancel={(e) => this.onCancelActiveRequest(e)}
+          message={"Loading: "+this.state.activeRequestUrl}
+        />
+      </div>
+    )
   }
 }
 

From 673465af77b8efd3c10a90ef2764a4c0f22838ac Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 23 Sep 2018 19:53:32 +0100
Subject: [PATCH 2/4] Use AbortController in activeRequest

---
 src/components/modals/OpenModal.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 7afbb61b..065704ed 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -107,7 +107,7 @@ class OpenModal extends React.Component {
     })
 
     this.setState({
-      activeRequest: activeRequest,
+      activeRequest: requestController,
       activeRequestUrl: styleUrl
     })
   }

From 35600c253dcffe82ef5a49c9219315ac94cf3dea Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 23 Sep 2018 20:43:34 +0100
Subject: [PATCH 3/4] Revert react-aria-modal

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 83a0fc21..90d191be 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "prop-types": "^15.6.0",
     "react": "^16.3.2",
     "react-aria-menubutton": "^5.1.1",
-    "react-aria-modal": "^3.0.0",
+    "react-aria-modal": "^2.12.1",
     "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.7.2",
     "react-codemirror2": "^4.2.1",

From b7fd889fcd5004739eaf4fb8ad60bce0a8b43d8e Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 23 Sep 2018 21:00:17 +0100
Subject: [PATCH 4/4] Removed signal from fetch as not supported in all
 browsers.

---
 src/components/modals/OpenModal.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 065704ed..85794e3d 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -76,10 +76,9 @@ class OpenModal extends React.Component {
   onStyleSelect = (styleUrl) => {
     this.clearError();
 
-    const requestController = new AbortController();
+    let canceled;
 
     const activeRequest = fetch(styleUrl, {
-      signal: requestController.signal,
       mode: 'cors',
       credentials: "same-origin"
     })
@@ -87,6 +86,10 @@ class OpenModal extends React.Component {
       return response.json();
     })
     .then((body) => {
+      if(canceled) {
+        return;
+      }
+
       this.setState({
         activeRequest: null,
         activeRequestUrl: null
@@ -107,7 +110,11 @@ class OpenModal extends React.Component {
     })
 
     this.setState({
-      activeRequest: requestController,
+      activeRequest: {
+        abort: function() {
+          canceled = true;
+        }
+      },
       activeRequestUrl: styleUrl
     })
   }