From 004d135d931fd6ed3f843ab502d8e2e9e1fa18ef Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 24 Sep 2018 14:40:17 +0100
Subject: [PATCH 1/3] Show error if style fails to load and disabled button if
 input is empty

---
 src/components/Button.jsx           |  1 +
 src/components/modals/OpenModal.jsx | 28 +++++++++++++++++++++++++---
 src/styles/_components.scss         |  6 ++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index e7690074..294c47fd 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -15,6 +15,7 @@ class Button extends React.Component {
   render() {
     return <button
       onClick={this.props.onClick}
+      disabled={this.props.disabled}
       aria-label={this.props["aria-label"]}
       className={classnames("maputnik-button", this.props.className)}
       data-wd-key={this.props["data-wd-key"]}
diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 85794e3d..31433db6 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -51,7 +51,9 @@ class OpenModal extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      isUrlEmpty: true
+    };
   }
 
   clearError() {
@@ -102,6 +104,7 @@ class OpenModal extends React.Component {
     })
     .catch((err) => {
       this.setState({
+        error: `Failed to load: '${styleUrl}'`,
         activeRequest: null,
         activeRequestUrl: null
       });
@@ -154,6 +157,13 @@ class OpenModal extends React.Component {
     this.props.onOpenToggle();
   }
 
+  onChangeUrl = () => {
+    const length = this.styleUrlElement.value.length;
+    this.setState({
+      isUrlEmpty: length < 1
+    });
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -197,9 +207,21 @@ class OpenModal extends React.Component {
             <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..."/>
+            <input
+              data-wd-key="open-modal.url.input"
+              type="text"
+              ref={(input) => this.styleUrlElement = input}
+              className="maputnik-input"
+              placeholder="Enter URL..."
+              onChange={this.onChangeUrl}
+            />
             <div>
-              <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
+              <Button
+                data-wd-key="open-modal.url.button"
+                className="maputnik-big-button"
+                onClick={this.onOpenUrl}
+                disabled={this.state.isUrlEmpty}
+              >Open URL</Button>
             </div>
           </section>
 
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index 302ec528..58ab88f0 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -77,6 +77,12 @@
     background-color: lighten($color-midgray, 12);
     color: $color-white;
   }
+
+  &:disabled {
+    background-color: darken($color-midgray, 5);
+    color: $color-midgray;
+    cursor: not-allowed;
+  }
 }
 
 .maputnik-big-button {

From 4a0b9fd0de6762b50a9e4ff3f68c3da3e3d6e04e Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 24 Sep 2018 15:13:35 +0100
Subject: [PATCH 2/3] Added missing prop type

---
 src/components/Button.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 294c47fd..0d350b0d 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -9,7 +9,8 @@ class Button extends React.Component {
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.node,
+    disabled: PropTypes.bool,
   }
 
   render() {

From 0c6a179cec4a7052c883e84aa7ab6d4f64a8131b Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 24 Sep 2018 20:58:14 +0100
Subject: [PATCH 3/3] Switch to using styleUrl for disabling button

---
 src/components/modals/OpenModal.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 31433db6..07ae18dc 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -52,7 +52,7 @@ class OpenModal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isUrlEmpty: true
+      styleUrl: ""
     };
   }
 
@@ -153,14 +153,16 @@ class OpenModal extends React.Component {
   }
 
   onOpenToggle() {
+    this.setState({
+      styleUrl: ""
+    });
     this.clearError();
     this.props.onOpenToggle();
   }
 
   onChangeUrl = () => {
-    const length = this.styleUrlElement.value.length;
     this.setState({
-      isUrlEmpty: length < 1
+      styleUrl: this.styleUrlElement.value
     });
   }
 
@@ -213,6 +215,7 @@ class OpenModal extends React.Component {
               ref={(input) => this.styleUrlElement = input}
               className="maputnik-input"
               placeholder="Enter URL..."
+              value={this.state.styleUrl}
               onChange={this.onChangeUrl}
             />
             <div>
@@ -220,7 +223,7 @@ class OpenModal extends React.Component {
                 data-wd-key="open-modal.url.button"
                 className="maputnik-big-button"
                 onClick={this.onOpenUrl}
-                disabled={this.state.isUrlEmpty}
+                disabled={this.state.styleUrl.length < 1}
               >Open URL</Button>
             </div>
           </section>