diff --git a/components/ChallengeCardContainer/ChallengeCardContainer.jsx b/components/ChallengeCardContainer/ChallengeCardContainer.jsx index 62ac184ca..67150c952 100644 --- a/components/ChallengeCardContainer/ChallengeCardContainer.jsx +++ b/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 - ? this.onScrollChallenges(value)} /> - : null; - const loadingIndication = !currentFilter.totalReached && expanded - ?

Loading...

- : 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 + ?

Loading...

+ : null; + + const loadingWaypoint = needToFetchMore && expanded && !currentFilter.totalReached + ? this.onScrollChallenges(value)} + scrollableAncestor={window} + /> + : null; return (
@@ -182,11 +197,11 @@ class ChallengeCardContainer extends Component { } {expansionButtion} {loadingIndication} - {visibilitySensor}
); }) } + {loadingWaypoint} ); } diff --git a/components/SideBarFilters/SideBarFilters.jsx b/components/SideBarFilters/SideBarFilters.jsx index 75b87526d..f4bad641f 100644 --- a/components/SideBarFilters/SideBarFilters.jsx +++ b/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) => (