{"size": 2568, "ext": "js", "max_stars_repo_path": "components/GMap.js", "max_stars_repo_name": "tklem/congMaps", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/GMap.js", "max_issues_repo_name": "tklem/congMaps", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/GMap.js", "max_forks_repo_name": "tklem/congMaps", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.5596330275, "max_line_length": 62, "alphanum_fraction": 0.6292834891}
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { initializeMaps } from '../actions';

class GMap extends React.Component {
  constructor(props) {
    super(props);
    this.initMap = this.initMap.bind(this);
    this.addDist = this.addDist.bind(this);
  }
  
  componentDidMount() {
    const { fetchingMaps, mapsLoaded, dispatch } = this.props;
    dispatch(initializeMaps());
    if (!fetchingMaps && mapsLoaded) {
      this.initMap();
    }
  }

  componentWillReceiveProps(nextProps) {
    const { 
      fetchingMaps, 
      mapsLoaded, 
      distFound, 
      succeedDist, 
      center, 
      zipExist
    } = nextProps;

    if (!fetchingMaps && mapsLoaded && !distFound.length) {
      this.initMap(center);
    }
    if(succeedDist && distFound.length && zipExist) {
      this.addDist(distFound, center);
    }
  }

  initMap(nextCenter) {
    this.map = new google.maps.Map(this.refs.map, {
      center: nextCenter,
      zoom: 5,
    });
    this.marker = new google.maps.Marker({
      map: this.map
    });
    this.ftLayer = new google.maps.FusionTablesLayer({
      map: this.map
    })
  }

  addDist(distFound, center) {
    this.map.setCenter(center);
    this.map.setZoom(11);
    this.marker.setPosition(center);
    let distGroup = '('; 
    for(let distNumber in distFound) {
      distGroup += (distFound[distNumber] + ',');
    }
    distGroup = distGroup.slice(0,-1);
    distGroup = ('name IN ' + distGroup + ')');
    let ftQuery = {
      from: '15_E5AfGNXK2JhLwhm2p3Cjxsxz1oC2SCYXRiGnTi',
      select: 'geometry',
      where: distGroup
    };
    this.ftLayer.setOptions({query: ftQuery});

  }

  render() {
    const mapStyle = {
      border: '1px solid black',
      paddingBottom: '62.5%'
    }
    return (
      <div>
        <div ref="map" style={mapStyle}></div>
      </div>
    );
  }
}

GMap.propTypes = {
  fetchingMaps: PropTypes.bool.isRequired,
  mapsLoaded: PropTypes.bool.isRequired,
  succeedDist: PropTypes.bool.isRequired,
  zipExist: PropTypes.bool.isRequired,
  distFound: PropTypes.array,
  center: PropTypes.object.isRequired,
  zipSubmitted: PropTypes.string
}

function mapStateToProps(state) {
  const { maps, districts, zipcode } = state
  const { fetchingMaps, mapsLoaded, center } = maps
  const { zipSubmitted, zipExist } = zipcode
  const { distFound, succeedDist } = districts
  return { 
    fetchingMaps, 
    mapsLoaded, 
    distFound, 
    zipSubmitted, 
    succeedDist, 
    center, 
    zipExist
  }
}

export default connect(mapStateToProps)(GMap)