Merge pull request #394 from orangemug/fix/request-abort-and-oerlapping-modals

Fix overlapping modals & request canceling

src/components/modals/OpenModal.jsx

@@ -76,6 +76,8 @@ class OpenModal extends React.Component {
   onStyleSelect = (styleUrl) => {
     this.clearError();
 
+    let canceled;
+
     const activeRequest = fetch(styleUrl, {
       mode: 'cors',
       credentials: "same-origin"
@@ -84,6 +86,10 @@ class OpenModal extends React.Component {
       return response.json();
     })
     .then((body) => {
+      if(canceled) {
+        return;
+      }
+
       this.setState({
         activeRequest: null,
         activeRequestUrl: null
@@ -104,7 +110,11 @@ class OpenModal extends React.Component {
     })
 
     this.setState({
-      activeRequest: activeRequest,
+      activeRequest: {
+        abort: function() {
+          canceled = true;
+        }
+      },
       activeRequestUrl: styleUrl
     })
   }
@@ -165,7 +175,9 @@ class OpenModal extends React.Component {
       );
     }
 
-    return <Modal
+    return  (
+      <div>
+        <Modal
           data-wd-key="open-modal"
           isOpen={this.props.isOpen}
           onOpenToggle={() => this.onOpenToggle()}
@@ -200,6 +212,7 @@ class OpenModal extends React.Component {
             {styleOptions}
             </div>
           </section>
+        </Modal>
 
         <LoadingModal
           isOpen={!!this.state.activeRequest}
@@ -207,7 +220,8 @@ class OpenModal extends React.Component {
           onCancel={(e) => this.onCancelActiveRequest(e)}
           message={"Loading: "+this.state.activeRequestUrl}
         />
-    </Modal>
+      </div>
+    )
   }
 }