Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
trying to reuse the value in renderResult function which I have used in render function
  • 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": ""
  }
}
@heyolajyd

This comment has been minimized.

Copy link

@heyolajyd heyolajyd commented Oct 25, 2016

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 {
    renderResultError() {
      return (
        <div className="text-center negative">
          Account Information Unavailable
        </div>
      );
    }
    renderResult(data) {
        //const {basketWater, data} = this.props;
        const circumferenceOfCircle = 1131;

        const firstValue = JSON.stringify(data.balance.pendingElectronicTransferAmount);
        const secondValue = partialResults;

        const result = +firstValue + +secondValue;

        // negative or no growth
        const resultMade = Math.floor((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() {
        const { basketWater, data } = this.props;

        const basketAmount = parseFloat(basketWater.basketAmount);
        const partialResults = data.balance.total || 0;

        const firstValue = JSON.stringify(data.balance.pendingElectronicTransferAmount);
        const secondValue = partialResults;

        const result = +firstValue + +secondValue;

        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": ""
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment