Skip to content

Commit

Permalink
fix(collective): stop relying on this.collective only set in constructor
Browse files Browse the repository at this point in the history 
for this reason, the component was not properly rendering when receiving new props

Closes #308
  • Loading branch information
@znarf
znarf committed May 17, 2018
1 parent 05c674a commit 1735e2a
Showing 1 changed file with 33 additions and 35 deletions.
68 changes: 33 additions & 35 deletions src/components/Collective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ class Collective extends React.Component {

constructor(props) {
super(props);
this.collective = this.props.collective; // pre-loaded by SSR
this.updateOrder = this.updateOrder.bind(this);
this.resetOrder = this.resetOrder.bind(this);

Expand Down Expand Up @@ -62,7 +61,7 @@ class Collective extends React.Component {
}

componentDidMount() {
window.oc = { collective: this.collective }; // for easy debugging
window.oc = { collective: this.props.collective }; // for easy debugging
}

async createOrder(order) {
Expand Down Expand Up @@ -108,22 +107,22 @@ class Collective extends React.Component {
}

render() {
const { intl, LoggedInUser, query } = this.props;
const { intl, LoggedInUser, query, collective } = this.props;

const donateParams = { collectiveSlug: this.collective.slug, verb: 'donate' };
const donateParams = { collectiveSlug: collective.slug, verb: 'donate' };
if (query.referral) {
donateParams.referral = query.referral;
}
const backgroundImage = this.collective.backgroundImage || get(this.collective,'parentCollective.backgroundImage') || defaultBackgroundImage;
const canEditCollective = LoggedInUser && LoggedInUser.canEditCollective(this.collective);
const backgroundImage = collective.backgroundImage || get(collective,'parentCollective.backgroundImage') || defaultBackgroundImage;
const canEditCollective = LoggedInUser && LoggedInUser.canEditCollective(collective);
const notification = {};
if (get(query, 'status') === 'collectiveCreated') {
notification.title = intl.formatMessage(this.messages['collective.created']);
notification.description = intl.formatMessage(this.messages['collective.created.description'], { host: this.collective.host.name });
notification.description = intl.formatMessage(this.messages['collective.created.description'], { host: collective.host.name });
}

return (
<div className={`CollectivePage ${this.collective.type}`}>
<div className={`CollectivePage ${collective.type}`}>
<style jsx>{`
.sidebar {
display: flex;
Expand Down Expand Up @@ -172,13 +171,13 @@ class Collective extends React.Component {
`}</style>

<Header
title={this.collective.name}
description={this.collective.description || this.collective.longDescription}
twitterHandle={this.collective.twitterHandle || get(this.collective.parentCollective, 'twitterHandle')}
image={this.collective.image || get(this.collective.parentCollective, 'image') || backgroundImage}
title={collective.name}
description={collective.description || collective.longDescription}
twitterHandle={collective.twitterHandle || get(collective.parentCollective, 'twitterHandle')}
image={collective.image || get(collective.parentCollective, 'image') || backgroundImage}
className={this.state.status}
LoggedInUser={this.props.LoggedInUser}
href={`/${this.collective.slug}`}
LoggedInUser={LoggedInUser}
href={`/${collective.slug}`}
/>

<Body>
Expand All @@ -193,7 +192,7 @@ class Collective extends React.Component {
/>

<CollectiveCover
collective={this.collective}
collective={collective}
cta={{ href: `#contribute`, label: 'contribute' }}
LoggedInUser={LoggedInUser}
/>
Expand All @@ -203,46 +202,45 @@ class Collective extends React.Component {
<div className="content" >

<div className="sidebar tiers" id="contribute">
{ this.collective.tiers.map(tier => (
{ collective.tiers.map(tier => (
<TierCard
key={`TierCard-${tier.slug}`}
collective={this.collective}
collective={collective}
tier={tier}
referral={query.referral}
/>
))}
<div className="CustomDonationTierCard">
<Link route={`/${this.collective.slug}/donate`}>
<Link route={`/${collective.slug}/donate`}>
<a><FormattedMessage id="collective.tiers.donate" defaultMessage="Or make a one time donation" /></a>
</Link>
</div>
</div>

{ (get(this.collective, 'stats.updates') > 0 || canEditCollective) &&
{ (get(collective, 'stats.updates') > 0 || canEditCollective) &&
<UpdatesSection
LoggedInUser={LoggedInUser}
collective={this.collective}
collective={collective}
/>
}

{ (get(this.collective, 'stats.events') > 0 || canEditCollective) &&
{ (get(collective, 'stats.events') > 0 || canEditCollective) &&
<EventsSection
LoggedInUser={LoggedInUser}
collective={this.collective}
collective={collective}
/>
}
<LongDescription longDescription={this.collective.longDescription} defaultSubtitle={this.collective.description} />
<LongDescription longDescription={collective.longDescription} defaultSubtitle={collective.description} />

<TeamSection
collective={this.collective}
collective={collective}
LoggedInUser={LoggedInUser}
limit={10}
/>
</div>
</div>


{ get(this.collective, 'stats.collectives.memberOf') > 0 &&
{ get(collective, 'stats.collectives.memberOf') > 0 &&
<section id="members" className="clear">
<div className="content" >
<SectionTitle
Expand All @@ -252,14 +250,14 @@ class Collective extends React.Component {
/>}
subtitle={(<FormattedMessage
id="collective.collective.memberOf.collective.parent.subtitle"
values={{ n: this.collective.stats.collectives.memberOf }}
values={{ n: collective.stats.collectives.memberOf }}
defaultMessage={`{n, plural, one {this collective is} other {{n} collectives are}} part of our collective`}
/>)}
/>

<div className="cardsList">
<CollectivesWithData
ParentCollectiveId={this.collective.id}
ParentCollectiveId={collective.id}
orderBy="balance"
type="COLLECTIVE"
orderDirection="DESC"
Expand All @@ -272,9 +270,9 @@ class Collective extends React.Component {

<section id="budget" className="clear">
<div className="content" >
<SectionTitle section="budget" values={{ balance: formatCurrency(get(this.collective, 'stats.balance'), this.collective.currency) }} />
<SectionTitle section="budget" values={{ balance: formatCurrency(get(collective, 'stats.balance'), collective.currency) }} />
<ExpensesSection
collective={this.collective}
collective={collective}
LoggedInUser={LoggedInUser}
limit={10}
/>
Expand All @@ -283,29 +281,29 @@ class Collective extends React.Component {

<section id="contributors" className="tier">
<div className="content" >
{ get(this.collective, 'stats.backers.all') === 0 &&
{ get(collective, 'stats.backers.all') === 0 &&
<SectionTitle
section="contributors"
subtitle={<FormattedMessage id="collective.section.contributors.empty" defaultMessage="You don't have any contributors yet." />}
/>
}
{ get(this.collective, 'stats.backers.all') > 0 &&
{ get(collective, 'stats.backers.all') > 0 &&
<div>
<SectionTitle
section="contributors"
values={get(this.collective, 'stats.backers')}
values={get(collective, 'stats.backers')}
/>

<MembersWithData
collective={this.collective}
collective={collective}
type="ORGANIZATION"
LoggedInUser={LoggedInUser}
role="BACKER"
limit={100}
/>

<MembersWithData
collective={this.collective}
collective={collective}
LoggedInUser={LoggedInUser}
type="USER"
role="BACKER"
Expand Down

0 comments on commit 1735e2a

Please sign in to comment.