Added share it

imports/ui/components/ShareIt/ShareIt.js

@@ -0,0 +1,146 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable import/no-absolute-path */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import { withTracker } from 'meteor/react-meteor-data';
+import { currentLocationHref } from '/imports/ui/components/Utils/location';
+import {
+  FacebookShareButton,
+  GooglePlusShareButton,
+  TwitterShareButton,
+  TelegramShareButton,
+  WhatsappShareButton,
+  RedditShareButton,
+  EmailShareButton,
+
+  FacebookIcon,
+  GooglePlusIcon,
+  TwitterIcon,
+  TelegramIcon,
+  WhatsappIcon,
+  RedditIcon,
+  EmailIcon
+} from 'react-share';
+
+import './ShareIt.scss';
+
+class ShareIt extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+  }
+
+  render() {
+    const { title } = this.props;
+    const shareUrl = currentLocationHref();
+
+    return (
+      <div className="share_it__container">
+        <div className="share_it">
+          <FacebookShareButton
+              url={shareUrl}
+              quote={title}
+              className="share_it__share-button"
+          >
+            <FacebookIcon
+               size={32}
+                round
+            />
+          </FacebookShareButton>
+        </div>
+
+        <div className="share_it">
+          <TwitterShareButton
+              url={shareUrl}
+              title={title}
+              className="share_it__share-button"
+          >
+            <TwitterIcon size={32} round />
+          </TwitterShareButton>
+
+          <div className="share_it__share-count">
+            &nbsp;
+          </div>
+        </div>
+
+        <div className="share_it">
+          <TelegramShareButton
+              url={shareUrl}
+              title={title}
+              className="share_it__share-button"
+          >
+            <TelegramIcon size={32} round />
+          </TelegramShareButton>
+
+          <div className="share_it__share-count">
+            &nbsp;
+          </div>
+        </div>
+
+        <div className="share_it">
+          <WhatsappShareButton
+              url={shareUrl}
+              title={title}
+              separator=":: "
+              className="share_it__share-button"
+          >
+            <WhatsappIcon size={32} round />
+          </WhatsappShareButton>
+
+          <div className="share_it__share-count">
+            &nbsp;
+          </div>
+        </div>
+
+        <div className="share_it">
+          <GooglePlusShareButton
+              url={shareUrl}
+              className="share_it__share-button"
+          >
+            <GooglePlusIcon size={32} round />
+          </GooglePlusShareButton>
+        </div>
+
+        <div className="share_it">
+          <RedditShareButton
+              url={shareUrl}
+              title={title}
+              windowWidth={660}
+              windowHeight={460}
+              className="share_it__share-button"
+          >
+            <RedditIcon size={32} round />
+          </RedditShareButton>
+        </div>
+
+        <div className="share_it">
+          <EmailShareButton
+              url={shareUrl}
+              subject={title}
+              body="body"
+              className="share_it__share-button"
+          >
+            <EmailIcon size={32} round />
+          </EmailShareButton>
+        </div>
+      </div>
+    );
+  }
+}
+
+ShareIt.propTypes = {
+  t: PropTypes.func.isRequired,
+  title: PropTypes.string.isRequired
+};
+
+ShareIt.defaultProps = {
+};
+
+export default translate([], { wait: true })(withTracker((props) => {
+  const { title } = props;
+  return {
+    title
+  };
+})(ShareIt));

imports/ui/components/ShareIt/ShareIt.scss

@@ -0,0 +1,19 @@
+.share_it {
+  vertical-align: top;
+  display: inline-block;
+  margin-right: 10px;
+  text-align: center;
+}
+
+.share_it__share-count {
+  margin-top: 3px;
+  font-size: 12px;
+}
+
+.share_it__share-button {
+  cursor: pointer;
+}
+
+.share_it__share-button:hover:not(:active) {
+  opacity: 0.75;
+}

imports/ui/components/Utils/location.js

@@ -10,4 +10,12 @@ export const currentLocation = () => {
   return location.get();
 };
 
+export const currentLocationHref = () => {
+  if (Meteor.isClient) {
+    return window.location.href;
+  }
+  // FIXME
+  return location.get();
+};
+
 export const isHome = () => currentLocation() === '/';

imports/ui/pages/Fires/Fires.js

@@ -19,6 +19,7 @@ import FromNow from '/imports/ui/components/FromNow/FromNow';
 import { dateLongFormat } from '/imports/api/Common/dates';
 import '/imports/startup/client/comments';
 import FalsePositiveTypes from '/imports/api/FalsePositives/FalsePositiveTypes';
