Fix for Issue #5002 - Stays on main challenge listing when view more challenges is clicked.

__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}

__tests__/shared/components/challenge-listing/Sidebar/__snapshots__/index.jsx.snap

@@ -10,6 +10,7 @@ exports[`Matches shallow shapshot 1`] = `
     <BucketSelector
       activeBucket="activeBucket"
       disabled={false}
+      expanding={false}
       isAuth={false}
       selectBucket={[MockFunction]}
     />
@@ -30,6 +31,7 @@ exports[`Matches shallow shapshot 2`] = `
     <BucketSelector
       activeBucket="activeBucket"
       disabled={false}
+      expanding={false}
       isAuth={false}
       selectBucket={[MockFunction]}
     />

__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}
       >
         <Connect(SidebarContainer)
+          expanding={false}
           hideTcLinksInFooter={false}
         />
       </Sticky>
@@ -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}
       >
         <Connect(SidebarContainer)
+          expanding={false}
           hideTcLinksInFooter={false}
         />
       </Sticky>

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. */

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 ? (
           <Waypoint onEnter={loadMore} />
         ) : null
       }
       {placeholders}
       {
       // (expandable || loadMore) && (expandable || !keepPlaceholders) && !loading && !expanded ? (
-        (expandable || loadMore) && !loading && !expanded ? (
+        (expanding || expandable || loadMore) && !loading && !expanded ? (
           <a
             // href={`${challengesUrl}?${bucketQuery}`}
             href={`${challengesUrl}`}
             onClick={(event) => {
               expand();
-              document.body.scrollTop = 0;
-              document.documentElement.scrollTop = 0;
+              // document.body.scrollTop = 0;
+              // document.documentElement.scrollTop = 0;
               event.preventDefault();
             }}
             role="button"
@@ -209,13 +221,15 @@ Bucket.defaultProps = {
   expandedTags: [],
   expandTag: null,
   activeBucket: '',
+  expanding: false,
   // searchTimestamp: 0,
 };
 
 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()),

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 (
       <div styleName="challengeCardContainer">
@@ -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({

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 => (
-    <Bucket
-      active={!disabled && activeBucket === bucket}
-      bucket={bucket}
-      // challenges={challenges}
-      disabled={disabled}
-      onClick={() => {
-        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 (
+      <Bucket
+        active={!disabled && isActive}
+        bucket={bucket}
+        // challenges={challenges}
+        disabled={disabled}
+        onClick={() => {
+          selectBucket(bucket);
+          /* eslint-env browser */
+          document.body.scrollTop = 0;
+          document.documentElement.scrollTop = 0;
+        }}
+      />
+    );
+  };
 
   // const savedFiltersRender = savedFilters.map((item, index) => (
   //   <Bucket
@@ -123,10 +127,12 @@ BucketSelector.defaultProps = {
   disabled: false,
   // extraBucket: null,
   isAuth: false,
+  expanding: false,
 };
 
 BucketSelector.propTypes = {
   activeBucket: PT.string.isRequired,
+  expanding: PT.bool,
   // activeSavedFilter: PT.number.isRequired,
   // buckets: PT.shape().isRequired,
   // challenges: PT.arrayOf(PT.shape({

src/shared/components/challenge-listing/Sidebar/index.jsx

@@ -32,6 +32,7 @@ export default function SideBarFilters({
   // communityFilter,
   // deleteSavedFilter,
   disabled,
+  expanding,
   // dragSavedFilterMove,
   // dragSavedFilterStart,
   // dragState,
@@ -72,6 +73,7 @@ export default function SideBarFilters({
           // challenges={challenges}
           // communityFilter={communityFilter}
           disabled={disabled}
+          expanding={expanding}
           // extraBucket={extraBucket}
           // filterState={filterState}
           isAuth={isAuth}
@@ -94,10 +96,12 @@ SideBarFilters.defaultProps = {
   // extraBucket: null,
   hideTcLinksInFooter: false,
   isAuth: false,
+  expanding: false,
 };
 
 SideBarFilters.propTypes = {
   activeBucket: PT.string.isRequired,
+  expanding: PT.bool,
   // activeSavedFilter: PT.number.isRequired,
   // buckets: PT.shape().isRequired,
   // challenges: PT.arrayOf(PT.shape({

src/shared/components/challenge-listing/index.jsx

@@ -35,6 +35,7 @@ export default function ChallengeListing(props) {
     // communityFilter,
     communityName,
     defaultCommunityId,
+    expanding,
     // extraBucket,
     // filterState,
     hideSrm,
@@ -129,6 +130,7 @@ export default function ChallengeListing(props) {
       setSort={props.setSort}
       sorts={props.sorts}
       loadMoreActive={props.loadMoreActive}
+      expanding={expanding}
       // loadingActiveChallenges={props.loadingChallenges}
       // userChallenges={props.userChallenges}
       isLoggedIn={isLoggedIn}
@@ -161,6 +163,7 @@ export default function ChallengeListing(props) {
           <Sticky top={20} bottomBoundary="#challengeFilterContainer">
             <Sidebar
               // extraBucket={extraBucket}
+              expanding={expanding}
               hideTcLinksInFooter={hideTcLinksInFooter}
             />
           </Sticky>
@@ -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,

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)),

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,
   };
 }