From d106fff245e42d0ba11c9a1d18140c2c547d669b Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Tue, 27 Feb 2018 17:00:37 +0100
Subject: [PATCH] Refactor autocomplete

---
 .../pages/FireSubscription/FireSubscription.js |  3 +++
 .../pages/FireSubscription/SubsAutocomplete.js | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js
index 34431fe..4aac3b7 100644
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/imports/ui/pages/FireSubscription/FireSubscription.js
@@ -78,6 +78,9 @@ class FireSubscription extends React.Component {
             <div>
               <SubsAutocomplete
                   focusInput={this.props.focusInput}
+                  label="Indícanos la posición de la zona a vigilar (por ej. tu pueblo, una calle, etc):"
+                  placeHolder="Escribe aquí un lugar"
+                  helpText="También puedes seleccionar la zona en el mapa arrastrando el puntero naranja."
                   onChange={value => this.onAutocompleteChange(value)}
               />
             </div>
diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/pages/FireSubscription/SubsAutocomplete.js
index 7bf8ef4..0f6a852 100644
--- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js
+++ b/imports/ui/pages/FireSubscription/SubsAutocomplete.js
@@ -20,12 +20,7 @@ class SubsAutocomplete extends React.Component {
     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, lng });
-        // console.log(this.state);
       })
       .catch((error) => {
         console.log(error);
@@ -56,11 +51,15 @@ class SubsAutocomplete extends React.Component {
         <small className="text-muted">{formattedSuggestion.secondaryText}</small>
       </div>);
 
+    const {
+      t, label, placeHolder, helpText
+    } = this.props;
+
     return (
       <form>
         <FormGroup>
           <ControlLabel>
-            <Trans parent="span">Indícanos la posición de la zona a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
+            {t(label)}
           </ControlLabel>
           <PlacesAutocomplete
               styles={myStyles}
@@ -84,13 +83,13 @@ class SubsAutocomplete extends React.Component {
                 {
                   value: this.state.address,
                   onChange: address => this.onChange(address),
-                  placeholder: this.props.t('Escribe aquí un lugar'),
+                  placeholder: t(placeHolder),
                   onBlur: () => { /* console.log('Blur event!'); */ },
                   onFocus: () => { /* console.log('Focused!'); */ },
                   autoFocus: this.props.focusInput
                 }}
           />
-          <HelpBlock><Trans parent="span">También puedes seleccionar la zona en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
+          <HelpBlock>{t(helpText)}</HelpBlock>
         </FormGroup>
       </form>
     );
@@ -100,6 +99,9 @@ class SubsAutocomplete extends React.Component {
 SubsAutocomplete.propTypes = {
   focusInput: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
+  label: PropTypes.string.isRequired,
+  placeHolder: PropTypes.string.isRequired,
+  helpText: PropTypes.string.isRequired,
   i18n: PropTypes.object.isRequired
 };