// @flow import * as NOTIFICATIONS from 'constants/notifications'; import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; import React from 'react'; import classnames from 'classnames'; import Icon from 'component/common/icon'; import DateTime from 'component/dateTime'; import Button from 'component/button'; 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'; import FileThumbnail from 'component/fileThumbnail'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import NotificationContentChannelMenu from 'component/notificationContentChannelMenu'; type Props = { notification: WebNotification, menuButton: boolean, children: any, doReadNotifications: ([number]) => void, doDeleteNotification: (number) => void, }; export default function Notification(props: Props) { const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props; const { push } = useHistory(); const { notification_rule, notification_parameters, is_read, id } = notification; const isCommentNotification = notification_rule === NOTIFICATIONS.NOTIFICATION_COMMENT || notification_rule === NOTIFICATIONS.NOTIFICATION_REPLY; 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(); if (isCommentNotification && notification_parameters.dynamic.hash) { urlParams.append('lc', notification_parameters.dynamic.hash); } try { const { isChannel } = parseURI(notificationTarget); if (isChannel) { urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE); } } catch (e) {} notificationLink += `?${urlParams.toString()}`; let icon; switch (notification_rule) { case NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER: icon = ; break; case NOTIFICATIONS.NOTIFICATION_COMMENT: icon = ; break; case NOTIFICATIONS.NOTIFICATION_REPLY: icon = ; break; case NOTIFICATIONS.NEW_CONTENT: icon = ; break; case NOTIFICATIONS.NEW_LIVESTREAM: icon = ; break; case NOTIFICATIONS.DAILY_WATCH_AVAILABLE: case NOTIFICATIONS.DAILY_WATCH_REMIND: icon = ; break; default: icon = ; } function handleNotificationClick() { if (!is_read) { doReadNotifications([id]); } if (notificationLink) { push(notificationLink); } } function handleReadNotification(e) { e.stopPropagation(); doReadNotifications([id]); } const Wrapper = menuButton ? (props: { children: any }) => ( {props.children} ) : notificationLink ? (props: { children: any }) => ( {props.children} ) : (props: { children: any }) => ( {props.children} ); return (
{icon}
{!isCommentNotification && (
{notification_parameters.device.title}
)} {isCommentNotification && commentText ? ( <>
{notification_parameters.device.title}
{commentText}
) : ( <>
{notification_parameters.device.text}
)}
{notification_rule === NOTIFICATIONS.NEW_CONTENT && ( )} {notification_rule === NOTIFICATIONS.NEW_LIVESTREAM && ( )}
{!is_read &&
e.stopPropagation()}> doDeleteNotification(id)}> {__('Delete')} {notification_rule === NOTIFICATIONS.NEW_CONTENT && channelUrl ? ( ) : null}
); }