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,
};
};