trc-client-core/src/product/ProductPathwayView.jsx

The core of the TRC Client

var React = require('react');
var ProductPathwayButton = require('./ProductPathwayButton');
var Table = require('bd-stampy/components/Table');
var Loader = require('trc-client-core/src/components/Loader');
var UserStore = require('trc-client-core/src/user/UserStore');
var PathwayStore = require('trc-client-core/src/course/PathwayStore.js');

var ProductPathwayView = React.createClass({
    displayName: 'ProductPathwayView',
    propTypes: {
        participantId: React.PropTypes.string.isRequired,
        pathwayId: React.PropTypes.string.isRequired
    },
    getInitialState: function(){
        return {
            careerPathway : null  
        };
    },
    componentDidMount: function () {
        this.getData();
    },
    getData: function () {
        PathwayStore.productPathway({id: this.props.pathwayId})
        .then(
            (data) => this.setState({pathway: data }),
            (error) => this.setState({error})
        );
    },
    render: function () {
        var {pathway, error} = this.state;
        if(error) {
            return <em className="InfoBox">{error.body.message}</em>
        }
        if(UserStore.get('participantId') !== ""){
            if(!this.state.pathway){
                return <Loader></Loader>;
            }
            return this.renderProductPathway(); 
        } else {
            return <em className="InfoBox">No Data to display</em>;
        }
    },
    renderProductPathway : function (){
        var defaultProps = {
            course: this.state.pathway,
            candidate: this.props.participantId
        }
        return (
            <div>
                 <h2>Product Training Plan <span className="t-muted">{UserStore.get('firstName')} {UserStore.get('lastName')}</span></h2>
                    <Table>
                            <tr>
                                <td className="t-center"><div data-icon={String.fromCharCode(9729)} className="Icon"></div>eLearning</td>
                                <td className="t-center"><div data-icon={String.fromCharCode(57348)} className="Icon"></div>Face to Face</td>
                                <td className="t-center"><div data-icon={String.fromCharCode(57399)} className="Icon"></div>Product Guide</td>
                                <td className="t-center"><div data-icon={String.fromCharCode(57353)} className="Icon"></div>Training Video</td>
                            </tr>
                            <tr>
                                <td><ProductPathwayButton {...defaultProps} type="eLearning" /></td>
                                <td><ProductPathwayButton {...defaultProps} type="faceToFace" /></td>
                                <td><ProductPathwayButton {...defaultProps} type="productGuide" /></td>
                                <td><ProductPathwayButton {...defaultProps} type="trainingVideo" /></td>
                            </tr>
                    </Table>
                    <div className="cta">
                        <a href={`/product/plan/${UserStore.get('participantId')}`}>view full Product Training Plan</a>
                    </div>
            </div>
        );
    }
});

module.exports = ProductPathwayView;