+import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
 import './Fires.scss';
 
 class Fire extends React.Component {
@@ -113,6 +114,8 @@ class Fire extends React.Component {
              <p><Trans>Fuego notificado por uno de nuestros usuarios/as <FromNow {...this.props} /></Trans></p>
             }
 
+             <ShareIt title={this.title} />
+
              {(fire.type !== 'vecinal') &&
               <Fragment>
                 <h5>{t('¿No es un fuego forestal?')}</h5>

imports/ui/pages/FiresMap/FiresMap.js

@@ -32,6 +32,7 @@ import SiteSettings from '/imports/api/SiteSettings/SiteSettings';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
 import { isNotHomeAndMobile, isChrome } from '/imports/ui/components/Utils/isMobile';
 import { isHome } from '/imports/ui/components/Utils/location';
+import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
 
 import './FiresMap.scss';
 
@@ -137,6 +138,7 @@ class FiresMap extends React.Component {
   render() {
     const { t } = this.props;
     console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length + this.props.firealerts.length} of ${this.props.activefirestotal} total. False positives: ${this.props.falsePositives.length}. Subs users ready ${this.props.subsready} (${this.props.userSubs.length}), reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`);
+    const title = `${t('AppName')}: ${t('Fuegos activos')}`;
     if (Meteor.isDevelopment) {
       console.log(`False positives total: ${this.props.falsePositivesTotal}`);
     }
@@ -148,7 +150,7 @@ class FiresMap extends React.Component {
       >
         { !isHome() &&
         <Helmet>
-          <title>{t('AppName')}: {t('Fuegos activos')}</title>
+          <title>{title}</title>
           <meta name="description" content={t('Fuegos activos en el mundo actualizados en tiempo real')} />
         </Helmet> }
         {this.props.loading || !this.props.subsready ?
@@ -255,6 +257,9 @@ class FiresMap extends React.Component {
              <p className="firesmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
            </Col>
          </Row>
+         { !isHome() &&
+           <ShareIt title={title} />
+         }
       </div>
     );
   }

imports/ui/pages/Index/Index.js

@@ -16,6 +16,7 @@ import 'bootstrap-carousel-swipe-haven/carousel-swipe';
 import { isAnyMobile } from '/imports/ui/components/Utils/isMobile';
 import SubscriptionEditor from '/imports/ui/components/SubscriptionEditor/SubscriptionEditor';
 import SubscriptionsMap from '/imports/ui/pages/Subscriptions/SubscriptionsMap';
+import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
 import FiresMap from '../FiresMap/FiresMap';
 
 import './Index.scss';
@@ -35,7 +36,10 @@ class Index extends Component {
   }
 
   componentDidMount() {
-    $('.carousel').carousel();
+    const c = $('.carousel');
+    if (c.carousel) {
+      c.carousel();
+    }
   }
 
   onResize() {
@@ -78,10 +82,11 @@ class Index extends Component {
 
   render() {
     const { t } = this.props;
+    const title = `${t('AppName')}: ${t('Inicio')}`;
     return (
       <div className="IndexDisabled full-width">
         <Helmet>
-          <title>{t('AppName')}: {t('Inicio')}</title>
+          <title>{title}</title>
         </Helmet>
         {/* https://v4-alpha.getbootstrap.com/components/carousel/  */}
         <Fragment>
@@ -291,6 +296,9 @@ class Index extends Component {
                   </div>
                 </div>
               </div>
+              <div className="text-center">
+                <ShareIt title={title} />
+              </div>
             </div>
           </section>
         </Fragment>

imports/ui/pages/Subscriptions/SubscriptionsMap.js

@@ -22,6 +22,7 @@ import Loading from '/imports/ui/components/Loading/Loading';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
 import { isChrome } from '/imports/ui/components/Utils/isMobile';
 import { isHome } from '/imports/ui/components/Utils/location';
+import ShareIt from '/imports/ui/components/ShareIt/ShareIt';
 
 import './SubscriptionsMap.scss';
 
@@ -85,12 +86,13 @@ class SubscriptionsMap extends React.Component {
 
   render() {
     const { t } = this.props;
+    const title = `${t('AppName')}: ${t('Zonas vigiladas')}`;
     console.log(`Rendering Subs users ready ${this.props.subsready} subs: ${this.props.userSubs.length} viewport: ${JSON.stringify(this.state.viewport)}`);
     return (
       <Fragment>
         { !isHome() &&
           <Helmet>
-            <title>{t('AppName')}: {t('Zonas vigiladas')}</title>
+            <title>{title}</title>
             <meta name="description" content={t('Zonas vigiladas por nuestros usuari@s actualmente')} />
           </Helmet> }
         {!this.props.subsready ?
@@ -140,6 +142,9 @@ class SubscriptionsMap extends React.Component {
              <p className="subscriptionsmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
            </Col>
          </Row>
+         { !isHome() &&
+           <ShareIt title={title} />
+         }
       </Fragment>
     );
   }

package-lock.json

@@ -2946,7 +2946,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       },
@@ -2954,8 +2953,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -7330,6 +7328,14 @@
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
       "dev": true
     },
+    "jsonp": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz",
+      "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=",
+      "requires": {
+        "debug": "2.6.9"
+      }
+    },
     "jsonpointer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
@@ -10205,6 +10211,17 @@
         "prop-types": "15.6.0"
       }
     },
+    "react-share": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-share/-/react-share-2.0.0.tgz",
+      "integrity": "sha512-WlY2nPEg8D3X9/WIJwKcEAlfqNVXbvYJ2nXIjRRQR3GBehQCs1iOrEeRn0KxJxj8AOWmX7k/AmJZLvxtovjVdQ==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "classnames": "2.2.5",
+        "jsonp": "0.2.1",
+        "prop-types": "15.6.0"
+      }
+    },
     "react-side-effect": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.3.tgz",

package.json

@@ -67,6 +67,7 @@
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.2.2",
     "react-router-hash-link": "^1.1.1",
+    "react-share": "^2.0.0",
     "reactstrap": "^5.0.0-alpha.3",
     "simpl-schema": "^0.3.2",
     "simple-line-icons": "^2.4.1",