70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { throttle } from 'lodash'
|
|
import Header from './Header'
|
|
import MapperCard from './MapperCard'
|
|
import MapCard from './MapCard'
|
|
|
|
class Maps extends Component {
|
|
static propTypes = {
|
|
section: PropTypes.string,
|
|
maps: PropTypes.object,
|
|
juntoState: PropTypes.object,
|
|
moreToLoad: PropTypes.bool,
|
|
user: PropTypes.object,
|
|
currentUser: PropTypes.object,
|
|
loadMore: PropTypes.func,
|
|
pending: PropTypes.bool,
|
|
onStar: PropTypes.func,
|
|
onRequest: PropTypes.func,
|
|
onMapFollow: PropTypes.func,
|
|
mapsWidth: PropTypes.number,
|
|
mobile: PropTypes.bool
|
|
}
|
|
|
|
static contextTypes = {
|
|
location: PropTypes.object
|
|
}
|
|
|
|
mapsDidMount = (node) => {
|
|
if (node) {
|
|
this.mapsDiv = node
|
|
node.addEventListener('scroll', throttle(this.scroll, 500, { leading: true, trailing: false }))
|
|
}
|
|
}
|
|
|
|
scroll = () => {
|
|
const { loadMore, moreToLoad, pending } = this.props
|
|
const { mapsDiv } = this
|
|
if (moreToLoad && !pending && mapsDiv.scrollTop + mapsDiv.offsetHeight > mapsDiv.scrollHeight - 300) {
|
|
loadMore()
|
|
}
|
|
}
|
|
|
|
render = () => {
|
|
const { mobile, maps, mapsWidth, currentUser, juntoState, pending, section, user, onStar, onRequest, onMapFollow } = this.props
|
|
const style = { width: mapsWidth + 'px' }
|
|
|
|
if (!maps) return null // do loading here instead
|
|
|
|
return (
|
|
<div>
|
|
<div id='exploreMaps' ref={this.mapsDidMount}>
|
|
<div style={ style }>
|
|
{ user ? <MapperCard user={ user } /> : null }
|
|
{ currentUser && !user && !(pending && maps.length === 0) ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
|
|
{ maps.models.map(map => <MapCard key={ map.id } map={ map } mobile={ mobile } juntoState={ juntoState } currentUser={ currentUser } onStar={ onStar } onRequest={ onRequest } onMapFollow={ onMapFollow } />) }
|
|
<div className='clearfloat'></div>
|
|
</div>
|
|
</div>
|
|
<Header signedIn={ !!currentUser }
|
|
section={ section }
|
|
user={ user }
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Maps
|