<commit_before>var React = require('react'),
    _ = require('underscore'),
    Summernote = require('../../components/Summernote'),
    Config = require('../../data').Config,
    ContentEditable = require('../../components/ContentEditable');

// TODO: Once ReactJS has the ability to perform inline hover styles, we can get rid of the awkward mouseout/mouseover handlers
var Task = React.createClass({
    render: function () {
        var task = this.props.task,
            isEditing = task.editing,
            shouldColor = this.state.hover || isEditing,
            style = shouldColor ? {borderColor: this.state.color} : {},
            self = this,
            className = 'task';
        if (isEditing) className += ' task-editing';
        return (
            <div className={className}
                onMouseOver={self.onMouseOver}
                onMouseOut={self.onMouseOut}
                onClick={this.onClick}
                style={style}>
            {isEditing ? <ContentEditable ref="title" className="title" onChange={this.onTitleChange} text={task.title}>
            </ContentEditable> : <span>{task.title}</span>}
                {task.asana ? <img className="tag-asana tag" src="img/asana-minimal.png"/> : ''}
                <div className="buttons">
                    <div>
                        <i className="fa fa-check-circle-o done" ref="completeButton" title="Complete"></i>
                        <i className="fa fa-times-circle-o cancel" ref="cancelButton" title="Hide"></i>
                    </div>
                </div>
                {this.renderEditing()}
            </div>
        )
    },
    onTitleChange: function (title) {
        if (this.props.onChange) {
            this.props.onChange(this, {title: title});
        }
    },
    renderEditing: function () {
        var comp,
            self = this,
            isEditing = this.props.task.editing;
        if (isEditing) {
            var summernoteProps = {
                airMode: true
            };
            comp = (
                <div className="task-content" ref="description">
                    <Summernote summernoteProps={summernoteProps}
                        ref="summernote"
                        onChange={self.onDescriptionChange}
                        innerHTML={self.props.task.description}></Summernote>
                </div>
            );
        }
        else {
            comp = '';
        }
        return comp;
    },
    componentDidMount: function () {
        Config.get().then(function (config) {
            this.setState({
                color: config.colours.primary
            });
            this.cancelListen = config.colours.listen(function () {
                this.setState({
                    color: config.colours.primary
                });
            }.bind(this))
        }.bind(this)).catch(function (err) {
            console.error('Error getting config for task', err);
        });
    },
    onDescriptionChange: function (html) {
        if (this.props.onChange) {
            this.props.onChange(this, {description: html});
        }
    },
    componentWillUnmount: function () {
        this.cancelListen();
    },
    onClick: function (e) {
        e.preventDefault();
        var task = this.props.task,
            target = e.target;
        switch (target) {
            case this.refs.cancelButton.getDOMNode():
                task.remove();
                break;
            case this.refs.completeButton.getDOMNode():
                task.completed = true;
                break;
            default:
                var $target = $(e.nativeEvent.target);
                if (this.props.task.editing) {
                    if ($target.hasClass('description')) {
                        // If the user clicks in the padding around the description summernote, we want to start editing.
                        this.refs.summernote.focus();
                    }
                    else if ($target.hasClass('task')) {
                        task.editing = false;
                    }
                }
                else {
                    task.editing = true;
                }<commit_msg>fixed task editing<commit_after>var React = require('react'),
    _ = require('underscore'),
    Summernote = require('../../components/Summernote'),
    Config = require('../../data').Config,
    ContentEditable = require('../../components/ContentEditable');

// TODO: Once ReactJS has the ability to perform inline hover styles, we can get rid of the awkward mouseout/mouseover handlers
var Task = React.createClass({
    render: function () {
        var task = this.props.task,
            isEditing = task.editing,
            shouldColor = this.state.hover || isEditing,
            style = shouldColor ? {borderColor: this.state.color} : {},
            self = this,
            className = 'task';
        if (isEditing) className += ' task-editing';
        return (
            <div className={className}
                onMouseOver={self.onMouseOver}
                onMouseOut={self.onMouseOut}
                onClick={this.onClick}
                style={style}>
            {isEditing ? <ContentEditable ref="title" className="title" onChange={this.onTitleChange} text={task.title}>
            </ContentEditable> : <span>{task.title}</span>}
                {task.asana ? <img className="tag-asana tag" src="img/asana-minimal.png"/> : ''}
                <div className="buttons">
                    <div>
                        <i className="fa fa-check-circle-o done" ref="completeButton" title="Complete"></i>
                        <i className="fa fa-times-circle-o cancel" ref="cancelButton" title="Hide"></i>
                    </div>
                </div>
                {this.renderEditing()}
            </div>
        )
    },
    onTitleChange: function (title) {
        this.props.task.title = title;
    },
    onDescriptionChange: function (html) {
        this.props.task.description = html;
    },
    renderEditing: function () {
        var comp,
            self = this,
            isEditing = this.props.task.editing;
        if (isEditing) {
            var summernoteProps = {
                airMode: true
            };
            comp = (
                <div className="task-content" ref="description">
                    <Summernote summernoteProps={summernoteProps}
                        ref="summernote"
                        onChange={self.onDescriptionChange}
                        innerHTML={self.props.task.description}></Summernote>
                </div>
            );
        }
        else {
            comp = '';
        }
        return comp;
    },
    componentDidMount: function () {
        Config.get().then(function (config) {
            this.setState({
                color: config.colours.primary
            });
            this.cancelListen = config.colours.listen(function () {
                this.setState({
                    color: config.colours.primary
                });
            }.bind(this))
        }.bind(this)).catch(function (err) {
            console.error('Error getting config for task', err);
        });
    },
    componentWillUnmount: function () {
        this.cancelListen();
    },
    onClick: function (e) {
        e.preventDefault();
        var task = this.props.task,
            target = e.target;
        switch (target) {
            case this.refs.cancelButton.getDOMNode():
                task.remove();
                break;
            case this.refs.completeButton.getDOMNode():
                task.completed = true;
                break;
            default:
                var $target = $(e.nativeEvent.target);
                if (this.props.task.editing) {
                    if ($target.hasClass('description')) {
                        // If the user clicks in the padding around the description summernote, we want to start editing.
                        this.refs.summernote.focus();
                    }
                    else if ($target.hasClass('task')) {
                        task.editing = false;
                    }
                }
                else {
                    task.editing = true;
                }
{'fraction_non_alphanumeric': 0.12138798210615404, 'fraction_numerical': 0.0, 'mean_word_length': 1.4365243004418262, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3491166', 'n_tokens_mistral': 2129, 'n_tokens_neox': 2029, 'n_words': 426}