geo_fences.js

import React from 'react'
import SubmitButton from '../../common/inputs/submit_button'
import request from 'superagent'

import { zoomBasedOnRadius } from '../../common/utils/zoom_calculation'

const { compose, withProps, withState, withHandlers } = require("recompose");

import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Circle,
  Polygon,
  Marker,
  InfoWindow
} from "react-google-maps";

const GOOGLE_API_KEY="";

const MapWithCircles = compose(
  withProps({
    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&v=3.exp&libraries=geometry,drawing,places`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `150px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withHandlers(() => {
    const refs = {
      map: undefined,
    }
    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },
    }
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultCenter={{ lat: props.lat, lng: props.lng }}
    defaultZoom={zoomBasedOnRadius(props.radius)}
    ref={props.onMapMounted}
  >
    <Polygon
      paths={ props.points }
      options={{
        strokeColor: "#2ebaa7",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#2E87BA",
        fillOpacity: 0.35,
      }}
    />
    <Circle
      center={{ lat: props.lat, lng: props.lng }}
      radius={5}
      options={{
        fillColor: '#004464',
        strokeWeight: 8,
      }}
    />
  </GoogleMap>
);

const GeoFence = ({ id, address, radius, lat, lng, points, polyline, handleRemove }) => {
  return(
    <li className="flexbox">

      <div className="map">
        <MapWithCircles
          lat={Number(lat)}
          lng={Number(lng)}
          radius={Number(radius)}
          points={ google.maps.geometry.encoding.decodePath(polyline) }
        />

      </div>

      <div className="flexbox location">
        <div>
          <b>{address}, {Number(radius/1000)}km</b>
        </div>
        <div className="deleteButton">
          <SubmitButton
            label="Usuń"
            className="btn btn-primary btn-sm"
            onClick={handleRemove}
          />
        </div>
      </div>
    </li>
  );
};

class GeoFences extends React.Component {
  constructor(props) {
    super(props);
    this.state = {}

    this.removeAndReload = this.removeAndReload.bind(this);
  }

  removeAndReload(event, geoFenceId, handleReload) {
    event.preventDefault();
    const authenticity_token = $('meta[name="csrf-token"]').attr('content');

    request
      .delete(`/user/web_api/geo_fences/${geoFenceId}`)
      .set('X-CSRF-Token', authenticity_token)
      .on('error', (error) => {
        handleReload();
      })
      .then(response => {
        handleReload();
    });
  }

  render() {
    const { data, handleReload, handleRemove } = this.props;

    return(
      <div className="row">
        <div className="col-lg-7" >
          {data.length == 0 &&
            <p>Brak dodanych stref</p>
          }

          {data.length > 0 &&
            <h6>Dodane strefy</h6>,
            <ul className="geoFence">
              {data.map((geoFence) => <GeoFence key={geoFence.id} {...geoFence} handleRemove={(e) => handleRemove(e, geoFence.id, handleReload)}/>)}
            </ul>
          }
        </div>
      </div>
    )
  }
}

export default GeoFences;