fix: no challenges found

Author: dedywahyudi

__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

@@ -40,6 +40,7 @@ function Listing({
   // extraBucket,
   filterState,
   keepPastPlaceholders,
+  needLoad,
   loadingPastChallenges,
   loadingReviewOpportunities,
   loadingMyChallenges,
@@ -152,6 +153,7 @@ function Listing({
             expandTag={expandTag}
             filterState={filterState}
             keepPlaceholders={keepPastPlaceholders}
+            needLoad={needLoad}
             loading={loadingReviewOpportunities}
             loadMore={loadMoreReviewOpportunities}
             opportunities={reviewOpportunities}
@@ -182,6 +184,7 @@ function Listing({
             expandTag={expandTag}
             filterState={filterState}
             // keepPlaceholders={keepPlaceholders}
+            needLoad={needLoad}
             loading={loading}
             loadMore={loadMore}
             newChallengeDetails={newChallengeDetails}
@@ -322,6 +325,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/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,
     };
@@ -65,6 +66,8 @@ export class ListingContainer extends React.Component {
       filter,
     } = this.props;
 
+    const { needLoad } = this.state;
+
     markHeaderMenu();
 
     if (queryBucket !== activeBucket && _.includes(BUCKETS, queryBucket)) {
@@ -104,6 +107,10 @@ export class ListingContainer extends React.Component {
       });
     }
     // }
+
+    if (needLoad) {
+      this.setState({ needLoad: false });
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -495,6 +502,7 @@ export class ListingContainer extends React.Component {
     } = this.props;
 
     const {
+      needLoad,
       previousBucketOfActiveTab,
       previousBucketOfPastChallengesTab,
     } = this.state;
@@ -630,6 +638,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)}