<commit_before>import React, { Component, PropTypes } from 'react';
import {Icon} from 'react-material-icons-blue';

import moment from 'moment';

const { object, func } = PropTypes;

class PipelineResult extends Component {
    constructor(props) {
        super(props);

        this.handleAuthorsClick = this.handleAuthorsClick.bind(this);
    }
    handleAuthorsClick() {
        if (this.props.onAuthorsClick) {
            this.props.onAuthorsClick();
        }
    }

    render() {
        const {
            data: {
                id,
                name,
                organization,
                pipeline,
                changeSet,
                result,
                durationInMillis,
                endTime,
                commitId,

            },
        } = this.props;

        let
            duration = moment.duration(
                Number(durationInMillis), 'milliseconds').humanize();
        const authors = [...new Set(changeSet.map(change => change.author.fullName))];

        return (<div className="result">
            <section className="left">
                { result === 'SUCCESS' && <Icon {...{
                    size: 125,
                    icon: 'done',
                    style: { fill: "#fff" },
                }} />}
                { result === 'FAILURE' &&  <Icon {...{
                    size: 125,
                    icon: 'close',
                    style: { fill: "#fff" },
                }} />}
            </section>
            <section className="table">
                <h4>{organization} / {name} #{id}</h4>

                <div className="row">
                    <div className="commons">
                        <div>Branch&nbsp;
                            <span className="value">{decodeURIComponent(pipeline)}</span>
                        </div>
                        <div>Commit&nbsp;
                            <span className="value">
                                #{commitId && commitId.substring(0, 8) || '-'}
                            </span>
                        </div>
                        <div>
                           {
                               authors.length > 0 ? <a className="authors" onClick={this.handleAuthorsClick}>Changes by {authors.map(
                                 author => ' ' + author)}</a> : 'No changes'
                            }
                        </div>
                    </div>
                    <div className="times">
                        <div>
                            <Icon {...{
                                size: 15,
                                icon: 'timelapse',
                                style: { fill: "#fff" },
                            }} />
                            <span>{duration}</span>
                        </div>
                        <div>
                            <Icon {...{
                                size: 15,
                                icon: 'access_time',
                                style: { fill: "#fff" },
                            }} />
                            {moment(endTime).fromNow()}
                        </div>
                    </div>
                </div>
            </section>
        </div>);
    }
}

PipelineResult.propTypes = {
    data: object.isRequired,
    colors: object,
    onAuthorsClick: func,
};

export { PipelineResult };
<commit_msg>[UX-76] use method binding via fat arrow<commit_after>import React, { Component, PropTypes } from 'react';
import {Icon} from 'react-material-icons-blue';

import moment from 'moment';

const { object, func } = PropTypes;

class PipelineResult extends Component {
    handleAuthorsClick() {
        if (this.props.onAuthorsClick) {
            this.props.onAuthorsClick();
        }
    }

    render() {
        const {
            data: {
                id,
                name,
                organization,
                pipeline,
                changeSet,
                result,
                durationInMillis,
                endTime,
                commitId,

            },
        } = this.props;

        let
            duration = moment.duration(
                Number(durationInMillis), 'milliseconds').humanize();
        const authors = [...new Set(changeSet.map(change => change.author.fullName))];

        return (<div className="result">
            <section className="left">
                { result === 'SUCCESS' && <Icon {...{
                    size: 125,
                    icon: 'done',
                    style: { fill: "#fff" },
                }} />}
                { result === 'FAILURE' &&  <Icon {...{
                    size: 125,
                    icon: 'close',
                    style: { fill: "#fff" },
                }} />}
            </section>
            <section className="table">
                <h4>{organization} / {name} #{id}</h4>

                <div className="row">
                    <div className="commons">
                        <div>Branch&nbsp;
                            <span className="value">{decodeURIComponent(pipeline)}</span>
                        </div>
                        <div>Commit&nbsp;
                            <span className="value">
                                #{commitId && commitId.substring(0, 8) || '-'}
                            </span>
                        </div>
                        <div>
                           {
                               authors.length > 0 ?
                                   <a className="authors" onClick={() => this.handleAuthorsClick()}>
                                        Changes by {authors.map(
                                        author => ' ' + author)}
                                   </a>
                                   : 'No changes'
                            }
                        </div>
                    </div>
                    <div className="times">
                        <div>
                            <Icon {...{
                                size: 15,
                                icon: 'timelapse',
                                style: { fill: "#fff" },
                            }} />
                            <span>{duration}</span>
                        </div>
                        <div>
                            <Icon {...{
                                size: 15,
                                icon: 'access_time',
                                style: { fill: "#fff" },
                            }} />
                            {moment(endTime).fromNow()}
                        </div>
                    </div>
                </div>
            </section>
        </div>);
    }
}

PipelineResult.propTypes = {
    data: object.isRequired,
    colors: object,
    onAuthorsClick: func,
};

export { PipelineResult };

{'fraction_non_alphanumeric': 0.11806667637210656, 'fraction_numerical': 0.004658611151550444, 'mean_word_length': 0.8324886636436383, 'pattern_counts': {'":': 0, '<': 75, '<?xml version=': 0, '>': 82, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6599650', 'n_tokens_mistral': 1644, 'n_tokens_neox': 1524, 'n_words': 307}