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

187 lines
6.4 KiB
React
Raw Normal View History

2020-07-23 16:22:57 +02:00
// @flow
import * as NOTIFICATIONS from 'constants/notifications';
import * as PAGES from 'constants/pages';
2020-07-23 16:22:57 +02:00
import * as ICONS from 'constants/icons';
import React from 'react';
2020-08-21 21:44:54 +02:00
import classnames from 'classnames';
2020-07-23 16:22:57 +02:00
import Icon from 'component/common/icon';
import DateTime from 'component/dateTime';
import Button from 'component/button';
2020-07-23 16:22:57 +02:00
import ChannelThumbnail from 'component/channelThumbnail';
import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
import { parseURI } from 'lbry-redux';
import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
2020-11-02 17:51:08 +01:00
import FileThumbnail from 'component/fileThumbnail';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
2020-07-23 16:22:57 +02:00
type Props = {
notification: WebNotification,
menuButton: boolean,
children: any,
2020-12-14 19:52:17 +01:00
doReadNotifications: ([number]) => void,
doDeleteNotification: (number) => void,
2020-07-23 16:22:57 +02:00
};
export default function Notification(props: Props) {
2020-12-14 19:52:17 +01:00
const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
2020-07-23 16:22:57 +02:00
const { push } = useHistory();
2020-12-14 19:52:17 +01:00
const { notification_rule, notification_parameters, is_read, id } = notification;
const isCommentNotification =
notification_rule === NOTIFICATIONS.NOTIFICATION_COMMENT || notification_rule === NOTIFICATIONS.NOTIFICATION_REPLY;
2020-09-08 22:56:48 +02:00
const commentText = isCommentNotification && notification_parameters.dynamic.comment;
const channelUrl =
(notification_rule === NOTIFICATIONS.NEW_CONTENT && notification.notification_parameters.dynamic.channel_url) || '';
let notificationTarget;
switch (notification_rule) {
case NOTIFICATIONS.DAILY_WATCH_AVAILABLE:
case NOTIFICATIONS.DAILY_WATCH_REMIND:
notificationTarget = `/$/${PAGES.CHANNELS_FOLLOWING}`;
break;
default:
notificationTarget = notification_parameters.device.target;
}
let notificationLink = formatLbryUrlForWeb(notificationTarget);
let urlParams = new URLSearchParams();
2020-09-08 22:56:48 +02:00
if (isCommentNotification && notification_parameters.dynamic.hash) {
urlParams.append('lc', notification_parameters.dynamic.hash);
}
2020-07-23 16:22:57 +02:00
try {
const { isChannel } = parseURI(notificationTarget);
if (isChannel) {
urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
}
} catch (e) {}
notificationLink += `?${urlParams.toString()}`;
2020-07-23 16:22:57 +02:00
let icon;
2020-08-21 21:44:54 +02:00
switch (notification_rule) {
case NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER:
2020-11-13 18:58:31 +01:00
icon = <Icon icon={ICONS.SUBSCRIBE} sectionIcon />;
2020-07-23 16:22:57 +02:00
break;
case NOTIFICATIONS.NOTIFICATION_COMMENT:
2020-08-21 21:44:54 +02:00
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.comment_author} />;
2020-07-23 16:22:57 +02:00
break;
case NOTIFICATIONS.NOTIFICATION_REPLY:
2020-09-08 22:56:48 +02:00
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.reply_author} />;
break;
2020-11-02 17:51:08 +01:00
case NOTIFICATIONS.NEW_CONTENT:
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.channel_url} />;
break;
2020-10-22 18:40:09 +02:00
case NOTIFICATIONS.DAILY_WATCH_AVAILABLE:
case NOTIFICATIONS.DAILY_WATCH_REMIND:
2020-11-13 06:36:23 +01:00
icon = <Icon icon={ICONS.LBC} sectionIcon />;
2020-10-22 18:40:09 +02:00
break;
2020-07-23 16:22:57 +02:00
default:
2020-11-13 18:58:31 +01:00
icon = <Icon icon={ICONS.NOTIFICATION} sectionIcon />;
2020-07-23 16:22:57 +02:00
}
2020-08-21 21:44:54 +02:00
function handleNotificationClick() {
2020-12-14 19:52:17 +01:00
if (!is_read) {
doReadNotifications([id]);
2020-08-21 21:44:54 +02:00
}
if (notificationLink) {
push(notificationLink);
}
}
2020-12-14 19:52:17 +01:00
function handleReadNotification(e) {
e.stopPropagation();
2020-12-14 19:52:17 +01:00
doReadNotifications([id]);
}
2020-07-23 16:22:57 +02:00
const Wrapper = menuButton
? (props: { children: any }) => (
2020-08-21 21:44:54 +02:00
<MenuItem className="menu__link--notification" onSelect={handleNotificationClick}>
2020-07-23 16:22:57 +02:00
{props.children}
</MenuItem>
)
2020-08-21 21:44:54 +02:00
: notificationLink
? (props: { children: any }) => (
<a className="menu__link--notification" onClick={handleNotificationClick}>
2020-07-23 16:22:57 +02:00
{props.children}
</a>
2020-08-21 21:44:54 +02:00
)
: (props: { children: any }) => (
<span
2020-12-14 19:52:17 +01:00
className={is_read ? 'menu__link--notification-nolink' : 'menu__link--notification'}
2020-08-21 21:44:54 +02:00
onClick={handleNotificationClick}
>
{props.children}
</span>
2020-07-23 16:22:57 +02:00
);
return (
<Wrapper>
2020-08-21 21:44:54 +02:00
<div
className={classnames('notification__wrapper', {
2020-12-14 19:52:17 +01:00
'notification__wrapper--unread': !is_read,
2020-08-21 21:44:54 +02:00
})}
>
2020-07-23 16:22:57 +02:00
<div className="notification__icon">{icon}</div>
2020-11-03 19:45:36 +01:00
<div className="notification__content-wrapper">
<div className="notification__content">
<div className="notification__text-wrapper">
{!isCommentNotification && (
2020-08-21 21:44:54 +02:00
<div className="notification__title">{notification_parameters.device.title}</div>
2020-11-03 19:45:36 +01:00
)}
{isCommentNotification && commentText ? (
<>
<div className="notification__title">{notification_parameters.device.title}</div>
<div className="notification__text mobile-hidden">{commentText}</div>
</>
) : (
<>
<div className="notification__text">{notification_parameters.device.text}</div>
</>
)}
</div>
{notification_rule === NOTIFICATIONS.NEW_CONTENT && (
2020-08-21 21:44:54 +02:00
<>
2020-11-03 19:45:36 +01:00
<FileThumbnail
uri={notification_parameters.device.target}
className="notification__content-thumbnail"
/>
2020-08-21 21:44:54 +02:00
</>
)}
</div>
<div className="notification__extra">
2020-12-14 19:52:17 +01:00
{!is_read && <Button className="notification__mark-seen" onClick={handleReadNotification} />}
<div className="notification__time">
2020-09-15 15:54:05 +02:00
<DateTime timeAgo date={notification.active_at} />
</div>
2020-07-23 16:22:57 +02:00
</div>
</div>
<div className="notification__menu">
<Menu>
<MenuButton onClick={(e) => e.stopPropagation()}>
<Icon size={18} icon={ICONS.MORE_VERTICAL} />
</MenuButton>
<MenuList className="menu__list">
<MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}>
<Icon aria-hidden icon={ICONS.DELETE} />
{__('Delete')}
</MenuItem>
{notification_rule === NOTIFICATIONS.NEW_CONTENT && channelUrl ? (
<NotificationContentChannelMenu uri={channelUrl} />
) : null}
</MenuList>
</Menu>
</div>
2020-07-23 16:22:57 +02:00
</div>
</Wrapper>
);
}