<commit_before>var React = require('react'),
    ReactDOM = require('react-dom'),
    RomanLegend = require('./RomanLegend'),
    Roman = require('../libraries/Roman'),
    RomanWarning = require('./RomanWarning');

var RomanForm = React.createClass({

    getInitialState() {
        return {
            userInput: '',
            result: '',
            selection: 'roman',
            showWarning: false
        };
    },

    handleSelection: function(event) {
        this.setState({
            userInput: '',
            result: '',
            showWarning: false,
            selection: event.target.value
        });
    },

    /**
     * `handleInput` will handle the users selection
     *  of roman numeral or integer, and give an
     *  output using the `Roman` library limited
     *  to values of 3999
     *
     *  @param  {event} event Used in this
     *  instance to target element values
     */
    handleInput: function(event) {

        if (this.state.selection === 'integer') {
            var reg = new RegExp('^[0-9]+$|^$');

            if (reg.test(event.target.value)
                && event.target.value <= 3999
            ) {
                var result = '';
                if (event.target.value !== '') {
                    var result = Roman.getRomanToInteger(
                        event.target.value
                    );
                }

                this.setState({
                    result,
                    userInput: event.target.value,
                    showWarning: false
                });
            } else {
                this.setState({
                    showWarning: 'integer'
                });
            }
        } else {
            var reg = new RegExp('^[iIvVxXlLcCdDmM]+$|^$');

            if (reg.test(event.target.value)) {
                this.setState({
                    showWarning: false
                });

                var result = '';
                if (event.target.value !== '') {
                    var result = Roman.getIntegerToRoman(
                        event.target.value.toUpperCase()
                    );
                }

                if (result > 3999) {
                    this.setState({
                        showWarning: 'roman'
                    });
                } else {
                    this.setState({
                        result,
                        userInput: event.target.value.toUpperCase()
                    });
                }
            } else {
                this.setState({
                    showWarning: 'roman'
                });
            }
        }
    },

    getInputField: function() {
        return (
            <div className="col-md-6">
                <div className="form-group">
                    <input type="text"
                    placeholder="Give me data!"
                    className="form-control"
                    onChange={this.handleInput}
                    value={this.state.userInput} />
                </div>
            </div>
        );
    },

    getResultField: function() {
        return (
            <div className="col-md-12">
                <div className="form-group"><commit_msg>Add setRomanConversion and setIntegerConversion methods<commit_after>var React = require('react'),
    ReactDOM = require('react-dom'),
    RomanLegend = require('./RomanLegend'),
    Roman = require('../libraries/Roman'),
    RomanWarning = require('./RomanWarning');

var RomanForm = React.createClass({

    getInitialState() {
        return {
            userInput: '',
            result: '',
            selection: 'roman',
            showWarning: false
        };
    },

    handleSelection: function(event) {
        this.setState({
            userInput: '',
            result: '',
            showWarning: false,
            selection: event.target.value
        });
    },

    /**
     * `setIntegerConversion` handles this.state for
     *  converting roman numerals to integers
     *
     *  @param  {event} event Used in this
     *  instance to target element values
     */
    setRomanConversion: function(event) {
        var reg = new RegExp('^[iIvVxXlLcCdDmM]+$|^$');

        if (reg.test(event.target.value)) {
            this.setState({
                showWarning: false
            });

            var result = '';
            if (event.target.value !== '') {
                var result = Roman.getIntegerToRoman(
                    event.target.value.toUpperCase()
                );
            }

            if (result > 3999) {
                this.setState({
                    showWarning: 'roman'
                });
            } else {
                this.setState({
                    result,
                    userInput: event.target.value.toUpperCase()
                });
            }
        } else {
            this.setState({
                showWarning: 'roman'
            });
        }
    },

    /**
     * `setIntegerConversion` handles this.state for
     *  converting integers to roman numerals
     *
     *  @param  {event} event Used in this
     *  instance to target element values
     */
    setIntegerConversion: function(event) {
        var reg = new RegExp('^[0-9]+$|^$');

        if (reg.test(event.target.value)
            && event.target.value <= 3999
        ) {
            var result = '';
            if (event.target.value !== '') {
                var result = Roman.getRomanToInteger(
                    event.target.value
                );
            }

            this.setState({
                result,
                userInput: event.target.value,
                showWarning: false
            });
        } else {
            this.setState({
                showWarning: 'integer'
            });
        }
    },

    /**
     * `handleInput` will handle the users selection
     *  of roman numeral or integer, and give an
     *  output using the `Roman` library limited
     *  to values of 3999
     *
     *  @param  {event} event Used in this
     *  instance to target element values
     */
    handleInput: function(event) {
        if (this.state.selection === 'integer') {
            this.setIntegerConversion(event);
        } else {
            this.setRomanConversion(event);
        }
    },

    getInputField: function() {
        return (
            <div className="col-md-6">
                <div className="form-group">
                    <input type="text"
                    placeholder="Give me data!"
                    className="form-control"
                    onChange={this.handleInput}
                    value={this.state.userInput} />
                </div>
            </div>
        );
    },

    getResultField: function() {
        return (
            <div className="col-md-12">
                <div className="form-group">
{'fraction_non_alphanumeric': 0.11513301351940688, 'fraction_numerical': 0.0049425788632068614, 'mean_word_length': 1.1924792861695348, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, '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': '4125099', 'n_tokens_mistral': 1812, 'n_tokens_neox': 1691, 'n_words': 357}