Download style when open from gallery

src/components/Button.jsx

@@ -4,7 +4,7 @@ import { margins, fontSizes } from '../config/scales'
 
 class Button extends React.Component {
   static propTypes = {
-    onClick: React.PropTypes.func.isRequired,
+    onClick: React.PropTypes.func,
     style: React.PropTypes.object,
   }
 

src/components/Toolbar.jsx

@@ -125,19 +125,20 @@ export default class Toolbar extends React.Component {
           mapStyle={this.props.mapStyle}
           onStyleChanged={this.props.onStyleChanged}
           isOpen={this.state.openSettingsModal}
-          toggle={() => this.toggleSettings.bind(this)}
+          onToggleOpen={this.toggleSettings.bind(this)}
         />
       }
       {this.state.openOpenModal &&<OpenModal
           isOpen={this.state.openOpenModal}
-          toggle={() => this.toggleOpen.bind(this)}
+          onStyleOpen={this.props.onStyleUpload}
+          onToggleOpen={this.toggleOpen.bind(this)}
         />
       }
       {this.state.openSourcesModal && <SourcesModal
           mapStyle={this.props.mapStyle}
           onStyleChanged={this.props.onStyleChanged}
           isOpen={this.state.openSourcesModal}
-          toggle={() => this.toggleSources.bind(this)}
+          onToggleOpen={this.toggleSources.bind(this)}
         />
       }
       <ToolbarAction style={{

src/components/modals/Modal.jsx

@@ -10,7 +10,7 @@ class Modal extends React.Component {
   static propTypes = {
     isOpen: React.PropTypes.bool.isRequired,
     title: React.PropTypes.string.isRequired,
-    toggleOpen: React.PropTypes.func.isRequired,
+    onOpenToggle: React.PropTypes.func.isRequired,
   }
 
   render() {

src/components/modals/OpenModal.jsx

@@ -4,6 +4,7 @@ import Heading from '../Heading'
 import Button from '../Button'
 import Paragraph from '../Paragraph'
 import FileReaderInput from 'react-file-reader-input'
+import request from 'request'
 
 import FileUploadIcon from 'react-icons/lib/md/file-upload'
 import AddIcon from 'react-icons/lib/md/add-circle-outline'
@@ -31,11 +32,14 @@ class PublicStyle extends React.Component {
         fontSize: fontSizes[4],
         color: colors.lowgray,
     }}>
-      <Button style={{
-        backgroundColor: 'transparent',
-        padding: margins[2],
-        display: 'block',
-      }}>
+      <Button
+        onClick={() => this.props.onSelect(this.props.url)}
+        style={{
+          backgroundColor: 'transparent',
+          padding: margins[2],
+          display: 'block',
+        }}
+      >
         <div style={{
           display: 'flex',
           flexDirection: 'row',
@@ -61,10 +65,25 @@ class PublicStyle extends React.Component {
 class OpenModal extends React.Component {
   static propTypes = {
     isOpen: React.PropTypes.bool.isRequired,
-    toggle: React.PropTypes.func.isRequired,
+    onOpenToggle: React.PropTypes.func.isRequired,
     onStyleOpen: React.PropTypes.func.isRequired,
   }
 
+  onStyleSelect(styleUrl) {
+    request({
+      url: styleUrl,
+      withCredentials: false,
+    }, (error, response, body) => {
+        if (!error && response.statusCode == 200) {
+          const mapStyle = JSON.parse(body)
+          console.log('Loaded style ', mapStyle.id)
+          this.props.onStyleOpen(mapStyle)
+        } else {
+          console.warn('Could not open the style URL', styleUrl)
+        }
+    })
+  }
+
   onUpload(_, files) {
     const [e, file] = files[0];
     const reader = new FileReader();
@@ -80,16 +99,17 @@ class OpenModal extends React.Component {
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
-        key={style.key}
+        key={style.id}
         url={style.url}
         title={style.title}
         thumbnailUrl={style.thumbnail}
+        onSelect={this.onStyleSelect.bind(this)}
       />
     })
 
     return <Modal
       isOpen={this.props.isOpen}
-      toggleOpen={this.props.toggle}
+      onOpenToggle={this.props.onOpenToggle}
       title={'Open Style'}
     >
       <Heading level={4}>Upload Style</Heading>
@@ -98,8 +118,8 @@ class OpenModal extends React.Component {
       </Paragraph>
       <FileReaderInput onChange={this.onUpload.bind(this)}>
         <Button>
-        <FileUploadIcon />
-        Upload
+          <FileUploadIcon />
+          Upload
         </Button>
       </FileReaderInput>
 

src/components/modals/SettingsModal.jsx

@@ -11,7 +11,7 @@ class SettingsModal extends React.Component {
     mapStyle: React.PropTypes.object.isRequired,
     onStyleChanged: React.PropTypes.func.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
-    toggle: React.PropTypes.func.isRequired,
+    onOpenToggle: React.PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -32,7 +32,7 @@ class SettingsModal extends React.Component {
     const inputProps = { }
     return <Modal
       isOpen={this.props.isOpen}
-      toggleOpen={this.props.toggle}
+      onOpenToggle={this.props.onOpenToggle}
       title={'StyleSettings'}
     >
       <InputBlock label={"Name"}>

src/components/modals/SourcesModal.jsx

@@ -158,7 +158,7 @@ class SourcesModal extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
-    toggle: React.PropTypes.func.isRequired,
+    onOpenToggle: React.PropTypes.func.isRequired,
   }
 
   render() {
@@ -179,7 +179,7 @@ class SourcesModal extends React.Component {
     const inputProps = { }
     return <Modal
       isOpen={this.props.isOpen}
-      toggleOpen={this.props.toggle}
+      onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
     >
       <Heading level={4}>Active Sources</Heading>