<commit_before>import React from 'react'
import {Msg, msg} from 'translate'
import styles from './aoiSelection.module.css'
import PropTypes from 'prop-types'
import {Constraints, ErrorMessage, form, Input} from 'widget/form'
import {RecipeActions} from '../mosaicRecipe'

const inputs = {
    country: new Constraints()
        .notBlank('process.mosaic.panel.areaOfInterest.form.country.required'),
}

const mapStateToProps = () => ({})

class AoiSelection extends React.Component {
    constructor(props) {
        super(props)
        this.recipe = RecipeActions(props.id)
    }
    apply(e, values) {
        e.preventDefault()
        this.recipe.setAoi(values)
    }
    discard(e) {
        e.preventDefault()
    }
    render() {
        const {className, form, inputs: {country}} = this.props
        return (
            <div className={className}>
                <div className={styles.container}>
                    <div>
                        <Msg id={'process.mosaic.panel.areaOfInterest.title'}/>
                    </div>
                    <form>
                        <div>
                            <label><Msg id='process.mosaic.panel.areaOfInterest.form.country.label'/></label>
                            <Input
                                input={country}
                                placeholder={msg('process.mosaic.panel.areaOfInterest.form.country.placeholder')}
                                autoFocus='on'
                                autoComplete='off'
                                tabIndex={1}/>
                            <ErrorMessage input={country}/>
                        </div>
                        <div className={styles.buttons}>
                            <button
                                onClick={(e) => this.apply.bind(this)(e, form.values())}
                                disabled={form.hasInvalid()}
                                tabIndex={2}>
                                <Msg id='button.apply'/>
                            </button>
                            <button onClick={this.discard.bind(this)}>
                                <Msg id='button.discard'/>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}

AoiSelection.propTypes = {
    id: PropTypes.string,
    className: PropTypes.string,
    form: PropTypes.object,
    inputs: PropTypes.shape({
        country: PropTypes.object,
    }),
    action: PropTypes.func,
}

export default form(inputs, mapStateToProps)(AoiSelection)
<commit_msg>Added initial values to AOI form.<commit_after>import PropTypes from 'prop-types'
import React from 'react'
import {Msg, msg} from 'translate'
import {Constraints, ErrorMessage, form, Input} from 'widget/form'
import {RecipeState, RecipeActions} from '../mosaicRecipe'
import styles from './aoiSelection.module.css'

const inputs = {
    country: new Constraints()
        .notBlank('process.mosaic.panel.areaOfInterest.form.country.required'),
}

const mapStateToProps = (state, ownProps) => {
    const recipe = RecipeState(ownProps.id)
    return {
        values: recipe('aoi'),
    }
}

class AoiSelection extends React.Component {
    constructor(props) {
        super(props)
        this.recipe = RecipeActions(props.id)
    }
    apply(e, values) {
        e.preventDefault()
        this.recipe.setAoi(values)
    }
    discard(e) {
        e.preventDefault()
    }
    render() {
        const {className, form, inputs: {country}} = this.props
        return (
            <div className={className}>
                <div className={styles.container}>
                    <div>
                        <Msg id={'process.mosaic.panel.areaOfInterest.title'}/>
                    </div>
                    <form>
                        <div>
                            <label><Msg id='process.mosaic.panel.areaOfInterest.form.country.label'/></label>
                            <Input
                                input={country}
                                placeholder={msg('process.mosaic.panel.areaOfInterest.form.country.placeholder')}
                                autoFocus='on'
                                autoComplete='off'
                                tabIndex={1}/>
                            <ErrorMessage input={country}/>
                        </div>
                        <div className={styles.buttons}>
                            <button
                                onClick={(e) => this.apply.bind(this)(e, form.values())}
                                disabled={form.hasInvalid()}
                                tabIndex={2}>
                                <Msg id='button.apply'/>
                            </button>
                            <button onClick={this.discard.bind(this)}>
                                <Msg id='button.discard'/>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        )
    }
}

AoiSelection.propTypes = {
    id: PropTypes.string,
    className: PropTypes.string,
    form: PropTypes.object,
    inputs: PropTypes.shape({
        country: PropTypes.object,
    }),
    action: PropTypes.func,
}

export default form(inputs, mapStateToProps)(AoiSelection)

{'fraction_non_alphanumeric': 0.11497476163768929, 'fraction_numerical': 0.0007478033277248083, 'mean_word_length': 1.3240660295395308, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 55, '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': '3145281', 'n_tokens_mistral': 1374, 'n_tokens_neox': 1334, 'n_words': 246}