{"size": 1318, "ext": "js", "max_stars_repo_path": "lesson5/movie_list_redux/src/components/Filter.js", "max_stars_repo_name": "HackYourFutureBelgium/React-week5", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "lesson5/movie_list_redux/src/components/Filter.js", "max_issues_repo_name": "HackYourFutureBelgium/React-week5", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "lesson5/movie_list_redux/src/components/Filter.js", "max_forks_repo_name": "HackYourFutureBelgium/React-week5", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.652173913, "max_line_length": 62, "alphanum_fraction": 0.5902883156}
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { filterMovies } from '../redux/appState/actions'
import { FormGroup, ControlLabel } from 'react-bootstrap'
import Select from 'react-select'
import genres from '../data/genrelist.json'

class Filter extends Component {
    handleChange = (newValue) => {
        const filter = {...this.props.filter}
        filter.genres = newValue
        this.props.filterMovies(filter)
    }
    render () {
        const genreOptions = genres.genres.map((genre) => ({
                value: genre.id, 
                label: genre.name
            })
        )
        const genreFilter = this.props.filter.genres

        return (
            <FormGroup controlId="formControlsSelectMultiple">
                <ControlLabel>Genre selector</ControlLabel>
                <Select 
                    options={genreOptions} 
                    isMulti
                    onChange={this.handleChange}
                    value={genreFilter} />
            </FormGroup>
        )
    }
}

const mapStateToProps = state => ({
    filter: state.movieFilter
})

const mapDispatchToProps = dispatch => ({
    filterMovies: (filter) => dispatch (filterMovies(filter))
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Filter)