// @flow import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; import React from 'react'; import Icon from 'component/common/icon'; import NotificationBubble from 'component/notificationBubble'; import Button from 'component/button'; import { useHistory } from 'react-router'; type Props = { unreadCount: number, doReadNotifications: () => void, user: ?User, }; export default function NotificationHeaderButton(props: Props) { const { unreadCount, // notifications, // fetching, doReadNotifications, user, } = props; const notificationsEnabled = user && user.experimental_ui; const { push } = useHistory(); function handleMenuClick() { if (unreadCount > 0) { doReadNotifications(); } push(`/$/${PAGES.NOTIFICATIONS}`); } if (!notificationsEnabled) { return null; } return ( <Button onClick={handleMenuClick} aria-label={__('Notifications')} title={__('Notifications')} className="header__navigation-item menu__title header__navigation-item--icon" > <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden /> <NotificationBubble /> </Button> ); }