{"size": 1420, "ext": "js", "max_stars_repo_path": "src/components/screens/Queue/QueueSearchResult.js", "max_stars_repo_name": "DefaultSimon/Soundcube-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/screens/Queue/QueueSearchResult.js", "max_issues_repo_name": "DefaultSimon/Soundcube-frontend", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/screens/Queue/QueueSearchResult.js", "max_forks_repo_name": "DefaultSimon/Soundcube-frontend", "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": 30.2127659574, "max_line_length": 124, "alphanum_fraction": 0.6147887324}
import React, {Component} from 'react';

// Material-UI
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';

import QueueSearchElementOverlay from './QueueSearchResultOverlay';

class QueueSearchResult extends Component {
    constructor(props) {
        super(props);

        this.state = {
            overlayIsOpen: false
        }
    }

    /**
     * Processes a click and opens/closes the "Add to queue" overlay
     * @param e
     */
    handleElementClick = (e) => {
        // Always triggers if the overlay is not open
        // It only closes if the button is not the thing that was clicked
        if (e.target === this || e.target.classList.contains("overlay") || !this.state.overlayIsOpen) {
            this.setState({overlayIsOpen: !this.state.overlayIsOpen});
        }
    };

    closeSelf = () => {
        this.setState({overlayIsOpen: false})
    };

    render() {
        const {item} = this.props;

        return (
            <TableRow onClick={this.handleElementClick}>
                <TableCell><img src={item.thumbnails.default.url} alt={`${item.title}-thumbnail`}/></TableCell>
                <TableCell>{item.title}</TableCell>
                <QueueSearchElementOverlay itemInfo={item} isVisible={this.state.overlayIsOpen} closeSelf={this.closeSelf}/>
            </TableRow>
        );
    }
}

export default QueueSearchResult;