challenge buckets tweaks

components/ChallengeCardContainer/ChallengeCardContainer.jsx

@@ -21,7 +21,7 @@
 
 import _ from 'lodash';
 import React, { Component } from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
+import Waypoint from 'react-waypoint';
 import ChallengeCard from '../ChallengeCard/ChallengeCard';
 import SortingSelectBar from './SortingSelectBar/SortingSelectBar';
 import defaultFilters from './filters';
@@ -76,13 +76,17 @@ class ChallengeCardContainer extends Component {
     }, this.props.onExpandFilterResult);
   }
 
-  onScrollChallenges(isLastChallengeVisible) {
-    if (!isLastChallengeVisible || this.loading) return;
+  onScrollChallenges() {
+    if (this.loading) return;
     const { currentFilter } = this.state;
     const { filterChallengesStore } = this.state;
     const maximumScrollY = getMaxWindowScrollY();
 
-    if (currentFilter && currentFilter.totalReached !== true) {
+    if (!currentFilter || currentFilter.totalReached === true) return;
+
+    // put the fetch and update operation to the end of the queue to allow
+    // the scrolling to finish
+    setTimeout(() => {
       const pageIndex = currentFilter.currentPageIndex || 1;
       this.loading = true;
 
@@ -105,7 +109,7 @@ class ChallengeCardContainer extends Component {
           )
         ),
       });
-    }
+    });
   }
 
   onSortingSelect(filterName, sortingOptionName) {
@@ -123,17 +127,28 @@ class ChallengeCardContainer extends Component {
     const initialNumberToShow = 10;
     const { additionalFilter, filters } = this.props;
     const { currentFilter, expanded, filterSortingStore, sortingFunctionStore } = this.state;
-    const visibilitySensor = !currentFilter.totalReached && expanded
-      ? <VisibilitySensor onChange={value => this.onScrollChallenges(value)} />
-      : null;
-    const loadingIndication = !currentFilter.totalReached && expanded
-      ? <h1 className="loading">Loading...</h1>
-      : null;
     const filterChallengesStore = filterFilterChallengesStore(
       this.state.filterChallengesStore,
       currentFilter,
       additionalFilter,
     );
+    let needToFetchMore = false;
+
+    if (expanded) {
+      needToFetchMore =
+        this.state.filterChallengesStore[currentFilter.name].length >= initialNumberToShow * 5;
+    }
+
+    const loadingIndication = needToFetchMore && expanded && !currentFilter.totalReached
+      ? <h1 className="loading">Loading...</h1>
+      : null;
+
+    const loadingWaypoint = needToFetchMore && expanded && !currentFilter.totalReached
+      ? <Waypoint
+          onEnter={value => this.onScrollChallenges(value)}
+          scrollableAncestor={window}
+        />
+      : null;
 
     return (
       <div className="challengeCardContainer">
@@ -182,11 +197,11 @@ class ChallengeCardContainer extends Component {
                 }
                 {expansionButtion}
                 {loadingIndication}
-                {visibilitySensor}
               </div>
             );
           })
         }
+        {loadingWaypoint}
       </div>
     );
   }

components/SideBarFilters/SideBarFilters.jsx

@@ -239,6 +239,8 @@ class SideBarFilters extends React.Component {
    * Renders the component in the regular mode.
    */
   selectFilterMode() {
+    if (this.state.filters[FILTER_ID.ALL_CHALLENGES].count === 0) return null;
+
     const filters = this.state.filters.map((filter, index) => (
       <FilterItem
         count={filter.count}

package.json

@@ -50,6 +50,6 @@
     "react-stickynode": "^1.2.1",
     "react-svg-loader": "^1.1.1",
     "uuid": "^3.0.1",
-    "react-visibility-sensor": "^3.7.0"
+    "react-waypoint": "^5.1.0"
   }
 }