-
Notifications
You must be signed in to change notification settings - Fork 1
/
corey.text
109 lines (91 loc) · 2.91 KB
/
corey.text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3xkNlmWAK_4v52ewKZbnUoifMcYAxIy8"></script>
import React, { Component, PropTypes } from 'react';
import { hashHistory } from 'react-router';
import { connect } from 'react-redux';
// import { loadJS } from 'load-js';
// import { bindActionCreators } from 'redux';
// Import Style
import styles from '../../Photo.css';
// Import Actions
import { fetchPhotos } from '../../PhotoActions';
// Import Selectors
import { getPhotos } from '../../PhotoReducer';
class PhotoListPage extends Component {
constructor(props) {
super(props);
this.state = { loaded: false };
this.initMap = this.initMap.bind(this);
}
componentDidMount() {
this.props.dispatch(fetchPhotos());
window.initMap = this.initMap;
loadJS('https://maps.googleapis.com/maps/api/js?key=AIzaSyC3xkNlmWAK_4v52ewKZbnUoifMcYAxIy8&callback=initMap');
}
initMap() {
// set the map to show SF
this.setState({ loaded: true });
const mapOptions = {
center: { lat: 37.7758, lng: -122.435 }, // this is SF
zoom: 13,
disableDefaultUI: true,
zoomControl: true,
};
this.map = new google.maps.Map(this.refs.map, mapOptions);
alert('callback');
}
render() {
if (this.state.loaded) {
this.props.photos.map(photo => {
this.marker = new google.maps.Marker({
position: { lat: photo.lat, lng: photo.lng },
map: this.map
});
google.maps.event.addListener(this.marker, 'click', () => (hashHistory.push(`/photos/${photo.cuid}`)));
return 0;
});
}
return (
<div>
<span className={styles.mainmap} ref="map">Map</span>
{
this.props.photos.map(photo => (
<section>
<img alt="streetart" src={photo.photo_url} className={styles['main-photo']} />
<p>{photo.description}</p>
<p>{photo.lng}</p>
<p>{photo.lat}</p>
</section>
))
}
</div>
);
}
}
function loadJS(src) {
const ref = window.document.getElementsByTagName("script")[0];
const script = window.document.createElement("script");
script.src = src;
script.async = true;
ref.parentNode.insertBefore(script, ref);
}
const mapStateToProps = (state) => {
return {
photos: getPhotos(state),
};
};
PhotoListPage.propTypes = {
photos: PropTypes.arrayOf(PropTypes.shape({
photo_url: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
lng: PropTypes.number.isRequired,
lat: PropTypes.number.isRequired,
})).isRequired,
dispatch: PropTypes.func.isRequired,
};
PhotoListPage.contextTypes = {
router: React.PropTypes.object,
};
export default connect(
mapStateToProps
)(PhotoListPage);