lbry-desktop/ui/component/headerNotificationButton/view.jsx
2022-04-29 17:12:48 -04:00

37 lines
1.2 KiB
JavaScript

// @flow
import { useHistory } from 'react-router';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import Button from 'component/button';
import Icon from 'component/common/icon';
import NotificationBubble from 'component/notificationBubble';
import React from 'react';
import Tooltip from 'component/common/tooltip';
type Props = {
unseenCount: number,
unseenLocalCount: number,
doLbryioSeeAllNotifications: () => void,
doLocalSeeAllNotifications: () => void,
};
export default function NotificationHeaderButton(props: Props) {
const { unseenCount, unseenLocalCount, doLbryioSeeAllNotifications, doLocalSeeAllNotifications } = props;
const { push } = useHistory();
function handleMenuClick() {
if (unseenCount > 0) doLbryioSeeAllNotifications();
if (unseenLocalCount > 0) doLocalSeeAllNotifications();
push(`/$/${PAGES.NOTIFICATIONS}`);
}
return (
<Tooltip title={__('Notifications')}>
<Button onClick={handleMenuClick} className="header__navigationItem--icon">
<Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
<NotificationBubble />
</Button>
</Tooltip>
);
}