Merge pull request #4538 from nursoltan-s/br-4490

Add animation when selecting buckets

Author: sushilshinde

__tests__/shared/reducers/challenge-listing/sidebar.js

@@ -169,20 +169,23 @@ function testReducer(reducer) {
     expectedState = {
       ...expectedState,
       activeBucket: 'all',
+      isBucketSwitching: true,
     };
     expect(state).toEqual(expectedState);
 
     state = reducer(state, mockActions.selectBucket('saved-filter')());
     expectedState = {
       ...expectedState,
       activeBucket: 'saved-filter',
+      isBucketSwitching: true,
     };
     expect(state).toEqual(expectedState);
 
     state = reducer(state, mockActions.selectBucket('upcoming')());
     expectedState = {
       ...expectedState,
       activeBucket: 'upcoming',
+      isBucketSwitching: true,
     };
     expect(state).toEqual(expectedState);
   });
@@ -193,6 +196,7 @@ function testReducer(reducer) {
       ...expectedState,
       activeBucket: 'saved-filter',
       activeSavedFilter: 1,
+      isBucketSwitching: true,
     };
     expect(state).toEqual(expectedState);
   });

src/shared/actions/challenge-listing/sidebar.js

@@ -143,6 +143,7 @@ export default createActions({
 
       /* Pass in the bucket type. */
       SELECT_BUCKET: _.identity,
+      SELECT_BUCKET_DONE: _.noop,
 
       /* Pass in the index of filter inside savedFilters array. */
       SELECT_SAVED_FILTER: _.identity,

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

@@ -39,6 +39,7 @@ export default function ChallengeListing(props) {
     keepPastPlaceholders,
     loadingChallenges,
     preListingMsg,
+    isBucketSwitching,
   } = props;
 
   let { challenges } = props;
@@ -70,8 +71,11 @@ export default function ChallengeListing(props) {
   }
 
   let challengeCardContainer;
-  if (!expanded && loadingChallenges && !suppressPlaceholders
-    && !isReviewOpportunitiesBucket(activeBucket)) { // Skip, Review Opps are not auto-refreshed
+  if ((!expanded
+        && loadingChallenges
+        && !suppressPlaceholders
+        && !isReviewOpportunitiesBucket(activeBucket))
+      || isBucketSwitching) { // Skip, Review Opps are not auto-refreshed
     const challengeCards = _.range(CHALLENGE_PLACEHOLDER_COUNT)
       .map(key => <ChallengeCardPlaceholder id={key} key={key} />);
     challengeCardContainer = (
@@ -195,6 +199,7 @@ ChallengeListing.defaultProps = {
   expandedTags: [],
   expandTag: null,
   loadMoreActive: null,
+  isBucketSwitching: false,
 };
 
 ChallengeListing.propTypes = {
@@ -230,4 +235,5 @@ ChallengeListing.propTypes = {
   sorts: PT.shape().isRequired,
   auth: PT.shape(),
   loadMoreActive: PT.func,
+  isBucketSwitching: PT.bool,
 };

src/shared/containers/challenge-listing/Listing/index.jsx

@@ -83,6 +83,7 @@ export class ListingContainer extends React.Component {
       getRestActiveChallenges,
       meta,
       loadingActiveChallengesUUID,
+      selectBucketDone,
     } = this.props;
     const oldUserId = _.get(prevProps, 'auth.user.userId');
     const userId = _.get(this.props, 'auth.user.userId');
@@ -104,6 +105,10 @@ export class ListingContainer extends React.Component {
       && BUCKETS.PAST !== activeBucket) {
       getRestActiveChallenges(auth.tokenV3);
     }
+
+    setTimeout(() => {
+      selectBucketDone();
+    }, 10);
   }
 
   componentWillUnmount() {
@@ -198,6 +203,7 @@ export class ListingContainer extends React.Component {
       setSort,
       sorts,
       hideTcLinksInSidebarFooter,
+      isBucketSwitching,
     } = this.props;
 
     const { tokenV3 } = auth;
@@ -298,6 +304,7 @@ export class ListingContainer extends React.Component {
           sorts={sorts}
           groupIds={groupIds}
           auth={auth}
+          isBucketSwitching={isBucketSwitching}
         />
       </div>
     );
@@ -323,6 +330,7 @@ ListingContainer.defaultProps = {
   prizeMode: 'money-usd',
   queryBucket: BUCKETS.ALL,
   meta: {},
+  isBucketSwitching: false,
 };
 
 ListingContainer.propTypes = {
@@ -391,6 +399,8 @@ ListingContainer.propTypes = {
   expandTag: PT.func.isRequired,
   queryBucket: PT.string,
   meta: PT.shape(),
+  isBucketSwitching: PT.bool,
+  selectBucketDone: PT.func.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -432,6 +442,7 @@ const mapStateToProps = (state, ownProps) => {
     selectedCommunityId: cl.selectedCommunityId,
     sorts: cl.sorts,
     activeBucket: cl.sidebar.activeBucket,
+    isBucketSwitching: cl.sidebar.isBucketSwitching,
     expandedTags: cl.expandedTags,
     meta: cl.meta,
   };
@@ -471,6 +482,7 @@ function mapDispatchToProps(dispatch) {
       dispatch(a.getReviewOpportunitiesDone(uuid, page, token));
     },
     selectBucket: bucket => dispatch(sa.selectBucket(bucket)),
+    selectBucketDone: () => dispatch(sa.selectBucketDone()),
     selectChallengeDetailsTab:
       tab => dispatch(challengeDetailsActions.page.challengeDetails.selectTab(tab)),
     selectCommunity: id => dispatch(a.selectCommunity(id)),

src/shared/reducers/challenge-listing/sidebar.js

@@ -129,7 +129,18 @@ function onSelectBucket(state, { payload }) {
       updateQuery({ bucket: payload });
       break;
   }
-  return { ...state, activeBucket: payload };
+  return {
+    ...state,
+    activeBucket: payload,
+    isBucketSwitching: true,
+  };
+}
+
+function onSelectBucketDone(state) {
+  return {
+    ...state,
+    isBucketSwitching: false,
+  };
 }
 
 function onSelectSavedFilter(state, { payload }) {
@@ -181,6 +192,7 @@ function create(initialState = {}) {
       isSavingFilter: true,
     }),
     [a.selectBucket]: onSelectBucket,
+    [a.selectBucketDone]: onSelectBucketDone,
     [a.selectSavedFilter]: onSelectSavedFilter,
     [a.setEditSavedFiltersMode]: (state, { payload }) => ({
       ...state,