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-detail/Specification/SideBar/ShareSocial.jsx b/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx index a48b1fdcfa..6a7b65584a 100644 --- a/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx +++ b/src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx @@ -6,7 +6,6 @@ import React from 'react'; import TwitterIcon from '../../../../../assets/images/social/icon_twitter.svg'; import FacebookIcon from '../../../../../assets/images/social/icon_facebook.svg'; -import EmailIcon from '../../../../../assets/images/social/icon_email.svg'; import MoreIcon from '../../../../../assets/images/social/icon_plus.svg'; import './social_media.scss'; @@ -23,8 +22,15 @@ export default class ShareSocial extends React.Component { } } else { const scriptNode = document.createElement('script'); + const scriptNodeConfig = document.createElement('script'); + + scriptNode.type = 'text/javascript'; + scriptNodeConfig.type = 'text/javascript'; scriptNode.src = 'https://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-52f22306211cecfc'; + scriptNodeConfig.text = "var addthis_config = { services_exclude: 'email' };"; + this.shareDiv.appendChild(scriptNode); + this.shareDiv.appendChild(scriptNodeConfig); } } @@ -48,15 +54,6 @@ export default class ShareSocial extends React.Component { > - - -

- {`${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..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, @@ -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') && ( -
{ `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` }
+
+ { + needLoad ? LOADING_MESSAGE + : ( + `${NO_LIVE_CHALLENGES_CONFIG[activeBucket]}` + ) + } +
) } @@ -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, 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/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..e0c1610e0a 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, }; @@ -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, }; };