<commit_before>import React from 'react';
import ActionCreators from '../actions/action-creators';
import ListenerMixin from 'alt/mixins/ListenerMixin'
import mixin from 'react-mixin';
import SettingsStore from '../stores/settings-store';

function getStateFromStores(key) {
    return {isSelected: SettingsStore.getState().selectedSetting === key};
}

export default class MenuItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isSelected: props.isSelected};
        this.selectItem = this.selectItem.bind(this);
    }
    selectItem(e) {
        console.log('select ' +this.props.page);
        this.setState({isSelected:true});
        ActionCreators.settingSelected(this.props.setting);
    }
    componentDidMount () { 
        this.listenTo(SettingsStore, this._onChange.bind(this));
    } 
    _onChange () {

        this.setState(getStateFromStores(this.props.setting._id));
    }
    selectItem () {

    }
    render() {
        let selected = this.props.isSelected ;
        if (this.state && this.state.isSelected) {
            selected = true;
        }
        
        let selectedClass = selected ? 'page-item page-item-unread' : 'page-item bucket-of-nope'
        let iconClass = 'pages-'+ this.props.setting.name.toLowerCase();
        return (
        <li className="menu-item">
            <a href="#" onClick={this.selectItem} className="menu-link">
                <span className={iconClass} >   </span>
                {this.props.setting.name}<commit_msg>base the class on the type of item<commit_after>import React from 'react';
import ActionCreators from '../actions/action-creators';
import ListenerMixin from 'alt/mixins/ListenerMixin'
import mixin from 'react-mixin';
import SettingsStore from '../stores/settings-store';

function getStateFromStores(key) {
    return {isSelected: SettingsStore.getState().selectedSetting === key};
}

export default class MenuItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isSelected: props.isSelected};
        this.selectItem = this.selectItem.bind(this);
    }
    selectItem(e) {
        console.log('select ' +this.props.page);
        this.setState({isSelected: true});
        ActionCreators.settingSelected(this.props.setting);
    }
    componentDidMount () { 
        this.listenTo(SettingsStore, this._onChange.bind(this));
    } 
    _onChange () {

        this.setState(getStateFromStores(this.props.setting._id));
    }
    selectItem () {

    }
    render() {
        let selected = this.props.isSelected ;
        if (this.state && this.state.isSelected) {
            selected = true;
        }
        
        let menuItem = selected ? 'menu-item menu-item-selected' : 'menu-item'
        let iconClass = 'pages-'+ this.props.setting.name.toLowerCase();
        return (
        <li className={menuItem}>
            <a href="#" onClick={this.selectItem} className="menu-link">
                <span className={iconClass} >   </span>
                {this.props.setting.name}
{'fraction_non_alphanumeric': 0.13017944535073409, 'fraction_numerical': 0.0, 'mean_word_length': 2.698431845597105, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, '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': '6174496', 'n_tokens_mistral': 884, 'n_tokens_neox': 874, 'n_words': 168}