{"size": 1487, "ext": "js", "max_stars_repo_path": "src/components/formlist.js", "max_stars_repo_name": "josejtudela/RecipeToPDF", "max_stars_repo_stars_event_min_datetime": "2022-02-09T10:30:39.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-09T10:30:39.000Z", "max_issues_repo_path": "src/components/formlist.js", "max_issues_repo_name": "josejtudela/RecipeToPDF", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/formlist.js", "max_forks_repo_name": "josejtudela/RecipeToPDF", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.7954545455, "max_line_length": 176, "alphanum_fraction": 0.5971755212}
import React from 'react';
import List from './list';
import { connect } from 'react-redux';
import { addIngredient } from '../store/actionCreators';

class ListForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            termIgredients: ''
        }
    }
    onChangeList = (event) => {
        this.setState({termIgredients: event.target.value})
    }
    onHandleClickList = (e) => {
        if(e.keyCode === 13 || e.type === 'click'){ 
            this.setState({termIgredients: ''})
            this.props.handleClickList(this.state.termIgredients)
        }
    }
    render(){
        return(
            <div>
                <input type="text" placeholder='Introduce alimento' value={this.state.termIgredients} onChange={this.onChangeList} onKeyUp={(e) => this.onHandleClickList(e)}/>
                <input type="submit" value="+" disabled={!this.state.termIgredients} onClick={(e) => this.onHandleClickList(e)}/>
                <ul><List items={this.props.ingredientsComponent.ingredients}/></ul>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({ingredientsComponent: state.ingredientsComponent});
const mapDispatchToProps = (dispatch) => {
  return {
    handleClickList: (name) => {
        dispatch(addIngredient(name))
    }
  }
}

const ListFormConnected = connect( mapStateToProps, mapDispatchToProps)(ListForm);

export default ListFormConnected;