lbry-desktop/ui/component/notificationHeaderButton/view.jsx

93 lines
2.9 KiB
React
Raw Normal View History

2020-07-23 16:22:57 +02:00
// @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import React from 'react';
import Icon from 'component/common/icon';
import Notification from 'component/notification';
2020-08-11 22:32:03 +02:00
import NotificationBubble from 'component/notificationBubble';
2020-07-23 16:22:57 +02:00
import Button from 'component/button';
import { useHistory } from 'react-router';
// import { Menu, MenuList, MenuButton, MenuPopover, MenuItems, MenuItem } from '@reach/menu-button';
type Props = {
unreadCount: number,
fetching: boolean,
notifications: ?Array<Notification>,
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}
disabled={fetching}
aria-label={__('Notifications')}
title={__('Notifications')}
className="header__navigation-item menu__title header__navigation-item--icon"
>
<Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
2020-08-11 22:32:03 +02:00
<NotificationBubble />
2020-07-23 16:22:57 +02:00
</Button>
);
// Below is disabled until scroll style issues are resolved
// return (
// <Menu>
// <MenuButton
// onClick={handleMenuClick}
// disabled={fetching}
// aria-label={__('Notifications')}
// title={__('Notifications')}
// className="header__navigation-item menu__title header__navigation-item--icon"
// >
// <Icon size={18} icon={ICONS.NOTIFICATION} aria-hidden />
// {unreadCount > 0 && <span className="notification__bubble">{unreadCount}</span>}
// </MenuButton>
// {notifications && notifications.length > 0 ? (
// <MenuList className="menu__list--header">
// {notifications.slice(0, 7).map((notification, index) => (
// <Notification menuButton key={notification.id} id={notification.id} notification={notification} />
// ))}
// <MenuItem className="menu__link" onSelect={() => push(`/$/${PAGES.NOTIFICATIONS}`)}>
// <Icon aria-hidden icon={ICONS.NOTIFICATION} />
// {__('View All')}
// </MenuItem>
// </MenuList>
// ) : (
// <MenuPopover>
// <div className="menu__list--header notifications__empty">No notifications yet.</div>
// {/* Below is needed because MenuPopover isn't meant to be used this way */}
// <MenuItems>
// <MenuItem disabled onSelect={() => {}} />
// </MenuItems>
// </MenuPopover>
// )}
// </Menu>
// );
}