<commit_before>// Callback process:
// componentDidMount loads the map api, which has initMap as a callback
// initMap calls geolocation, which calls new maps.Map,
// which loops over the tutors to make markers and info windows

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import types from '../../actions/actionTypes';
import { profileActions } from '../../actions'

const loadJS = function(src) {
    const ref = window.document.getElementsByTagName("script")[0];
    const script = window.document.createElement("script");
    script.src = src;
    script.async = true;
    let length = window.document.getElementsByTagName("script").length
    let googleApiLoaded = false;
    // I know, I know, but you can't loop through nodeCollections the good way
    for (let i=0; i < length; i++) {
      if (window.document.getElementsByTagName("script")[i].src == script.src) {
        googleApiLoaded = true;
      }
    }
    if (!googleApiLoaded) {
      ref.parentNode.insertBefore(script, ref);
    } else {
      initMap();
    }
}

const availabilityColor = {1: ["#11dd11", "Available and online"],
                           2: ["#dddd11", "Available but offline"],
                           3: ["#999999", "Unavailable"],
                           null: ["#999999", "Unavailable"]}

class GoogleMap extends Component {

  constructor(props) {
    super(props);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.initMap = this.initMap.bind(this);
    this.linkToProfile = this.linkToProfile.bind(this);
  }

  linkToProfile(tutor){
    console.log('here we are');
    // return ()=> {
    //   store.dispatch(profileActions.loadProfile(tutor.id))
    // }
  }

  mapErrorCallback() {
    console.log('in map error callback')
  }

  initMap() {
    console.log('tutors in initmap', this.props.tutors);
    let center = {lat: 51.0486, lng: 114.0708}
    function setPosition(position) {
      center = {lat: position.coords.latitude, lng: position.coords.longitude};
      console.log('center in set position: ', center);
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let center = {lat: position.coords.latitude, lng: position.coords.longitude};
        const map = new window.google.maps.Map(ReactDOM.findDOMNode(this.refs["map"]), {
          zoom: 11,
          center: center
        });

        this.props.tutors.forEach((tutor) => {
          let location = JSON.parse(tutor.current_location);
          let marker = new google.maps.Marker({
            position: {lat: location.lat, lng: location.long},
            map: map,
            title: tutor.name
          });

          let availabilityStats = availabilityColor[tutor.status_code];
          let contentString = '<div class="infoWindowContent">'+
                '<div style="display: inline-block; vertical-align: top;">' +

                  `<h2>${tutor.name}</h2>`+

                  `<i style="color:${availabilityStats[0]}" class="fa fa-circle" aria-hidden="true"></i>` +
                  `<span> ${availabilityStats[1]}</span>` +
                '</div>' +
                '<div>' +
                  `<img style="max-width: 50%; max-height: 50%" class="info-window-avatar" src=${tutor.avatar}/>` +
                  `<p>Phone: ${tutor.phone}</p>` +
                  `<p>Rate: $${tutor.rate_cents / 100.0}/hr</p>`+
                '</div>'
                '</div>';

          let infowindow = new google.maps.InfoWindow({
            content: contentString
          });

          marker.addListener('click', function() {
            infowindow.open(map, marker);
          });
        })
      },
      ()=>{console.log('in error for gmap')},
      {timeout:10000});

    } else {
      // Browser does not support geolocation
      const map = new window.google.maps.Map(ReactDOM.findDOMNode(this.refs["map"]), {
        zoom: 4,
        center: {lat: 52.0486, lng: -112.0708}
      });
      this.props.tutors.forEach((tutor) => {<commit_msg>added event listener to load profile through infowindow with extra special DOM wizardry<commit_after>// Callback process:
// componentDidMount loads the map api, which has initMap as a callback
// initMap calls geolocation, which calls new maps.Map,
// which loops over the tutors to make markers and info windows

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import types from '../../actions/actionTypes';
import { profileActions } from '../../actions'
import store from '../../tuberStore';


const loadJS = function(src) {
    const ref = window.document.getElementsByTagName("script")[0];
    const script = window.document.createElement("script");
    script.src = src;
    script.async = true;
    let length = window.document.getElementsByTagName("script").length
    let googleApiLoaded = false;
    // I know, I know, but you can't loop through nodeCollections the good way
    for (let i=0; i < length; i++) {
      if (window.document.getElementsByTagName("script")[i].src == script.src) {
        googleApiLoaded = true;
      }
    }
    if (!googleApiLoaded) {
      ref.parentNode.insertBefore(script, ref);
    } else {
      initMap();
    }
}

const availabilityColor = {1: ["#11dd11", "Available and online"],
                           2: ["#dddd11", "Available but offline"],
                           3: ["#999999", "Unavailable"],
                           null: ["#999999", "Unavailable"]}

class GoogleMap extends Component {

  constructor(props) {
    super(props);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.initMap = this.initMap.bind(this);
    this.linkToProfile = this.linkToProfile.bind(this);
  }

  linkToProfile(tutor){
    console.log('here we are');
    // return ()=> {
    //   store.dispatch(profileActions.loadProfile(tutor.id))
    // }
  }

  mapErrorCallback() {
    console.log('in map error callback')
  }

  initMap() {
    console.log('tutors in initmap', this.props.tutors);
    let center = {lat: 51.0486, lng: 114.0708}
    function setPosition(position) {
      center = {lat: position.coords.latitude, lng: position.coords.longitude};
      console.log('center in set position: ', center);
    }

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let center = {lat: position.coords.latitude, lng: position.coords.longitude};
        const map = new window.google.maps.Map(ReactDOM.findDOMNode(this.refs["map"]), {
          zoom: 11,
          center: center
        });

        this.props.tutors.forEach((tutor) => {
          let location = JSON.parse(tutor.current_location);
          let marker = new google.maps.Marker({
            position: {lat: location.lat, lng: location.long},
            map: map,
            title: tutor.id.toString()
          });

          let availabilityStats = availabilityColor[tutor.status_code];
          let contentString = '<div class="infoWindowContent">'+
                '<div style="display: inline-block; vertical-align: top;">' +
                  `<h2 id="info-window-header${tutor.id}">${tutor.name}</h2>`+

                  `<i style="color:${availabilityStats[0]}" class="fa fa-circle" aria-hidden="true"></i>` +
                  `<span> ${availabilityStats[1]}</span>` +
                '</div>' +
                '<div>' +
                  `<img style="max-width: 50%; max-height: 50%" class="info-window-avatar" src=${tutor.avatar}/>` +
                  `<p>Phone: ${tutor.phone}</p>` +
                  `<p>Rate: $${tutor.rate_cents / 100.0}/hr</p>`+
                '</div>'
                '</div>';

          let infowindow = new google.maps.InfoWindow({
            content: contentString
          });

          marker.addListener('click', function() {
            infowindow.open(map, marker);
            document.getElementById(`info-window-header${marker.title}`).addEventListener('click', function(){
              store.dispatch(profileActions.loadProfile(marker.title));
            })

          });

        })
      },
      ()=>{console.log('in error for gmap')},
      {timeout:10000});

    } else {
      // Browser does not support geolocation
      const map = new window.google.maps.Map(ReactDOM.findDOMNode(this.refs["map"]), {
        zoom: 4,
        center: {lat: 52.0486, lng: -112.0708}
      });
      this.props.tutors.forEach((tutor) => {
{'fraction_non_alphanumeric': 0.1501892147587512, 'fraction_numerical': 0.0163197729422895, 'mean_word_length': 2.377396166134185, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2352160', 'n_tokens_mistral': 2639, 'n_tokens_neox': 2468, 'n_words': 550}