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

52 lines
1.3 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';
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';
2021-07-20 04:02:59 +02:00
import { ENABLE_UI_NOTIFICATIONS } from 'config';
2020-07-23 16:22:57 +02:00
type Props = {
2020-12-14 19:52:17 +01:00
unseenCount: number,
doSeeAllNotifications: () => void,
2020-07-23 16:22:57 +02:00
user: ?User,
};
export default function NotificationHeaderButton(props: Props) {
2020-08-21 17:49:13 +02:00
const {
2020-12-14 19:52:17 +01:00
unseenCount,
2020-08-21 17:49:13 +02:00
// notifications,
// fetching,
2020-12-14 19:52:17 +01:00
doSeeAllNotifications,
2020-08-21 17:49:13 +02:00
user,
} = props;
2021-07-20 04:02:59 +02:00
const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
2020-07-23 16:22:57 +02:00
const { push } = useHistory();
function handleMenuClick() {
2020-12-14 19:52:17 +01:00
if (unseenCount > 0) {
doSeeAllNotifications();
2020-07-23 16:22:57 +02:00
}
push(`/$/${PAGES.NOTIFICATIONS}`);
}
if (!notificationsEnabled) {
return null;
}
return (
<Button
onClick={handleMenuClick}
aria-label={__('Notifications')}
title={__('Notifications')}
2020-12-11 19:33:27 +01:00
className="header__navigation-item menu__title header__navigation-item--icon mobile-hidden"
2020-07-23 16:22:57 +02:00
>
<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>
);
}