Disable btn on action in Subscriptions

imports/ui/components/SelectionMap/SelectionMap.js

@@ -249,6 +249,7 @@ class SelectionMap extends Component {
                     }
                       <Button
                           bsStyle="success"
+                          disabled={this.props.disableFstBtn}
                           onClick={event => this.onFstBtn(event)}
                       >
                         {this.props.fstBtn}
@@ -282,6 +283,7 @@ SelectionMap.propTypes = {
   onRemove: PropTypes.func,
   action: PropTypes.number.isRequired,
   loadingSubs: PropTypes.bool.isRequired,
+  disableFstBtn: PropTypes.bool.isRequired,
   currentSubs: PropTypes.arrayOf(PropTypes.shape({
     location: PropTypes.shape({ latitude: PropTypes.number, longitude: PropTypes.number }).isRequired,
     distance: PropTypes.number.isRequired

imports/ui/components/SubscriptionEditor/SubscriptionEditor.js

@@ -16,7 +16,8 @@ class SubscriptionEditor extends React.Component {
     super(props);
     this.state = {
       center: props.center || [null, null],
-      zoom: props.zoom || null
+      zoom: props.zoom || null,
+      disableFstBtn: false
     };
   }
 
@@ -32,14 +33,18 @@ class SubscriptionEditor extends React.Component {
     if (existingSubscription) doc._id = existingSubscription;
 
     const authenticated = !!Meteor.userId();
+    const self = this;
+    self.setState({ disableFstBtn: true });
 
     if (authenticated) {
       Meteor.call(methodToCall, doc, (error, subscriptionId) => {
         if (error) {
+          self.setState({ disableFstBtn: false });
           if (error.reason && error.reason.reason) {
             Bert.alert(t(error.reason.reason), 'danger');
           }
         } else {
+          self.setState({ disableFstBtn: false });
           const confirmation = existingSubscription ? t('Zona actualizada') : t('Zona añadida');
           Bert.alert(confirmation, 'success');
           // history.push(`/subscriptions/${subscriptionId}`);
@@ -61,6 +66,7 @@ class SubscriptionEditor extends React.Component {
           zoom={this.state.zoom}
           distance={doc.distance}
           focusInput={focus}
+          disableFstBtn={this.state.disableFstBtn}
           subsBtn={isEdit ? t('Actualizar') : t(isAnyMobile ? 'Suscribirme a este radio' : 'Suscribirme a fuegos en este radio')}
           onSubs={state => this.onSubs(state)}
       />

imports/ui/pages/FireSubscription/FireSubscription.js

@@ -35,6 +35,9 @@ class FireSubscription extends React.Component {
 
 
   shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps.disableFstBtn !== this.props.disableFstBtn) {
+      return true;
+    }
     if (this.state.init &&
         nextState.center === this.state.center &&
         nextState.distance === this.state.distance) {
@@ -95,13 +98,14 @@ class FireSubscription extends React.Component {
           </Col>
         </Row>
         <SelectionMap
-              center={this.state.center}
-              zoom={this.state.zoom}
-              distance={this.state.distance}
-              fstBtn={this.props.subsBtn}
-              onFstBtn={state => this.onSubs(state)}
-              onSelection={state => this.onSelection(state)}
-              action={action.add}
+            center={this.state.center}
+            zoom={this.state.zoom}
+            distance={this.state.distance}
+            fstBtn={this.props.subsBtn}
+            onFstBtn={state => this.onSubs(state)}
+            onSelection={state => this.onSelection(state)}
+            action={action.add}
+            disableFstBtn={this.props.disableFstBtn}
         />
       </div>
     );
@@ -114,7 +118,8 @@ FireSubscription.propTypes = {
   distance: PropTypes.number,
   focusInput: PropTypes.bool.isRequired,
   subsBtn: PropTypes.string.isRequired,
-  onSubs: PropTypes.func.isRequired
+  onSubs: PropTypes.func.isRequired,
+  disableFstBtn: PropTypes.bool.isRequired
 };
 
 export default translate([], { wait: true })(FireSubscription);