<commit_before>import React from 'react';

const Navigation = (props) => (
    <div className="menu">
        <nav>
            <a href={(process.env.NODE_ENV === 'development' ? '/' : '/touhou-test-jsx')}>Touhou-test-jsx</a>
            <button type="button" className="reload" onClick={props.reset}>↻</button>
        </nav>
    </div>
);

Navigation.propTypes = {
    reset: React.PropTypes.func.isRequired,
};

const NextButton = (props) => (
    <div className="navigation">
        <button type="button" className={props.color} id="next" onClick={() => props.changeStep('next')}>
           {props.children}
        </button>
    </div>
);

NextButton.propTypes = {
    color: React.PropTypes.string.isRequired,
    changeStep: React.PropTypes.func.isRequired,
    children: React.PropTypes.node,
};

const PrevButton = (props) => (
    <div className="navigation">
        <button type="button" className={props.color} id="prev" onClick={() => props.changeStep('prev')}>
            {props.children}
        </button>
    </div>
);

PrevButton.propTypes = {
    color: React.PropTypes.string.isRequired,
    changeStep: React.PropTypes.func.isRequired,
    children: React.PropTypes.node,
};

const CharacterButtons = (props) => {
    let buttons = props.buttons.map((btn, i) =>
        <button type="button" key={i} className={btn.color} id={`option${i + 1}`} onClick={props.checkAnswer}>
            {btn.name}
        </button>
    );
    return (<div className="buttons">{buttons}</div>);
};

CharacterButtons.propTypes = {
    buttons: React.PropTypes.arrayOf(React.PropTypes.shape({
        name: React.PropTypes.string,
        color: React.PropTypes.string,
    })).isRequired,
    checkAnswer: React.PropTypes.func.isRequired,
};

const TopButtons = (props) => {
    let topButtons = props.data.map((topbtn, i) =>
        <div key={i} className={topbtn} id={`step${i + 1}`}>
            &nbsp;
        </div>
    );
    return (
        <div className="topbuttons" id="mytopbuttons">
            {topButtons}
        </div>
    );
};

TopButtons.propTypes = {
    data: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
};

export { NextButton, PrevButton, CharacterButtons, TopButtons, Navigation };<commit_msg>props destructuring<commit_after>import React from 'react';

const Navigation = ({ reset }) => (
    <div className="menu">
        <nav>
            <a href={(process.env.NODE_ENV === 'development' ? '/' : '/touhou-test-jsx')}>Touhou-test-jsx</a>
            <button type="button" className="reload" onClick={reset}>↻</button>
        </nav>
    </div>
);

Navigation.propTypes = {
    reset: React.PropTypes.func.isRequired,
};

const NextButton = ({ color, changeStep, children }) => (
    <div className="navigation">
        <button type="button" className={color} id="next" onClick={() => changeStep('next')}>
           {children}
        </button>
    </div>
);

NextButton.propTypes = {
    color: React.PropTypes.string.isRequired,
    changeStep: React.PropTypes.func.isRequired,
    children: React.PropTypes.node,
};

const PrevButton = ({ color, changeStep, children }) => (
    <div className="navigation">
        <button type="button" className={color} id="prev" onClick={() => changeStep('prev')}>
            {children}
        </button>
    </div>
);

PrevButton.propTypes = {
    color: React.PropTypes.string.isRequired,
    changeStep: React.PropTypes.func.isRequired,
    children: React.PropTypes.node,
};

const CharacterButtons = ({ buttons, checkAnswer }) => {
    let charButtons = buttons.map((btn, i) =>
        <button type="button" key={i} className={btn.color} id={`option${i + 1}`} onClick={checkAnswer}>
            {btn.name}
        </button>
    );
    return (<div className="buttons">{charButtons}</div>);
};

CharacterButtons.propTypes = {
    buttons: React.PropTypes.arrayOf(React.PropTypes.shape({
        name: React.PropTypes.string,
        color: React.PropTypes.string,
    })).isRequired,
    checkAnswer: React.PropTypes.func.isRequired,
};

const TopButtons = ({ data }) => {
    let topButtons = data.map((topbtn, i) =>
        <div key={i} className={topbtn} id={`step${i + 1}`}>
            &nbsp;
        </div>
    );
    return (
        <div className="topbuttons" id="mytopbuttons">
            {topButtons}
        </div>
    );
};

TopButtons.propTypes = {
    data: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
};

export { NextButton, PrevButton, CharacterButtons, TopButtons, Navigation };
{'fraction_non_alphanumeric': 0.1714729370008873, 'fraction_numerical': 0.0008873114463176575, 'mean_word_length': 3.0585058505850586, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 69, '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': '2960693', 'n_tokens_mistral': 1411, 'n_tokens_neox': 1429, 'n_words': 252}