{"size": 2023, "ext": "js", "max_stars_repo_path": "src/components/app/NotificationSnackbar.js", "max_stars_repo_name": "bruqui/grocery-list", "max_stars_repo_stars_event_min_datetime": "2020-07-21T23:34:16.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-21T23:34:16.000Z", "max_issues_repo_path": "src/components/app/NotificationSnackbar.js", "max_issues_repo_name": "bruqui/grocery-list", "max_issues_repo_issues_event_min_datetime": "2020-10-08T20:34:15.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-27T00:25:41.000Z", "max_forks_repo_path": "src/components/app/NotificationSnackbar.js", "max_forks_repo_name": "behivetech/grocery-list", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 11, "max_forks_count": null, "avg_line_length": 29.3188405797, "max_line_length": 90, "alphanum_fraction": 0.574888779}
import React, {useMemo, useState} from 'react';
import PropTypes from 'prop-types';
import Snackbar from 'components/core/Snackbar';

import getClassName from 'tools/getClassName';
import {isDev} from 'tools/envFunctions';

import IconButton from 'components/core/IconButton';

import './NotificationSnackbar.scss';

export default function NotificationSnackbar({
    className,
    notification,
    removeNotification,
}) {
    const {devMessage, message, messageKey, ttl} = useMemo(() => notification || {}, [
        notification,
    ]);
    const [showDevPanel, setShowDevPanel] = useState(false);
    const [rootClassName, getChildClass] = getClassName({
        className,
        rootClass: 'notification-snackbar',
    });

    function handleClose(event) {
        removeNotification(messageKey);
    }

    function handleToggleDevPanel() {
        setShowDevPanel(!showDevPanel);
    }

    return (
        <Snackbar
            open={!!message}
            onClose={handleClose}
            message={
                <div className={rootClassName}>
                    {message}
                    {isDev() && devMessage && showDevPanel && (
                        <code className={getChildClass('development-message')}>
                            {devMessage}
                        </code>
                    )}
                </div>
            }
            action={
                <React.Fragment>
                    {isDev() && <IconButton icon="code" onClick={handleToggleDevPanel} />}
                    <IconButton onClick={handleClose} icon="close" />
                </React.Fragment>
            }
            timeout={ttl || 10000}
        />
    );
}

NotificationSnackbar.propTypes = {
    className: PropTypes.string,
    notification: PropTypes.shape({
        message: PropTypes.node.isRequired,
        messageKey: PropTypes.string.isRequired,
        ttl: PropTypes.number.isRequired,
        type: PropTypes.string,
    }),
    removeNotification: PropTypes.func.isRequired,
};
