drawing.js

import React, { Component } from 'react';
import { DrawingManager } from 'react-google-maps/lib/components/drawing/DrawingManager';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { mapConfig } from '../../../../constants/component-configs';
import {
  setShapeEventListener,
  getShapeArea,
  getFiltersFromGoogleMapsShape,
  convertFromGoogleMapsShape
} from '../../../../utilities/map-tools-utilities';
const { drawingManager } = mapConfig;
import { setMapFilters, setDrawingMode } from '../../../../actions/map-actions';
import debounce from 'lodash.debounce';
import ShapeTool from './shape-tool';

class MapDrawingTools extends Component {
  constructor() {
    super();
    this.state = { mapsShape: null, active: false };
    this.calculateShape = this.calculateShape.bind(this);
    this.debounceCalculateInside = debounce(this.calculateInside.bind(this), 500);
    this.resetShape = this.resetShape.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.mode !== nextProps.mode) {
      this.setState({ active: true });
    }
  }
  /* eslint-disable camelcase */
  calculateInside() {
    const { mapsShape } = this.state;
    const geom_in = getFiltersFromGoogleMapsShape(mapsShape);
    this.props.setMapFilters({ geom_in });
    this.setState({ active: false });
  }

  resetShape() {
    this.state.mapsShape.setMap(null);
    this.setState({ mapsShape: null });
    this.props.setDrawingMode('');
    this.props.setMapFilters({ geom_in: null });
  }
  /* eslint-enable */

  calculateShape(mapsShape) {
    if (this.state.mapsShape) {
      this.state.mapsShape.setMap(null);
    }
    this.setState({ mapsShape: setShapeEventListener(mapsShape, this.debounceCalculateInside) });
    this.calculateInside();
  }

  render() {
    const { mode, projectCount, eventCount } = this.props;
    const { mapsShape, active } = this.state;
    return (
      <div>
        {Boolean(mode.length) && active &&
          <DrawingManager
            drawingMode={mode}
            options={drawingManager}
            onPolygonComplete={this.calculateShape}
            onCircleComplete={this.calculateShape}
          />
        }
        {mapsShape &&
          <ShapeTool
            projectCount={projectCount}
            eventCount={eventCount}
            area={getShapeArea(mapsShape)}
            closeWindow={this.resetShape}
            shape={convertFromGoogleMapsShape(mapsShape)}
          />
        }
      </div>
    );
  }
}

MapDrawingTools.propTypes = {
  eventCount: PropTypes.number,
  loader: PropTypes.bool,
  mode: PropTypes.string,
  projectCount: PropTypes.number,
  setDrawingMode: PropTypes.func,
  setMapFilters: PropTypes.func
};

const mapStateToProps = state => {
  const { drawing, loader } = state.map;
  const projectCount = state.projects.list.length;
  const eventCount = state.events.list.length;
  return { ...drawing, projectCount, eventCount, loader };
};

export default connect(mapStateToProps, { setMapFilters, setDrawingMode })(MapDrawingTools);

export { MapDrawingTools as PureMapDrawingTools };