<commit_before>var React = require('react');

var Row = require('react-bootstrap/lib/Row');
var Button = require('react-bootstrap/lib/Button');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Glyphicon = require('react-bootstrap/lib/Glyphicon');

var MiddlePanelStore = require('../stores/MiddlePanelStore');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
var RightPanelActions = require('../actions/RightPanelActions');

var JarrTime = require('./time.react');

var TableLine = React.createClass({
    propTypes: {article_id: React.PropTypes.number.isRequired,
                feed_title: React.PropTypes.string.isRequired,
                icon_url: React.PropTypes.string,
                title: React.PropTypes.string.isRequired,
                rel_date: React.PropTypes.string.isRequired,
                date: React.PropTypes.string.isRequired,
                read: React.PropTypes.bool.isRequired,
                selected: React.PropTypes.bool.isRequired,
                liked: React.PropTypes.bool.isRequired,
    },
    getInitialState: function() {
        return {read: this.props.read, liked: this.props.liked,
                selected: false};
    },
    render: function() {
        var liked = this.state.liked ? 'l' : '';
        var icon = null;
        if(this.props.icon_url){
            icon = (<img width="16px" src={this.props.icon_url} />);
        } else {
            icon = <Glyphicon glyph="ban-circle" />;
        }
        var title = (<a href={'/article/redirect/' + this.props.article_id}
                        onClick={this.openRedirectLink} target="_blank"
                        title={this.props.feed_title}>
                        {icon} {this.props.feed_title}
                     </a>);
        var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
                               onClick={this.toogleRead} />);
        var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                onClick={this.toogleLike} />);
        icon = <Glyphicon glyph={"new-window"} />;
        var clsses = "list-group-item";
        if(this.props.selected) {
            clsses += " active";
        }
        return (<div className={clsses} onClick={this.loadArticle} title={this.props.title}>
                    <h5><strong>{title}</strong></h5>
                    <JarrTime text={this.props.date}
                              stamp={this.props.rel_date} />
                    <div>{read} {liked} {this.props.title}</div>
                </div>
        );
    },
    openRedirectLink: function(evnt) {
        if(!this.state.read) {
            this.toogleRead(evnt);
        }
    },
    toogleRead: function(evnt) {
        this.setState({read: !this.state.read}, function() {
            MiddlePanelActions.changeRead(this.props.category_id,
                    this.props.feed_id, this.props.article_id, this.state.read);
        }.bind(this));
        evnt.stopPropagation();
    },
    toogleLike: function(evnt) {
        this.setState({liked: !this.state.liked}, function() {
            MiddlePanelActions.changeLike(this.props.category_id,
                    this.props.feed_id, this.props.article_id, this.state.liked);
        }.bind(this));
        evnt.stopPropagation();<commit_msg>make feed title less proeminent (close #37)<commit_after>var React = require('react');

var Row = require('react-bootstrap/lib/Row');
var Button = require('react-bootstrap/lib/Button');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Glyphicon = require('react-bootstrap/lib/Glyphicon');

var MiddlePanelStore = require('../stores/MiddlePanelStore');
var MiddlePanelActions = require('../actions/MiddlePanelActions');
var RightPanelActions = require('../actions/RightPanelActions');

var JarrTime = require('./time.react');

var TableLine = React.createClass({
    propTypes: {article_id: React.PropTypes.number.isRequired,
                feed_title: React.PropTypes.string.isRequired,
                icon_url: React.PropTypes.string,
                title: React.PropTypes.string.isRequired,
                rel_date: React.PropTypes.string.isRequired,
                date: React.PropTypes.string.isRequired,
                read: React.PropTypes.bool.isRequired,
                selected: React.PropTypes.bool.isRequired,
                liked: React.PropTypes.bool.isRequired,
    },
    getInitialState: function() {
        return {read: this.props.read, liked: this.props.liked,
                selected: false};
    },
    render: function() {
        var liked = this.state.liked ? 'l' : '';
        var icon = null;
        if(this.props.icon_url){
            icon = (<img width="16px" src={this.props.icon_url} />);
        } else {
            icon = <Glyphicon glyph="ban-circle" />;
        }
        var title = (<a href={'/article/redirect/' + this.props.article_id}
                        onClick={this.openRedirectLink} target="_blank"
                        title={this.props.feed_title}>
                        {icon} {this.props.feed_title}
                     </a>);
        var read = (<Glyphicon glyph={this.state.read?"check":"unchecked"}
                               onClick={this.toogleRead} />);
        var liked = (<Glyphicon glyph={this.state.liked?"star":"star-empty"}
                                onClick={this.toogleLike} />);
        icon = <Glyphicon glyph={"new-window"} />;
        var clsses = "list-group-item";
        if(this.props.selected) {
            clsses += " active";
        }
        return (<div className={clsses} onClick={this.loadArticle} title={this.props.title}>
                    <span>{title}</span>
                    <JarrTime text={this.props.date}
                              stamp={this.props.rel_date} />
                    <div>{read} {liked} {this.props.title}</div>
                </div>
        );
    },
    openRedirectLink: function(evnt) {
        if(!this.state.read) {
            this.toogleRead(evnt);
        }
    },
    toogleRead: function(evnt) {
        this.setState({read: !this.state.read}, function() {
            MiddlePanelActions.changeRead(this.props.category_id,
                    this.props.feed_id, this.props.article_id, this.state.read);
        }.bind(this));
        evnt.stopPropagation();
    },
    toogleLike: function(evnt) {
        this.setState({liked: !this.state.liked}, function() {
            MiddlePanelActions.changeLike(this.props.category_id,
                    this.props.feed_id, this.props.article_id, this.state.liked);
        }.bind(this));
        evnt.stopPropagation();
{'fraction_non_alphanumeric': 0.14214876033057852, 'fraction_numerical': 0.0012021036814425245, 'mean_word_length': 2.0644567219152856, 'pattern_counts': {'":': 4, '<': 33, '<?xml version=': 0, '>': 33, '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': '4111629', 'n_tokens_mistral': 1939, 'n_tokens_neox': 1868, 'n_words': 295}