From 7b3a22ce3da3dc772a28a8da8097d015fb762353 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 13 Sep 2022 19:58:22 +0700 Subject: [PATCH 1/3] fix: no challenges found --- .../Listing/__snapshots__/Bucket.jsx.snap | 1 + .../challenge-listing/Listing/Bucket/index.jsx | 11 ++++++++++- .../Listing/ReviewOpportunityBucket/index.jsx | 6 +++++- .../components/challenge-listing/Listing/index.jsx | 4 ++++ src/shared/components/challenge-listing/index.jsx | 2 ++ .../containers/challenge-listing/Listing/index.jsx | 9 +++++++++ 6 files changed, 31 insertions(+), 2 deletions(-) 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 425cddd325..fec74b8d5f 100644 --- a/__tests__/shared/components/challenge-listing/Listing/__snapshots__/Bucket.jsx.snap +++ b/__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]} diff --git a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx b/src/shared/components/challenge-listing/Listing/Bucket/index.jsx index e500d0af64..1874051d81 100644 --- a/src/shared/components/challenge-listing/Listing/Bucket/index.jsx +++ b/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} />

- {`${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}`} + { + needLoad ? LOADING_MESSAGE + : ( + `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` + ) + }

@@ -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, diff --git a/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx b/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx index bd59cf7b11..07cc41627d 100644 --- a/src/shared/components/challenge-listing/Listing/ReviewOpportunityBucket/index.jsx +++ b/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} />

- {NO_RESULTS_MESSAGE} + {needLoad ? LOADING_MESSAGE : NO_RESULTS_MESSAGE}

@@ -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, diff --git a/src/shared/components/challenge-listing/Listing/index.jsx b/src/shared/components/challenge-listing/Listing/index.jsx index 1c2c1d47b9..3b91331059 100644 --- a/src/shared/components/challenge-listing/Listing/index.jsx +++ b/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, diff --git a/src/shared/components/challenge-listing/index.jsx b/src/shared/components/challenge-listing/index.jsx index 9200762e64..00b5c564e7 100644 --- a/src/shared/components/challenge-listing/index.jsx +++ b/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, diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx index d7f8bc97b6..446c485cf5 100644 --- a/src/shared/containers/challenge-listing/Listing/index.jsx +++ b/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)} From 1ad9e06eab0ffb3eb7c74c80e218108007d3d961 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Thu, 15 Sep 2022 18:27:38 +0700 Subject: [PATCH 2/3] fix: no challenges found --- .../components/challenge-listing/Listing/index.jsx | 10 +++++++++- .../containers/challenge-listing/Listing/index.jsx | 11 +++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/shared/components/challenge-listing/Listing/index.jsx b/src/shared/components/challenge-listing/Listing/index.jsx index 3b91331059..dc4b67d2d3 100644 --- a/src/shared/components/challenge-listing/Listing/index.jsx +++ b/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, @@ -258,7 +259,14 @@ function Listing({ loading ? placeholders : (!filterState.recommended || activeBucket !== 'openForRegistration') && ( -
{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
+
+ { + needLoad ? LOADING_MESSAGE + : ( + `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` + ) + } +
) } diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx index 446c485cf5..84e6e13e03 100644 --- a/src/shared/containers/challenge-listing/Listing/index.jsx +++ b/src/shared/containers/challenge-listing/Listing/index.jsx @@ -66,8 +66,6 @@ export class ListingContainer extends React.Component { filter, } = this.props; - const { needLoad } = this.state; - markHeaderMenu(); if (queryBucket !== activeBucket && _.includes(BUCKETS, queryBucket)) { @@ -107,10 +105,6 @@ export class ListingContainer extends React.Component { }); } // } - - if (needLoad) { - this.setState({ needLoad: false }); - } } componentDidUpdate(prevProps) { @@ -140,6 +134,7 @@ export class ListingContainer extends React.Component { getPastChallenges, filterState, } = this.props; + const { needLoad } = this.state; const oldUserId = _.get(prevProps, 'auth.user.userId'); const userId = _.get(this.props, 'auth.user.userId'); const handle = _.get(auth, 'user.handle'); @@ -264,6 +259,10 @@ export class ListingContainer extends React.Component { } if (filterChanged(filter, prevProps.filter)) { this.reloadChallenges(); + if (needLoad) { + // eslint-disable-next-line react/no-did-update-set-state + this.setState({ needLoad: false }); + } } setTimeout(() => { selectBucketDone(); From 2bd260f2c1242d9e7bd0cf9cd981ae33c1d26216 Mon Sep 17 00:00:00 2001 From: lunarkid <4476442+dedywahyudi@users.noreply.github.com> Date: Tue, 20 Sep 2022 20:08:22 +0700 Subject: [PATCH 3/3] fix: no challenges found for logged in --- .../components/challenge-listing/Listing/style.scss | 1 + .../containers/challenge-listing/Listing/index.jsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/shared/components/challenge-listing/Listing/style.scss b/src/shared/components/challenge-listing/Listing/style.scss index 01cf13123b..3f9dca87c5 100644 --- a/src/shared/components/challenge-listing/Listing/style.scss +++ b/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%; diff --git a/src/shared/containers/challenge-listing/Listing/index.jsx b/src/shared/containers/challenge-listing/Listing/index.jsx index 84e6e13e03..e0c1610e0a 100644 --- a/src/shared/containers/challenge-listing/Listing/index.jsx +++ b/src/shared/containers/challenge-listing/Listing/index.jsx @@ -133,8 +133,8 @@ export class ListingContainer extends React.Component { dropPastChallenges, getPastChallenges, filterState, + loading, } = this.props; - const { needLoad } = this.state; const oldUserId = _.get(prevProps, 'auth.user.userId'); const userId = _.get(this.props, 'auth.user.userId'); const handle = _.get(auth, 'user.handle'); @@ -259,7 +259,7 @@ export class ListingContainer extends React.Component { } if (filterChanged(filter, prevProps.filter)) { this.reloadChallenges(); - if (needLoad) { + if (!loading) { // eslint-disable-next-line react/no-did-update-set-state this.setState({ needLoad: false }); } @@ -714,6 +714,7 @@ ListingContainer.defaultProps = { queryBucket: BUCKETS.OPEN_FOR_REGISTRATION, meta: {}, expanding: false, + loading: false, // isBucketSwitching: false, // userChallenges: [], }; @@ -813,6 +814,7 @@ ListingContainer.propTypes = { // getUserChallenges: PT.func.isRequired, setSearchText: PT.func.isRequired, filterState: PT.shape().isRequired, + loading: PT.bool, }; const mapStateToProps = (state, ownProps) => { @@ -873,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, }; };