{"size": 799, "ext": "js", "max_stars_repo_path": "chromeExtension/src/components/Alert.js", "max_stars_repo_name": "gotdibbs/Dynamics-CRM-Bookmarklets", "max_stars_repo_stars_event_min_datetime": "2016-01-21T18:25:00.000Z", "max_stars_repo_stars_event_max_datetime": "2018-07-02T12:11:54.000Z", "max_issues_repo_path": "chromeExtension/src/components/Alert.js", "max_issues_repo_name": "bonomo1/Dynamics-365-Toolkit", "max_issues_repo_issues_event_min_datetime": "2020-08-23T21:18:35.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-09T22:28:51.000Z", "max_forks_repo_path": "chromeExtension/src/components/Alert.js", "max_forks_repo_name": "bonomo1/Dynamics-365-Toolkit", "max_forks_repo_forks_event_min_datetime": "2016-11-08T00:00:20.000Z", "max_forks_repo_forks_event_max_datetime": "2018-12-04T19:30:07.000Z"}
{"max_stars_count": 10, "max_issues_count": 35, "max_forks_count": 3, "avg_line_length": 22.1944444444, "max_line_length": 99, "alphanum_fraction": 0.549436796}
import React, {
    useContext,
    useEffect,
    useState
} from 'react';

export default function AlertContainer({ data, remove }) {
    const [isHovering, setIsHovering] = useState(false);

    function close() {
        remove(data.id);
    }

    function toggleHover() {
        setIsHovering(prev => !prev);
    }

    useEffect(() => {
        if (isHovering) {
            return;
        }

        let timeout = setTimeout(() => {
            close();
        }, 6000);

        return () => clearTimeout(timeout);
    }, [isHovering]);

    return (
        <div className="gotdibbs-toolbox-alert" onMouseOver={toggleHover} onMouseOut={toggleHover}>
            {data.message}
            <span className="gotdibbs-toolbox-action" onClick={close}>&#10006;</span>
        </div>
    );
}