todos-contra-el-fuego-web/imports/ui/pages/Subscriptions/SubscriptionsMap.js

/* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */

import React from 'react';
import PropTypes from 'prop-types';
import { Button, ButtonGroup, Row, Col } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Trans, withTranslation } from 'react-i18next';
import { MapContainer } from 'react-leaflet';
import { Helmet } from 'react-helmet-async';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
import 'leaflet-sleep/Leaflet.Sleep.js';
import MapControl from '/imports/ui/components/Maps/MapControl';
import { MapReady } from '/imports/ui/components/Maps/MapBridge';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import Loading from '/imports/ui/components/Loading/Loading';
import SiteSettings from '/imports/api/SiteSettings/SiteSettings';
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 FullScreenMap from '/imports/ui/components/Maps/FullScreenMap';

import './SubscriptionsMap.scss';

// Remove map in subscription
class SubscriptionsMap extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: {
        center: [0, 0],
        zoom: 0
      },
      init: true
    };
    this.handleMapReady = this.handleMapReady.bind(this);
  }

  // The `subs-public-union` doc (~2.2MB) usually arrives via DDP *after* the map
  // is ready, so the one-shot MapReady draw runs with `userSubs` still null.
  // Redraw the union (and fit bounds on first real data) whenever it changes.
  componentDidUpdate(prevProps) {
    if (this.map && this.props.userSubs && this.props.userSubs !== prevProps.userSubs) {
      this.handleLeafletLoad(this.map);
    }
  }

  getMap() {
    return this.map;
  }

  // v4: <MapReady> hands us the ready Leaflet map (no ref/.leafletElement)
  handleMapReady(map) {
    this.map = map;
    this.addScale();
    this.handleLeafletLoad(map);
  }

  addScale() {
    // https://www.npmjs.com/package/leaflet-graphicscale
    const map = this.getMap();
    const options = {
      fill: 'fill',
      showSubunits: true
    };
    L.control.graphicScale([options]).addTo(map);
  }

  handleLeafletLoad(map) {
    // console.log('Map loading');
    if (map && this.props.userSubs && this.props.userSubs !== 'null') {
      // console.log(`Union of ${this.props.userSubs}`);
      this.state.union = subsUnion(this.state.union, {
        map,
        subs: this.props.userSubs,
        bounds: this.props.userSubsBounds,
        fromServer: true,
        show: true,
        // Only auto-fit to the union the first time we draw it with real data
        // (and never once the user has recentred), so later reactive updates
        // don't steal the current view. `fitDone` is a plain instance flag.
        fit: this.state.init && !this.fitDone
      });
      this.fitDone = true;
    }
  }

  centerOnUserLocation(viewport) {
    this.setState({ init: false, viewport });
    // v4 map is uncontrolled: move it imperatively
    if (this.map) this.map.setView(viewport.center, viewport.zoom);
  }

  gotoParticipe() {
    const element = document.querySelector('#participe');
    if (element) {
      element.scrollIntoView();
    } else {
      this.props.history.push('/subscriptions');
    }
  }

  render() {
    const { t } = this.props;
    const title = `${t('AppName')}: ${t('Zonas vigiladas')}`;
    console.log(`Rendering Subs users ready ${this.props.subsready} viewport: ${JSON.stringify(this.state.viewport)}`);
    return (
      <div>
        { !isHome() &&
          <Helmet>
            <title>{title}</title>
            <meta name="description" content={t('Zonas vigiladas por nuestros usuari@s actualmente')} />
          </Helmet> }
        {!this.props.subsready ?
         <Row className="align-items-center justify-content-center">
           <Loading />
         </Row>
         : ''}
         <h4 className="page-header"><Trans parent="span">Zonas vigiladas</Trans></h4>
         <Col xs={12} sm={12} md={12} lg={12}>
           <Row>
             <Trans>En verde, las zonas vigiladas por nuestros usuari@s actualmente</Trans>&nbsp;(*)
           </Row>
         </Col>
         <MapContainer
             zoom={this.state.viewport.zoom}
             center={this.state.viewport.center}
             className="subscriptionsmap-leaflet-container"
             sleep={window.location.pathname === '/' && !isChrome}
             sleepTime={10750}
             wakeTime={750}
             sleepNote
             hoverToWake={false}
             wakeMessage={this.props.t('Pulsa para activar')}
             wakeMessageTouch={this.props.t('Pulsa para activar')}
             sleepOpacity={0.6}
         >
           <MapReady onReady={this.handleMapReady} />
           <DefMapLayers gray />
           <MapControl position="topright" >
             <ButtonGroup>
               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
               <Button
                   variant="success"
                   onClick={() => { this.gotoParticipe(); }}
               >
                 {this.props.t('Participa')}
               </Button>
             </ButtonGroup>
           </MapControl>
           <FullScreenMap />
         </MapContainer>
         <Row>
           <Col xs={12} sm={12} md={12} lg={12}>
             <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} />
         }
      </div>
    );
  }
}

SubscriptionsMap.propTypes = {
  userSubs: PropTypes.string,
  userSubsBounds: PropTypes.string,
  subsready: PropTypes.bool.isRequired,
  history: PropTypes.object.isRequired,
  t: PropTypes.func.isRequired
};

export default withTranslation()(withTracker(() => {
  const settingsSubs = Meteor.subscribe('settings');
  const userSubs = SiteSettings.findOne({ name: 'subs-public-union' });
  const userSubsBounds = SiteSettings.findOne({ name: 'subs-public-union-bounds' });
  return {
    userSubs: userSubs ? userSubs.value : null,
    userSubsBounds: userSubsBounds ? userSubsBounds.value : null,
    subsready: settingsSubs.ready()
  };
})(SubscriptionsMap));