Merge pull request #6658 from topcoder-platform/PROD-2932

Prod 2932

Author: luizrrodrigues

__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap

@@ -84,6 +84,7 @@ exports[`Matches shallow shapshot 1`] = `
     expanding={false}
     loadMore={[MockFunction]}
     loading={false}
+    needLoad={false}
     newChallengeDetails={false}
     openChallengesInNewTabs={false}
     setFilterState={[MockFunction]}

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

@@ -24,6 +24,7 @@ import './style.scss';
 // const COLLAPSED_SIZE = 10;
 
 // const Filter = challengeUtils.filter;
+const LOADING_MESSAGE = 'Loading Challenges';
 
 export default function Bucket({
   bucket,
@@ -36,6 +37,7 @@ export default function Bucket({
   expand,
   filterState,
   // keepPlaceholders,
+  needLoad,
   loading,
   loadMore,
   newChallengeDetails,
@@ -137,7 +139,12 @@ export default function Bucket({
             title={BUCKET_DATA[bucket].name}
           />
           <h1 styleName="no-results">
-            {`${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`}
+            {
+              needLoad ? LOADING_MESSAGE
+                : (
+                  `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`
+                )
+            }
           </h1>
         </div>
       </div>
@@ -262,6 +269,7 @@ Bucket.defaultProps = {
   expand: _.noop,
   challengeTypes: [],
   // keepPlaceholders: false,
+  needLoad: false,
   loading: false,
   loadMore: null,
   newChallengeDetails: false,
@@ -286,6 +294,7 @@ Bucket.propTypes = {
   challengesUrl: PT.string.isRequired,
   filterState: PT.shape().isRequired,
   // keepPlaceholders: PT.bool,
+  needLoad: PT.bool,
   loading: PT.bool,
   loadMore: PT.func,
   newChallengeDetails: PT.bool,

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

@@ -17,6 +17,7 @@ import './style.scss';
 const Filter = challengeUtils.filter;
 
 const NO_RESULTS_MESSAGE = 'No challenges found';
+const LOADING_MESSAGE = 'Loading Challenges';
 
 // Functional implementation of ReviewOpportunityBucket component
 export default function ReviewOpportunityBucket({
@@ -26,6 +27,7 @@ export default function ReviewOpportunityBucket({
   expandTag,
   filterState,
   keepPlaceholders,
+  needLoad,
   loading,
   loadMore,
   opportunities,
@@ -133,7 +135,7 @@ export default function ReviewOpportunityBucket({
                 onSelect={setSort}
               />
               <h1 styleName="no-results">
-                {NO_RESULTS_MESSAGE}
+                {needLoad ? LOADING_MESSAGE : NO_RESULTS_MESSAGE}
               </h1>
             </div>
           </div>
@@ -154,6 +156,7 @@ ReviewOpportunityBucket.defaultProps = {
   expandedTags: [],
   expandTag: null,
   keepPlaceholders: false,
+  needLoad: false,
   loading: false,
   loadMore: null,
   sort: null,
@@ -169,6 +172,7 @@ ReviewOpportunityBucket.propTypes = {
   filterState: PT.shape().isRequired,
   opportunities: PT.arrayOf(PT.shape()).isRequired,
   keepPlaceholders: PT.bool,
+  needLoad: PT.bool,
   loading: PT.bool,
   loadMore: PT.func,
   setFilterState: PT.func.isRequired,

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

@@ -17,6 +17,7 @@ import CardPlaceholder from '../placeholders/ChallengeCard';
 import './style.scss';
 
 // const Filter = challengeUtils.filter;
+const LOADING_MESSAGE = 'Loading Challenges';
 
 function Listing({
   activeBucket,
@@ -40,6 +41,7 @@ function Listing({
   // extraBucket,
   filterState,
   keepPastPlaceholders,
+  needLoad,
   loadingPastChallenges,
   loadingReviewOpportunities,
   loadingMyChallenges,
@@ -152,6 +154,7 @@ function Listing({
             expandTag={expandTag}
             filterState={filterState}
             keepPlaceholders={keepPastPlaceholders}
+            needLoad={needLoad}
             loading={loadingReviewOpportunities}
             loadMore={loadMoreReviewOpportunities}
             opportunities={reviewOpportunities}
@@ -182,6 +185,7 @@ function Listing({
             expandTag={expandTag}
             filterState={filterState}
             // keepPlaceholders={keepPlaceholders}
+            needLoad={needLoad}
             loading={loading}
             loadMore={loadMore}
             newChallengeDetails={newChallengeDetails}
@@ -255,7 +259,14 @@ function Listing({
         loading
           ? placeholders
           : (!filterState.recommended || activeBucket !== 'openForRegistration') && (
-            <div styleName="no-results">{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }</div>
+            <div styleName="no-results">
+              {
+                needLoad ? LOADING_MESSAGE
+                  : (
+                    `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`
+                  )
+              }
+            </div>
           )
       }
     </div>
@@ -322,6 +333,7 @@ Listing.propTypes = {
   // extraBucket: PT.string,
   filterState: PT.shape().isRequired,
   keepPastPlaceholders: PT.bool.isRequired,
+  needLoad: PT.bool.isRequired,
   loadingPastChallenges: PT.bool.isRequired,
   loadingMyChallenges: PT.bool.isRequired,
   loadingMyPastChallenges: PT.bool.isRequired,

src/shared/components/challenge-listing/Listing/style.scss

@@ -3,6 +3,7 @@
 .challengeCardContainer {
   border-radius: $corner-radius;
   width: 76.5%;
+  margin-left: auto;
 
   @include xs-to-md {
     width: 100%;

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

@@ -118,6 +118,7 @@ export default function ChallengeListing(props) {
             // extraBucket={extraBucket}
       filterState={props.filterState}
       keepPastPlaceholders={keepPastPlaceholders}
+      needLoad={props.needLoad}
       loadingPastChallenges={props.loadingPastChallenges}
       loadingMyChallenges={props.loadingMyChallenges}
       loadingMyPastChallenges={props.loadingMyPastChallenges}
@@ -241,6 +242,7 @@ ChallengeListing.propTypes = {
   keepPastPlaceholders: PT.bool.isRequired,
   // lastUpdateOfActiveChallenges: PT.number.isRequired,
   // loadingChallenges: PT.bool.isRequired,
+  needLoad: PT.bool.isRequired,
   loadingMyChallenges: PT.bool.isRequired,
   loadingMyPastChallenges: PT.bool.isRequired,
   loadingAllChallenges: PT.bool.isRequired,

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

@@ -44,6 +44,7 @@ export class ListingContainer extends React.Component {
     super(props);
 
     this.state = {
+      needLoad: true,
       previousBucketOfActiveTab: null,
       previousBucketOfPastChallengesTab: null,
     };
@@ -132,6 +133,7 @@ export class ListingContainer extends React.Component {
       dropPastChallenges,
       getPastChallenges,
       filterState,
+      loading,
     } = this.props;
     const oldUserId = _.get(prevProps, 'auth.user.userId');
     const userId = _.get(this.props, 'auth.user.userId');
@@ -257,6 +259,10 @@ export class ListingContainer extends React.Component {
     }
     if (filterChanged(filter, prevProps.filter)) {
       this.reloadChallenges();
+      if (!loading) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({ needLoad: false });
+      }
     }
     setTimeout(() => {
       selectBucketDone();
@@ -495,6 +501,7 @@ export class ListingContainer extends React.Component {
     } = this.props;
 
     const {
+      needLoad,
       previousBucketOfActiveTab,
       previousBucketOfPastChallengesTab,
     } = this.state;
@@ -630,6 +637,7 @@ export class ListingContainer extends React.Component {
           keepPastPlaceholders={keepPastPlaceholders}
           // lastUpdateOfActiveChallenges={lastUpdateOfActiveChallenges}
           // eslint-disable-next-line max-len
+          needLoad={needLoad}
           loadingMyChallenges={Boolean(loadingMyChallengesUUID)}
           loadingMyPastChallenges={Boolean(loadingMyPastChallengesUUID)}
           loadingAllChallenges={Boolean(loadingAllChallengesUUID)}
@@ -706,6 +714,7 @@ ListingContainer.defaultProps = {
   queryBucket: BUCKETS.OPEN_FOR_REGISTRATION,
   meta: {},
   expanding: false,
+  loading: false,
   // isBucketSwitching: false,
   // userChallenges: [],
 };
@@ -805,6 +814,7 @@ ListingContainer.propTypes = {
   // getUserChallenges: PT.func.isRequired,
   setSearchText: PT.func.isRequired,
   filterState: PT.shape().isRequired,
+  loading: PT.bool,
 };
 
 const mapStateToProps = (state, ownProps) => {
@@ -865,6 +875,10 @@ const mapStateToProps = (state, ownProps) => {
     meta: cl.meta,
     // userChallenges: cl.userChallenges,
     filterState: cl.filter,
+    loading: Boolean(cl.loadingActiveChallengesUUID)
+      || Boolean(cl.loadingOpenForRegistrationChallengesUUID)
+      || Boolean(cl.loadingMyChallengesUUID) || Boolean(cl.loadingAllChallengesUUID)
+      || Boolean(cl.loadingPastChallengesUUID) || cl.loadingReviewOpportunitiesUUID,
   };
 };