- i am new to react
- i am trying to reuse the value in renderResult function which I have used in render function.
- but not sure how to get this vlue data.balance.pendingElectronicTransferAmount in renderResult function.
- the reason i need to update with new value since I need to get the entire amount, previously i was getting only one amount.
- right now when I print this line console.log("this.props--->" + JSON.stringify(data.balance)); I dont get the value for pendingElectronicTransferAmount
- everything is working fine in render() function but not in renderResult function.
-- can you guys tell me how to fix it.
import React, {Component} from 'react';
import {moneyFormat} from '../../common/mixin-money-format';
import {connect} from 'react-redux';
import moment from 'moment';
import {ModalTrigger} from 'sports-modal';
import PenalityBasketWater from '../details/edit-basket-details';
import '../../../css/basket-tracker-tile.css';
class BasketTracker extends Component {
constructor(props) {
super(props);
this.renderResultError = this.renderResultError.bind(this);
this.renderResult = this.renderResult.bind(this);
this.renderTarget = this.renderTarget.bind(this);
this.renderBasketDate = this.renderBasketDate.bind(this);
}
renderResultError() {
return (
<div className="text-center negative">
Account Information Unavailable
</div>
);
}
renderResult(data) {
//const {basketWater, data} = this.props;
console.log("this.props--->" + JSON.stringify(data));
const circumferenceOfCircle = 1131;
const firstValue = JSON.stringify(data.balance.pendingElectronicTransferAmount);
const secondValue = partialResults;
//const result;
const result = +firstValue + +secondValue;
// negative or no growth
const resultMade = Math.floor((data.result * 100) / data.basketAmount) || 0;
let resultMadePercent = ((resultMade / 100) * circumferenceOfCircle);
let achievementStyle;
let growthAngle = 'rotate(-90 208.6 206.4)';
if (data.partialResults > data.basketAmount) {
// exceed the expected growth
achievementStyle = 'platinumAchievementCircle';
} else if (data.partialResults > 0) {
// positive growth
achievementStyle = 'goldAchievementCircle';
} else {
// negative growth
achievementStyle = 'negAchievementCircle';
growthAngle = 'rotate(150 208.6 206.4)';
// doing this for the purpose of showing the negative growth
resultMadePercent = -resultMadePercent;
}
const resultMadeStyle = {
strokeDasharray: resultMadePercent + ' ' + circumferenceOfCircle
};
return (
<div className="result_container">
<svg x="0px" y="0px" viewBox="0 0 420 420">
<circle
id="blue_circle" className="blueBackCircle" cx="208.6"
cy="206.4" r="180.2"
/>
<path
id="track" className="blueTrackCircle"
d="M208.6,35.7c-94.3,0-170.7,76.4-170.7,170.7s76.4,170.7,170.7,170.7s170.7-76.4,170.7-170.7
S302.9,35.7,208.6,35.7z M208.6,368.6C119,368.6,46.4,296,46.4,206.4S119,44.3,208.6,44.3s162.2,72.6,162.2,162.2
S298.2,368.6,208.6,368.6z"
/>
<circle
id="golden_result_circle" className={achievementStyle}
style={resultMadeStyle} cx="208.6" cy="206.4"
r="180.2" transform={growthAngle}
/>
</svg>
<div className="result_number">
{resultMade}% <span className="accessibility-hidden">basket result</span>
</div>
</div>
);
}
renderTarget() {
const name = this.props.profile.firstName || '';
const formatName = name && name.length > 0 ? <span style={{textTransform: 'capitalize'}}>, {name.toLowerCase()}</span> : '';
return (
<div className="alert-box action-shadow">
<h4>Want some advice{formatName}?</h4>
<p>Stay focused by setting a target date for completion of your basket.</p>
<div className="secondary-links section_content">
<ModalTrigger
className="sports-modal-trigger"
label="Set Target Date"
screenReaderLabel="Set Target Date"
modal={{
headerTitle: 'Set Target Date',
screenReaderLabel: 'Set Target Date',
enableCloseShortcuts: true
}}
>
<PenalityBasketWater
baseballInfo={this.props.baseballInfo}
basketWater={this.props.basketWater}
/>
</ModalTrigger>
</div>
</div>
);
}
renderBasketDate(basketEndDate) {
return (
<div>
<h3 className="top15">Basket Target Date</h3>
<p>
{moment(basketEndDate).format(BasketTracker.static.displayDateFormat)}
</p>
</div>
);
}
render() {
//console.log("basket-tracker-tile--->" + JSON.stringify(this.props));
const {basketWater, data} = this.props;
const basketAmount = parseFloat(basketWater.basketAmount);
const partialResults = data.balance.total || 0;
console.log("basket-tracker-tile--->" + JSON.stringify(data.balance.pendingElectronicTransferAmount));
console.log("partialResults--->" + partialResults);
const firstValue = JSON.stringify(data.balance.pendingElectronicTransferAmount);
const secondValue = partialResults;
//const result;
const result = +firstValue + +secondValue;
console.log("result--->" + result);
console.log("partialResults--->" + partialResults + data.balance.pendingElectronicTransferAmount);
return (
<div>
<div className="content-box action-shadow">
{
basketWater.error ?
this.renderResultError() :
this.renderResult({
partialResults,
basketAmount
})
}
<div className="section_content">
<h2>Your Basket Result</h2>
<p>Your baseball currently has testing<strong className={partialResults >= 0 ? null : 'negative'}>
{moneyFormat(result)}</strong> towards your basket of <strong>
{moneyFormat(basketAmount)}</strong>.
</p>
{
basketWater.basketDate && basketWater.basketDate.length > 0 &&
basketWater.basketDate !== '2199-01-01' && this.renderBasketDate(basketWater.basketDate)
}
<div className="secondary-links section_content">
<ModalTrigger
className="sports-modal-trigger"
label="Penality Basket Water"
screenReaderLabel="Penality Basket Water"
modal={{
className: 'dia-modal',
headerTitle: 'Penality Basket Water',
screenReaderLabel: 'Penality Basket Water',
enableCloseShortcuts: true
}}
>
<PenalityBasketWater
baseballInfo={this.props.baseballInfo}
basketWater={this.props.basketWater}
/>
</ModalTrigger>
</div>
</div>
</div>
{basketWater.basketDate && basketWater.basketDate.length > 0 && basketWater.basketDate !== '2199-01-01' ?
null : this.renderTarget()}
</div>
);
}
}
BasketTracker.propTypes = {
baseballInfo: React.PropTypes.object,
data: React.PropTypes.object.isRequired,
basketWater: React.PropTypes.shape({
error: React.PropTypes.object,
basketId: React.PropTypes.number,
basketName: React.PropTypes.string,
basketAmount: React.PropTypes.number,
basketDate: React.PropTypes.string,
isRetrieving: React.PropTypes.bool
}),
profile: React.PropTypes.object
};
BasketTracker.static = {
displayDateFormat: 'MMM-YYYY'
};
export default connect(state => ({
profile: state.template.profile
}))(BasketTracker);
--JSON structure
this.props-- - > {
"baseballInfo": {
"baseballNumber": "",
"addressLine1": "",
"addressLine2": "",
"addressLine3": "",
"encId": "",
"isIRA": false,
"isRetrieving": false,
"error": null,
"baseballOpenDate": "",
"modelInfo": {
"modelCode": "",
"modelDescription": ""
}
},
"basketWater": {
"basketId": 0,
"planId": 0,
"basketName": "",
"basketAmount": 0,
"basketDate": "",
"isRetrieving": false,
"error": null
},
"data": {
"baseballId": "",
"summary": {
"asOfDate": null,
"total": 0,
"additions": 0,
"withdrawals": 0,
"gain": 0,
"isRetrieving": true,
"error": null
},
"balance": {
"total": 0,
"pendingElectronicTransferAmount": 0
},
"inception": {
"percentage": 0,
"isRetrieving": true,
"error": null,
"asOfDate": null
}
},
"profile": {
"firstName": "",
"guid": "",
"lastName": "",
"middleName": "",
"prefix": "",
"suffix": ""
}
}
