qrobin · April 28, 2018 09:38 · Apr 25, 2018
diff --git a/drawing.js b/drawing.js
@@ -0,0 +1,100 @@
+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 };