From b40309e80b1db3a7581f50b4a10d80f9691a5481 Mon Sep 17 00:00:00 2001 From: vjrj Date: Wed, 6 Dec 2017 13:28:15 +0100 Subject: [PATCH] Refactorization --- imports/startup/server/geolocation.js | 2 +- .../FireSubscription/FireSubscription.js | 69 ++++++++++ .../FireSubscription/SubsAutocomplete.js | 96 +++++++++++++ imports/ui/pages/Sandbox/Sandbox.js | 126 +----------------- 4 files changed, 173 insertions(+), 120 deletions(-) create mode 100644 imports/ui/pages/FireSubscription/FireSubscription.js create mode 100644 imports/ui/pages/FireSubscription/SubsAutocomplete.js diff --git a/imports/startup/server/geolocation.js b/imports/startup/server/geolocation.js index dac9eb6..7aefe56 100644 --- a/imports/startup/server/geolocation.js +++ b/imports/startup/server/geolocation.js @@ -20,7 +20,7 @@ Meteor.methods({ if (isPrivateIP(clientIP)) { clientIP = '80.58.61.250' // Some Spain IP address } - console.log(`Geolocating ${clientIP}`); + // console.log(`Geolocating ${clientIP}`); // https://developers.google.com/web/fundamentals/primers/promises var promise = new Promise(function(resolve, reject) { diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js new file mode 100644 index 0000000..14ddfdb --- /dev/null +++ b/imports/ui/pages/FireSubscription/FireSubscription.js @@ -0,0 +1,69 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Button, Row, Col } from 'react-bootstrap'; +import { Trans, translate } from 'react-i18next'; +import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider'; +import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap'; + +import update from 'immutability-helper'; +import { withTracker } from 'meteor/react-meteor-data'; +import getGKeys from '/imports/startup/client/gkeys'; +import SubsAutocomplete from './SubsAutocomplete'; + +class FireSubscription extends React.Component { + constructor(props) { + super(props); + this.state = { + adddress: '', + init: false + }; + self = this; + // this.handleSelect = this.handleSelect.bind(this) + // this.handleChange = this.handleChange.bind(this) + } + + componentDidMount = () => { + self = this; + getGKeys(function(err, key) { + self.setState(update(self.state, {$merge: {init: true}})); + }); + } + + onAutocompleteChange = (value) => { + this.setState(update(this.state, {$merge: {lat: value.lat, lng: value.lng}})); + } + + onSliderChange = (value) => { + this.setState(update(this.state, {$merge: {distance: value}})); + } + + render() { + // https://developers.google.com/places/web-service/search + // https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js + let init = this.state.init + + return ( +
+ { init && + + +
+

Suscríbete a alertas de fuegos

+ +
+ + + + + + + } + + + +
+ ) + } +} + +export default translate([], { wait: true }) (FireSubscription); diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/pages/FireSubscription/SubsAutocomplete.js new file mode 100644 index 0000000..4d17e16 --- /dev/null +++ b/imports/ui/pages/FireSubscription/SubsAutocomplete.js @@ -0,0 +1,96 @@ +import React from 'react'; +import { Trans, translate } from 'react-i18next'; +import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete' +import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap'; + +class SubsAutocomplete extends React.Component { + constructor(props) { + super(props); + this.state = { + adddress: '', + } + } + + onChange = (address) => { this.setState({ address }) } + + handleSelect = (address) => { + const self = this; + geocodeByAddress(address) + .then((results) => getLatLng(results[0])) + .then(({ lat, lng }) => { + // console.log('Success Yay', { lat, lng }) + // const newState = update(this.state, {$merge: {lat: lat, lng: lng}}); + // console.log(newState); + // this.setState(newState); + self.props.onChange({lat: lat, lng: lng}); + // console.log(this.state); + }) + .catch(error => { + console.log(error); + if (error === 'ZERO_RESULTS') { + console.log("No results"); + } + }); + } + + render() { + // https://www.npmjs.com/package/react-places-autocomplete + // https://github.com/kenny-hibino/react-places-autocomplete/issues/103 + const myStyles = { + autocompleteContainer: { + paddingBottom: '20px', + backgroundSize: 'auto 12px', + backgroundPosition: 'bottom left 10px', + backgroundRepeat: 'no-repeat', + backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')", + }, + } + + const AutocompleteItem = ({ formattedSuggestion }) => ( +
+ {' '} + {formattedSuggestion.mainText}{' '} + {formattedSuggestion.secondaryText} +
) + + return ( +
+ + + Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc): + { console.log('Blur event!'); }, + onFocus:() => { console.log('Focused!'); }, + autoFocus:true + }} /> + + También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja. + +
+ ) + } +} + + +export default translate([], { wait: true }) (SubsAutocomplete); diff --git a/imports/ui/pages/Sandbox/Sandbox.js b/imports/ui/pages/Sandbox/Sandbox.js index 85d2931..4c7f9e8 100644 --- a/imports/ui/pages/Sandbox/Sandbox.js +++ b/imports/ui/pages/Sandbox/Sandbox.js @@ -1,43 +1,18 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { FormGroup, ControlLabel, Button, Row, Col, HelpBlock } from 'react-bootstrap'; import { Trans, translate } from 'react-i18next'; import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider'; import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap'; -import getGKeys from '/imports/startup/client/gkeys'; -import PlacesAutocomplete, { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete' import update from 'immutability-helper'; -import { withTracker } from 'meteor/react-meteor-data'; +import getGKeys from '/imports/startup/client/gkeys'; +import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscription'; class Sandbox extends React.Component { constructor(props) { super(props); this.state = { - adddress: '' + lat: 0, + lng: 0 }; - self = this; - // this.handleSelect = this.handleSelect.bind(this) - // this.handleChange = this.handleChange.bind(this) - } - - onChange = (address) => { this.setState({ address }) } - - handleSelect = (address) => { - geocodeByAddress(address) - .then((results) => getLatLng(results[0])) - .then(({ lat, lng }) => { - // console.log('Success Yay', { lat, lng }) - const newState = update(this.state, {$merge: {lat: lat, lng: lng}}); - // console.log(newState); - this.setState(newState); - // console.log(this.state); - }) - .catch(error => { - console.log(error); - if (error === 'ZERO_RESULTS') { - console.log("No results"); - } - }); } onSliderChange = (value) => { @@ -45,101 +20,14 @@ class Sandbox extends React.Component { } render() { - // https://www.npmjs.com/package/react-places-autocomplete - - // https://github.com/kenny-hibino/react-places-autocomplete/issues/103 - const myStyles = { - autocompleteContainer: { - paddingBottom: '20px', - backgroundSize: 'auto 12px', - backgroundPosition: 'bottom left 10px', - backgroundRepeat: 'no-repeat', - backgroundImage: "url('https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png')", - }, - } - - const AutocompleteItem = ({ formattedSuggestion }) => ( -
- {' '} - {formattedSuggestion.mainText}{' '} - {formattedSuggestion.secondaryText} -
) - - // https://developers.google.com/places/web-service/search - // https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js return (
- - - { typeof this.props.gkey === 'string' && -
-

Suscríbete a alertas de fuegos

-
- - - Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc): - - { console.log('Blur event!'); }, - onFocus:() => { console.log('Focused!'); }, - autoFocus:true - }} /> - También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja. - -
-
- } - - - - - - - - - + +
) } } -Sandbox.propTypes = { - gkey: PropTypes.string -} -const gkey = new ReactiveVar(); - -getGKeys(function(err, key) { - if (err) { - console.log(err); - } else { - gkey.set(key); - } -}); - -export default translate([], { wait: true }) (withTracker(() => { - return { - gkey: gkey.get() - }; -})(Sandbox)); +export default translate([], { wait: true }) (Sandbox);