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

143 lines
4.6 KiB
React
Raw Normal View History

2020-07-23 16:22:57 +02:00
// @flow
import {
NOTIFICATION_CREATOR_SUBSCRIBER,
NOTIFICATION_COMMENT,
NOTIFICATION_REPLY,
DAILY_WATCH_AVAILABLE,
} 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 { MenuItem } from '@reach/menu-button';
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-07-23 16:22:57 +02:00
type Props = {
notification: WebNotification,
menuButton: boolean,
children: any,
2020-08-21 21:44:54 +02:00
doSeeNotifications: ([number]) => void,
2020-07-23 16:22:57 +02:00
};
export default function Notification(props: Props) {
2020-08-21 21:44:54 +02:00
const { notification, menuButton = false, doSeeNotifications } = props;
2020-07-23 16:22:57 +02:00
const { push } = useHistory();
2020-08-21 21:44:54 +02:00
const { notification_rule, notification_parameters, is_seen, id } = notification;
const notificationTarget =
notification && notification_rule === DAILY_WATCH_AVAILABLE
? `/$/${PAGES.CHANNELS_FOLLOWING}`
: notification_parameters.device.target;
2020-09-08 22:56:48 +02:00
const isCommentNotification = notification_rule === NOTIFICATION_COMMENT || notification_rule === NOTIFICATION_REPLY;
const commentText = isCommentNotification && notification_parameters.dynamic.comment;
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) {
2020-07-23 16:22:57 +02:00
case NOTIFICATION_CREATOR_SUBSCRIBER:
icon = <Icon icon={ICONS.SUBSCRIBE} sectionIcon className="notification__icon" />;
break;
case 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;
2020-09-08 22:56:48 +02:00
case NOTIFICATION_REPLY:
icon = <ChannelThumbnail small uri={notification_parameters.dynamic.reply_author} />;
break;
2020-07-23 16:22:57 +02:00
default:
icon = <Icon icon={ICONS.NOTIFICATION} sectionIcon className="notification__icon" />;
}
2020-08-21 21:44:54 +02:00
function handleNotificationClick() {
if (!is_seen) {
doSeeNotifications([id]);
}
if (notificationLink) {
push(notificationLink);
}
}
function handleSeeNotification(e) {
e.stopPropagation();
doSeeNotifications([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
className={is_seen ? 'menu__link--notification-nolink' : 'menu__link--notification'}
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', {
'notification__wrapper--unseen': !is_seen,
})}
>
2020-07-23 16:22:57 +02:00
<div className="notification__icon">{icon}</div>
<div className="notification__content">
<div>
2020-09-08 22:56:48 +02:00
{!isCommentNotification && (
2020-08-21 21:44:54 +02:00
<div className="notification__title">{notification_parameters.device.title}</div>
)}
2020-09-08 22:56:48 +02:00
{isCommentNotification && commentText ? (
2020-08-21 21:44:54 +02:00
<>
<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>
<div className="notification__extra">
<div className="notification__time">
2020-09-15 15:54:05 +02:00
<DateTime timeAgo date={notification.active_at} />
</div>
{!is_seen && <Button className="notification__mark-seen" onClick={handleSeeNotification} />}
2020-07-23 16:22:57 +02:00
</div>
</div>
</div>
</Wrapper>
);
}