diff --git a/__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap b/__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap index fae62d60e8..425cddd325 100644 --- a/__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap +++ b/__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap @@ -81,6 +81,7 @@ exports[`Matches shallow shapshot 1`] = ` expandTag={null} expanded={true} expandedTags={Array []} + expanding={false} loadMore={[MockFunction]} loading={false} newChallengeDetails={false} diff --git a/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap b/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap index 5670e2e87c..abe4b7d0da 100644 --- a/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap @@ -10,6 +10,7 @@ exports[`Matches shallow shapshot 1`] = ` @@ -30,6 +31,7 @@ exports[`Matches shallow shapshot 2`] = ` diff --git a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap index 3398809133..e8c91ea348 100644 --- a/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap +++ b/__tests__/shared/components/challenge-listing/__snapshots__/index.jsx.snap @@ -25,6 +25,7 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = ` communityName={null} expandTag={null} expandedTags={Array []} + expanding={false} filterState={Object {}} loadMoreActive={null} loadMoreMy={null} @@ -55,6 +56,7 @@ exports[`Matches shallow shapshot 1 shapshot 1 1`] = ` top={20} > @@ -88,6 +90,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = ` communityName={null} expandTag={null} expandedTags={Array []} + expanding={false} filterState={Object {}} loadMoreActive={null} loadMoreMy={null} @@ -118,6 +121,7 @@ exports[`Matches shallow shapshot 2 shapshot 2 1`] = ` top={20} > diff --git a/src/shared/actions/challenge-listing/sidebar.js b/src/shared/actions/challenge-listing/sidebar.js index 1a6f4471b5..d126b08bc2 100644 --- a/src/shared/actions/challenge-listing/sidebar.js +++ b/src/shared/actions/challenge-listing/sidebar.js @@ -142,7 +142,7 @@ export default createActions({ // SAVE_FILTER_INIT: _.noop, /* Pass in the bucket type. */ - SELECT_BUCKET: _.identity, + SELECT_BUCKET: (bucket, expanding = false) => ({ bucket, expanding }), SELECT_BUCKET_DONE: _.noop, /* Pass in the index of filter inside savedFilters array. */ diff --git a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx index 50694553aa..a11152e9f4 100644 --- a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx +++ b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx @@ -31,6 +31,7 @@ export default function Bucket({ challengeTypes, challengesUrl, expanded, + expanding, expand, filterState, // keepPlaceholders, @@ -60,7 +61,18 @@ export default function Bucket({ }; const activeSort = sort || 'startDate'; - const sortedChallenges = activeBucket === 'all' ? _.clone(challenges.slice(0, 10)) : _.clone(challenges); + // const sortedChallenges = activeBucket === 'all' ? + // _.clone(challenges.slice(0, 10)) : _.clone(challenges); + let sortedChallenges; + if (activeBucket === 'all' && !expanded) { + if (loadMore && challenges.length > 10) { + sortedChallenges = _.clone(challenges); + } else { + sortedChallenges = _.clone(challenges.slice(0, 10)); + } + } else { + sortedChallenges = _.clone(challenges); + } // sortedChallenges.sort(Sort[activeSort].func); // const bucketQuery = qs.stringify({ @@ -165,21 +177,21 @@ export default function Bucket({ /> {cards} { - !expandable && loadMore && !loading ? ( + !expanding && !expandable && loadMore && !loading && activeBucket === bucket ? ( ) : null } {placeholders} { // (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? ( - (expandable || loadMore) && !loading && !expanded ? ( + (expanding || expandable || loadMore) && !loading && !expanded ? ( { expand(); - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; + // document.body.scrollTop = 0; + // document.documentElement.scrollTop = 0; event.preventDefault(); }} role="button" @@ -209,6 +221,7 @@ Bucket.defaultProps = { expandedTags: [], expandTag: null, activeBucket: '', + expanding: false, // searchTimestamp: 0, }; @@ -216,6 +229,7 @@ Bucket.propTypes = { bucket: PT.string.isRequired, // bucketId: PT.string.isRequired, expanded: PT.bool, + expanding: PT.bool, expand: PT.func, challenges: PT.arrayOf(PT.shape()).isRequired, challengeTypes: PT.arrayOf(PT.shape()), diff --git a/src/shared/components/challenge-listing/Listing/index.jsx b/src/shared/components/challenge-listing/Listing/index.jsx index 228a18f40f..68474f7475 100644 --- a/src/shared/components/challenge-listing/Listing/index.jsx +++ b/src/shared/components/challenge-listing/Listing/index.jsx @@ -55,6 +55,7 @@ function Listing({ setFilterState, setSort, sorts, + expanding, expandedTags, expandTag, // pastSearchTimestamp, @@ -141,8 +142,12 @@ function Listing({ challengeTypes={challengeTypes} challengesUrl={challengesUrl} communityName={communityName} - expand={() => selectBucket(bucket)} + expand={() => { + selectBucket(bucket, true); + loadMore(); + }} expanded={newExpanded} + expanding={expanding} expandedTags={expandedTags} expandTag={expandTag} filterState={filterState} @@ -166,7 +171,7 @@ function Listing({ ); }; - if ((activeBucket !== BUCKETS.ALL) + if (!expanding && (activeBucket !== BUCKETS.ALL) && (activeBucket !== BUCKETS.SAVED_FILTER)) { return (
@@ -224,10 +229,12 @@ Listing.defaultProps = { openChallengesInNewTabs: false, // pastSearchTimestamp: 0, // userChallenges: [], + expanding: false, }; Listing.propTypes = { activeBucket: PT.string.isRequired, + expanding: PT.bool, auth: PT.shape({ tokenV3: PT.string, user: PT.shape({ diff --git a/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx b/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx index 6f6a458a82..2d8a0f0cdb 100644 --- a/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx +++ b/src/shared/components/challenge-listing/Sidebar/BucketSelector/index.jsx @@ -24,6 +24,7 @@ export default function BucketSelector({ // challenges, // communityFilter, disabled, + expanding, // extraBucket, // filterState, isAuth, @@ -38,20 +39,23 @@ export default function BucketSelector({ // filteredChallenges = filteredChallenges.filter(Filter.getFilterFunction(communityFilter)); // } - const getBucket = bucket => ( - { - selectBucket(bucket); - /* eslint-env browser */ - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; - }} - /> - ); + const getBucket = (bucket) => { + const isActive = expanding ? bucket === BUCKETS.ALL : activeBucket === bucket; + return ( + { + selectBucket(bucket); + /* eslint-env browser */ + document.body.scrollTop = 0; + document.documentElement.scrollTop = 0; + }} + /> + ); + }; // const savedFiltersRender = savedFilters.map((item, index) => ( // @@ -189,12 +192,14 @@ ChallengeListing.defaultProps = { expandedTags: [], expandTag: null, loadMoreActive: null, + expanding: false, // isBucketSwitching: false, // userChallenges: [], }; ChallengeListing.propTypes = { activeBucket: PT.string.isRequired, + expanding: PT.bool, challenges: PT.arrayOf(PT.shape()).isRequired, openForRegistrationChallenges: PT.arrayOf(PT.shape()).isRequired, myChallenges: PT.arrayOf(PT.arrayOf()).isRequired, diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx index c08bb5d45f..434fe87393 100644 --- a/src/shared/containers/challenge-listing/Listing/index.jsx +++ b/src/shared/containers/challenge-listing/Listing/index.jsx @@ -336,6 +336,7 @@ export class ListingContainer extends React.Component { communityId, communityName, defaultCommunityId, + expanding, expandTag, expandedTags, // extraBucket, @@ -486,6 +487,7 @@ export class ListingContainer extends React.Component { communityFilter={communityFilter} communityName={communityName} defaultCommunityId={defaultCommunityId} + expanding={expanding} expandedTags={expandedTags} expandTag={expandTag} // extraBucket={extraBucket} @@ -558,6 +560,7 @@ ListingContainer.defaultProps = { prizeMode: 'money-usd', queryBucket: BUCKETS.ALL, meta: {}, + expanding: false, // isBucketSwitching: false, // userChallenges: [], }; @@ -630,6 +633,7 @@ ListingContainer.propTypes = { selectCommunity: PT.func.isRequired, setFilter: PT.func.isRequired, activeBucket: PT.string.isRequired, + expanding: PT.bool, selectedCommunityId: PT.string, sorts: PT.shape().isRequired, setSearchText: PT.func.isRequired, @@ -693,6 +697,7 @@ const mapStateToProps = (state, ownProps) => { selectedCommunityId: cl.selectedCommunityId, sorts: cl.sorts, activeBucket: cl.sidebar.activeBucket, + expanding: cl.sidebar.expanding, // isBucketSwitching: cl.sidebar.isBucketSwitching, expandedTags: cl.expandedTags, meta: cl.meta, @@ -752,7 +757,7 @@ function mapDispatchToProps(dispatch) { dispatch(a.getReviewOpportunitiesInit(uuid, page)); dispatch(a.getReviewOpportunitiesDone(uuid, page, token)); }, - selectBucket: bucket => dispatch(sa.selectBucket(bucket)), + selectBucket: (bucket, expanding) => dispatch(sa.selectBucket(bucket, expanding)), selectBucketDone: () => dispatch(sa.selectBucketDone()), selectChallengeDetailsTab: tab => dispatch(challengeDetailsActions.page.challengeDetails.selectTab(tab)), diff --git a/src/shared/reducers/challenge-listing/sidebar.js b/src/shared/reducers/challenge-listing/sidebar.js index 10f962ebb0..d822716a6d 100644 --- a/src/shared/reducers/challenge-listing/sidebar.js +++ b/src/shared/reducers/challenge-listing/sidebar.js @@ -120,18 +120,19 @@ import { updateQuery } from 'utils/url'; // } function onSelectBucket(state, { payload }) { - switch (payload) { + switch (payload.bucket) { case BUCKETS.ALL: // case BUCKETS.SAVED_FILTER: updateQuery({ bucket: undefined }); break; default: - updateQuery({ bucket: payload }); + updateQuery({ bucket: payload.expanding ? undefined : payload.bucket }); break; } return { ...state, - activeBucket: payload, + activeBucket: payload.bucket, + expanding: payload.expanding, isBucketSwitching: true, }; }