Merge remote-tracking branch 'upstream/master' into fix/issue-110-update-mapbox-style-spec

src/components/modals/OpenModal.jsx

@@ -46,7 +46,20 @@ class OpenModal extends React.Component {
     onStyleOpen: React.PropTypes.func.isRequired,
   }
 
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  clearError() {
+    this.setState({
+      error: null
+    })
+  }
+
   onStyleSelect(styleUrl) {
+    this.clearError();
+
     request({
       url: styleUrl,
       withCredentials: false,
@@ -64,15 +77,32 @@ class OpenModal extends React.Component {
   onUpload(_, files) {
     const [e, file] = files[0];
     const reader = new FileReader();
+
+    this.clearError();
+
     reader.readAsText(file, "UTF-8");
     reader.onload = e => {
-      let mapStyle = JSON.parse(e.target.result)
+      let mapStyle;
+      try {
+        mapStyle = JSON.parse(e.target.result)
+      }
+      catch(err) {
+        this.setState({
+          error: err.toString()
+        });
+        return;
+      }
       mapStyle = style.ensureStyleValidity(mapStyle)
       this.props.onStyleOpen(mapStyle);
     }
     reader.onerror = e => console.log(e.target);
   }
 
+  onOpenToggle() {
+    this.clearError();
+    this.props.onOpenToggle();
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -84,11 +114,22 @@ class OpenModal extends React.Component {
       />
     })
 
+    let errorElement;
+    if(this.state.error) {
+      errorElement = (
+        <div className="maputnik-modal-error">
+          {this.state.error}
+          <a href="#" onClick={() => this.clearError()} className="maputnik-modal-error-close">×</a>
+        </div>
+      );
+    }
+
     return <Modal
       isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
+      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>
@@ -96,7 +137,7 @@ class OpenModal extends React.Component {
           <Button className="maputnik-upload-button"><FileUploadIcon /> Upload</Button>
         </FileReaderInput>
       </section>
-      <section className="maputnik-modal-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.