Added confirm

imports/api/ActiveFires/server/publications.js

@@ -56,7 +56,7 @@ const activefires = (zoom, lat, lng, height, width) => {
   const distUnt = resolution * Math.max(height, width);
   const distance = Math.trunc(distUnt);
   // console.log(`so ${height}x${width} gives ${Math.trunc(resolution*height/1000)} x ${Math.trunc(resolution*width/1000)} km, so looking in ${distance}`);
-  console.log(`So ${height}x${width} gives ${Math.trunc(resolution)} of resolution, so looking in ${Math.trunc(distance / 1000)}km`);
+  // console.log(`So ${height}x${width} gives ${Math.trunc(resolution)} of resolution, so looking in ${Math.trunc(distance / 1000)}km`);
 
   const fires = ActiveFires.find({
     ourid: {
@@ -76,7 +76,7 @@ const activefires = (zoom, lat, lng, height, width) => {
       scan: 1
     }
   });
-  console.log(`Fires total: ${fires.count()}`);
+  // console.log(`Fires total: ${fires.count()}`);
   return fires;
 };
 
@@ -85,7 +85,7 @@ Meteor.publish('allActiveFires', function allActive() {
   // latitude -90 and 90 and the longitude between -180 and 180
 
   const { latitude, longitude } = localize().location;
-  console.log(`${latitude}, ${longitude}`);
+  // console.log(`${latitude}, ${longitude}`);
   check(latitude, NumberBetween(-90, 90));
   check(longitude, NumberBetween(-180, 180));
   // https://docs.meteor.com/api/collections.html#Mongo-Collection-find
@@ -117,10 +117,10 @@ Meteor.publish('activefiresmyloc', function activeInMyLoc(zoom, lat, lng, height
   check(lng, NullOr(Number));
   check(height, NullOr(Number));
   check(width, NullOr(Number));
-  console.log(`Check active fires in ${lat},${lng} with zoom ${zoom} pixels in ${height}x${width} map`);
+  // console.log(`Check active fires in ${lat},${lng} with zoom ${zoom} pixels in ${height}x${width} map`);
   if (lat === null || lng === null) {
     const location = localize();
-    console.log(`${location.latitude}, ${location.longitude}`);
+    // console.log(`${location.latitude}, ${location.longitude}`);
     return activefires(zoom, location.latitude, location.longitude, height, width);
   }
   return activefires(zoom, lat, lng, height, width);

imports/ui/components/Maps/SubsUnion/SubsUnion.js

@@ -38,7 +38,7 @@ const subsUnion = (union, options) => {
   const fillColor = options.fillColor || 'green';
   const opacity = options.options || 0.1;
 
-  if (options.subs.length > 0) {
+  if (options.subs) {
     const lmap = options.map.leafletElement;
     // http://leafletjs.com/reference-1.2.0.html#layergroup
     // FeatureGroup has getBounds
@@ -49,7 +49,7 @@ const subsUnion = (union, options) => {
     }
     union = null;
 
-    if (options.show) {
+    if (options.subs.length > 0 && options.show) {
       // http://leafletjs.com/reference-1.2.0.html#path
       const copts = {
         parts: 144

imports/ui/components/Prompt/Confirm.js

@@ -0,0 +1,11 @@
+import { createConfirmation } from 'react-confirm';
+import Prompt from './Prompt';
+
+// create confirm function
+const confirm = createConfirmation(Prompt);
+
+// This is optional. But I recommend to define your confirm function easy to call.
+export default function (confirmation, options = {}) {
+  // You can pass whatever you want to the component. These arguments will be your Component's props
+  return confirm({ confirmation, ...options });
+}

imports/ui/components/Prompt/Prompt.js

@@ -0,0 +1,111 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable react/jsx-indent */
+/* eslint-disable import/no-absolute-path */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Button } from 'react-bootstrap';
+import { confirmable } from 'react-confirm';
+
+class Prompt extends Component {
+  // constructor(props) {
+  /* super(props);
+     * this.state = {
+     *   open: true
+     * };
+       }
+
+       componentDidMount() {
+     * console.log(this.prompt);
+     * this.setState({ open: true });
+       }
+     */
+
+  render2() {
+    const {
+      show,
+      proceed,
+      dismiss,
+      cancel,
+      confirmation,
+      okBtn,
+      cancelBtn
+    } = this.props;
+    return (
+      <div
+          className="modal"
+tabIndex="-1"
+role="dialog"
+      >
+        <div className="modal-dialog" role="document">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h5 className="modal-title">Modal title</h5>
+              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div className="modal-body">
+              <p>Modal body text goes here.</p>
+            </div>
+            <div className="modal-footer">
+              <button type="button" className="btn btn-primary">Save changes</button>
+              <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  render() {
+    const {
+      show,
+      proceed,
+      dismiss,
+      cancel,
+      confirmation,
+      okBtn,
+      cancelBtn,
+      enableEscape = true
+    } = this.props;
+    return (
+     <div className="static-modal">
+        <Modal
+            show={show}
+            onHide={dismiss}
+            style={{ opacity: 1 }}
+            aria-labelledby="ModalHeader"
+            backdrop={enableEscape ? true : 'static'}
+            keyboard={enableEscape}
+        >
+          <Modal.Header closeButton>
+            <Modal.Title id="ModalHeader" />
+          </Modal.Header>
+          <Modal.Body>
+            <p>{confirmation}</p>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button className="button-l" bsStyle="primary" onClick={proceed}>{okBtn}</Button>
+            <Button onClick={cancel}>{cancelBtn}</Button>
+          </Modal.Footer>
+        </Modal>
+     </div>
+    );
+  }
+}
+
+Prompt.propTypes = {
+  show: PropTypes.bool, // from confirmable. indicates if the dialog is shown or not.
+  proceed: PropTypes.func, // from confirmable. call to close the dialog with promise resolved.
+  cancel: PropTypes.func, // from confirmable. call to close the dialog with promise rejected.
+  dismiss: PropTypes.func, // from confirmable. call to only close the dialog.
+  confirmation: PropTypes.string, // arguments of your confirm function
+  okBtn: PropTypes.string.isRequired,
+  cancelBtn: PropTypes.string.isRequired,
+  enableEscape: PropTypes.bool
+};
+
+Prompt.defaultProps = {
+};
+
+export default confirmable(Prompt);

imports/ui/pages/Subscriptions/Subscriptions.js

@@ -4,14 +4,14 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Table, Alert, Button } from 'react-bootstrap';
-import { timeago } from '@cleverbeagle/dates';
+import { Alert } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, translate } from 'react-i18next';
 import { Bert } from 'meteor/themeteorchef:bert';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
 import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
+import confirm from '/imports/ui/components/Prompt/Confirm';
 import Loading from '../../components/Loading/Loading';
 import './Subscriptions.scss';
 
@@ -33,7 +33,6 @@ class Subscriptions extends Component {
   }
 
   onSndBtn() {
-    console.log('Snd btn pressed');
     this.setState({ action: action.edit });
   }
 
@@ -43,7 +42,10 @@ class Subscriptions extends Component {
   }
 
   handleRemove(subscriptionId) {
-    if (confirm('Are you sure? This is permanent!')) {
+    const { t } = this.props;
+    confirm(t('Dejarás de recibir notificaciones de fuegos en esa área ¿Estás seguro/a? '), { okBtn: t('Sí'), cancelBtn: t('No') }).then(
+      () => {
+        // `proceed` callback
         Meteor.call('subscriptions.remove', subscriptionId, (error) => {
           if (error) {
             Bert.alert(error.reason, 'danger');
@@ -51,16 +53,18 @@ class Subscriptions extends Component {
             Bert.alert('Subscription deleted!', 'success');
           }
         });
+      },
+      () => {
+        // `cancel` callback
       }
+    );
   }
 
   render() {
     const {
       loading,
       t,
-      subscriptions,
-      match,
-      history
+      subscriptions
     } = this.props;
     return (!loading ? (
       <div className="Subscriptions">
@@ -68,22 +72,23 @@ class Subscriptions extends Component {
           <h4 className="pull-left"><Trans>Suscripciones a fuegos en zonas de mi interés</Trans></h4>
         </div>
         <br />
+        { subscriptions.length === 0 &&
+          <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
+        }
+        <br />
         <SelectionMap
             center={[null, null]}
             zoom={11}
             action={this.state.action}
             fstBtn={t('Añadir zona')}
             onFstBtn={state => this.onFstBtn(state)}
-            sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null}
+            sndBtn={this.props.subscriptions.length >= 1 ? t('Editar') : null}
             onSndBtn={() => this.onSndBtn()}
             onViewportChanged={viewport => this.onViewportChanged(viewport)}
             loadingSubs={this.props.loading}
             currentSubs={this.props.subscriptions}
             onRemove={(id) => { this.handleRemove(id); }}
         />
-        { subscriptions.length === 0 &&
-          <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
-        }
       </div>
     ) : <Loading />);
   }

package-lock.json

@@ -9840,6 +9840,11 @@
         "warning": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz"
       }
     },
+    "react-confirm": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/react-confirm/-/react-confirm-0.1.16.tgz",
+      "integrity": "sha512-eNV9e+qFQl93kadwkEhqNF5UX7RxQyXtM2f4MzDLwBOINTqQITIASpRmuxO59hpsrFCWWowx4lmfpDDXwPhhcw=="
+    },
     "react-dom": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",

package.json

@@ -47,6 +47,7 @@
     "react": "^16.0.0",
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-bootstrap": "^0.31.5",
+    "react-confirm": "^0.1.16",
     "react-dom": "^16.0.0",
     "react-fullpage": "^0.1.18",
     "react-i18next": "^7.1.1",