{"size": 1176, "ext": "js", "max_stars_repo_path": "src/components/Search.js", "max_stars_repo_name": "osmarpetry/black-spotify", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Search.js", "max_issues_repo_name": "osmarpetry/black-spotify", "max_issues_repo_issues_event_min_datetime": "2019-07-17T00:57:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-18T05:47:15.000Z", "max_forks_repo_path": "src/components/Search.js", "max_forks_repo_name": "osmarpetry/black-spotify", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 11, "max_forks_count": null, "avg_line_length": 23.0588235294, "max_line_length": 78, "alphanum_fraction": 0.5034013605}
import React, { useEffect, useState } from 'react'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { getAlbums } from '../redux/albums/actions'

const Search = props => {
    const [searchText, setSearchText] = useState('')

    const onSearch = event => {
        setSearchText(event.target.value)
    }

    useEffect(() => {
        if(searchText.trim() !== '') {
            props.onSearch(searchText)
        }
    }, [searchText])

    return (
        <div
            style={ {
                display: 'grid',
                gridTemplateColumns: '1fr'
            } }>
            <h3>
                Busque por artistas, álbuns ou músicas
            </h3>
            <input
                placeholder='Comece a escrever...'
                onChange={ onSearch }
            />
            { searchText.length > 0 && (
                <h3>Resultados encontradados para "{ searchText.trim() }"</h3>
            ) }
        </div>
    )
}

const mapDispatchProps = dispatch =>
    bindActionCreators(
        {
            getAlbums
        },
        dispatch
    )

export default connect(
    mapDispatchProps
)(Search)
