content: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchParties } from '../../actions/party_actions';
  import { Link } from 'react-router';
  
  class PartyIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {searchComplete: false};
  
        this.fetchPartiesWithCoords = this.fetchPartiesWithCoords.bind(this);
    }
  
    componentWillMount() {
      this.getLocation();
    }
  
    getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(this.fetchPartiesWithCoords);
      } else {
          alert("Unable to get your location");
      }
    }
  
    fetchPartiesWithCoords(position) {
      let data = {'latitude': position.coords.latitude, 'longitude': position.coords.longitude};
      this.props.fetchParties(data).then((res) => {this.setState({searchComplete: true})});
    }
  
    renderParties() {
      return this.props.parties.map((party) => {
        return(
          <li className="list-group-item" key={party.id}>
            <Link to={"parties/" + party.id}>
              <strong>{party.title}</strong>
            </Link>
          </li>
        )
      })
    }
  
    render () {
      if(this.state.searchComplete) {
        return (
          <div>
            <h3>Parties</h3>
            <ul className="list-group">
              {this.renderParties()}
            </ul>
          </div>
        )
      } else {
        return (
          <div>
            <h3>Parties</h3>
            <label>Searching for nearby parties...</label>
          </div>
        )
      }
    }
  }
  
  function mapStateToProps(state) {
    return { parties: state.parties.all }
  }
  
  export default connect(mapStateToProps, { fetchParties })(PartyIndex);
  