the return of the infinite scroll (#795)

frontend/src/Metamaps/Views/ExploreMaps.js

@@ -13,6 +13,7 @@ import Maps from '../../components/Maps'
  */
 
 const ExploreMaps = {
+  pending: false,
   setCollection: function (collection) {
     var self = ExploreMaps
 
@@ -35,8 +36,8 @@ const ExploreMaps = {
       cb = mapperObj
       mapperObj = null
     }
-    
-    var exploreObj = { 
+
+    var exploreObj = {
       currentUser: Active.Mapper,
       section: self.collection.id,
       maps: self.collection,
@@ -44,6 +45,7 @@ const ExploreMaps = {
       moreToLoad: self.collection.page != 'loadedAll',
       user: mapperObj,
       loadMore: self.loadMore,
+      pending: self.pending,
       onStar: function (map) {
         $.post('/maps/' + map.id + '/star')
         map.set('star_count', map.get('star_count') + 1)
@@ -56,48 +58,51 @@ const ExploreMaps = {
         $.post({
           url: `/maps/${map.id}/access_request`
         })
-        GlobalUI.notifyUser('You will be notified by email if request accepted') 
+        GlobalUI.notifyUser('You will be notified by email if request accepted')
       }
     }
     ReactDOM.render(
       React.createElement(Maps, exploreObj),
       document.getElementById('explore')
     ).resize()
-    
+
     if (cb) cb()
-    Metamaps.Loading.hide()
   },
   loadMore: function () {
     var self = ExploreMaps
-
     if (self.collection.page != "loadedAll") {
       self.collection.getMaps()
+      self.pending = true
     }
-    else self.render()
+    self.render()
   },
   handleSuccess: function (cb) {
     var self = ExploreMaps
-
+    self.pending = false
     if (self.collection && self.collection.id === 'mapper') {
       self.fetchUserThenRender(cb)
     } else {
       self.render(cb)
+      Metamaps.Loading.hide()
     }
   },
   handleError: function () {
     console.log('error loading maps!') // TODO
+    Metamaps.Loading.hide()
   },
   fetchUserThenRender: function (cb) {
     var self = ExploreMaps
-    
+
     // first load the mapper object and then call the render function
     $.ajax({
       url: '/users/' + self.collection.mapperId + '/details.json',
       success: function (response) {
         self.render(response, cb)
+        Metamaps.Loading.hide()
       },
       error: function () {
         self.render(cb)
+        Metamaps.Loading.hide()
       }
     })
   }

frontend/src/components/Maps/index.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react'
+import { throttle } from 'lodash'
 import Header from './Header'
 import MapperCard from './MapperCard'
 import MapCard from './MapCard'
@@ -15,9 +16,10 @@ class Maps extends Component {
 
   componentDidMount() {
     window && window.addEventListener('resize', this.resize)
+    this.refs.maps.addEventListener('scroll', throttle(this.scroll, 500, { leading: true, trailing: false }))
     this.resize()
   }
-  
+
   componentWillUnmount() {
     window && window.removeEventListener('resize', this.resize)
   }
@@ -30,22 +32,26 @@ class Maps extends Component {
     this.setState({ mapsWidth })
   }
 
+  scroll = () => {
+    const { loadMore, moreToLoad, pending } = this.props
+    const { maps } = this.refs
+    if (moreToLoad && !pending && maps.scrollTop + maps.offsetHeight > maps.scrollHeight - 300 ) {
+      loadMore()
+    }
+  }
+
   render = () => {
     const { maps, currentUser, juntoState, section, user, moreToLoad, loadMore, onStar, onRequest } = this.props
     const style = { width: this.state.mapsWidth + 'px' }
 
     return (
       <div>
-        <div id='exploreMaps'>
+        <div id='exploreMaps' ref='maps'>
           <div style={ style }>
             { user ? <MapperCard user={ user } /> : null }
             { currentUser && !user ? <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 } juntoState={ juntoState } currentUser={ currentUser } onStar={ onStar } onRequest={ onRequest } />) }
             <div className='clearfloat'></div>
-            {!moreToLoad ? null : [
-              <button className="button loadMore" onClick={ loadMore }>load more</button>,
-              <div className='clearfloat'></div>
-            ]}
           </div>
         </div>
         <Header signedIn={ !!currentUser }
@@ -65,6 +71,7 @@ Maps.propTypes = {
   user: PropTypes.object,
   currentUser: PropTypes.object,
   loadMore: PropTypes.func,
+  pending: PropTypes.bool.isRequired,
   onStar: PropTypes.func.isRequired,
   onRequest: PropTypes.func.isRequired
 }