// @flow import * as PAGES from 'constants/pages'; import * as ICONS from 'constants/icons'; import { RULE } from 'constants/notifications'; 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'; import LbcMessage from 'component/common/lbc-message'; import UriIndicator from 'component/uriIndicator'; import { NavLink } from 'react-router-dom'; import CommentReactions from 'component/commentReactions'; import CommentCreate from 'component/commentCreate'; import CommentsReplies from 'component/commentsReplies'; 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 [isReplying, setReplying] = React.useState(false); const [quickReply, setQuickReply] = React.useState(); const isCommentNotification = notification_rule === RULE.COMMENT || notification_rule === RULE.COMMENT_REPLY || notification_rule === RULE.CREATOR_COMMENT; const commentText = isCommentNotification && notification_parameters.dynamic.comment; let notificationTarget; switch (notification_rule) { case RULE.DAILY_WATCH_AVAILABLE: case RULE.DAILY_WATCH_REMIND: notificationTarget = `/$/${PAGES.CHANNELS_FOLLOWING}`; break; case RULE.MISSED_OUT: case RULE.REWARDS_APPROVAL_PROMPT: notificationTarget = `/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`; break; default: notificationTarget = notification_parameters.device.target; } const creatorIcon = (channelUrl) => { return ( ); }; let channelUrl; let icon; switch (notification_rule) { case RULE.CREATOR_SUBSCRIBER: icon = ; break; case RULE.COMMENT: case RULE.CREATOR_COMMENT: channelUrl = notification_parameters.dynamic.comment_author; icon = creatorIcon(channelUrl); break; case RULE.COMMENT_REPLY: channelUrl = notification_parameters.dynamic.reply_author; icon = creatorIcon(channelUrl); break; case RULE.NEW_CONTENT: channelUrl = notification_parameters.dynamic.channel_url; icon = creatorIcon(channelUrl); break; case RULE.NEW_LIVESTREAM: channelUrl = notification_parameters.dynamic.channel_url; icon = creatorIcon(channelUrl); break; case RULE.DAILY_WATCH_AVAILABLE: case RULE.DAILY_WATCH_REMIND: case RULE.MISSED_OUT: case RULE.REWARDS_APPROVAL_PROMPT: icon = ; break; case RULE.FIAT_TIP: icon = ; break; default: icon = ; } let notificationLink = formatLbryUrlForWeb(notificationTarget); let urlParams = new URLSearchParams(); if (isCommentNotification && notification_parameters.dynamic.hash) { urlParams.append('lc', notification_parameters.dynamic.hash); } let channelName = channelUrl && '@' + channelUrl.split('@')[1].split('#')[0]; const notificationTitle = notification_parameters.device.title; const titleSplit = notificationTitle.split(' '); let fullTitle = [' ']; let uriIndicator; const title = titleSplit.map((message, index) => { if (channelName === message) { uriIndicator = ; fullTitle.push(' '); const resultTitle = fullTitle; fullTitle = [' ']; return [resultTitle.join(' '), uriIndicator]; } else { fullTitle.push(message); if (index === titleSplit.length - 1) { const result = fullTitle.join(' '); return {result}; } } }); try { const { isChannel } = parseURI(notificationTarget); if (isChannel) { urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE); } } catch (e) {} notificationLink += `?${urlParams.toString()}`; const navLinkProps = { to: notificationLink, onClick: (e) => e.stopPropagation(), }; function handleNotificationClick() { if (!is_read) { doReadNotifications([id]); } if (menuButton && notificationLink) { push(notificationLink); } } const Wrapper = menuButton ? (props: { children: any }) => ( {props.children} ) : notificationLink ? (props: { children: any }) => ( {props.children} ) : (props: { children: any }) => ( {props.children} ); return (
{icon}
{!isCommentNotification &&
{title}
} {isCommentNotification && commentText ? ( <>
{title}
{commentText}
) : ( <>
{notification_parameters.device.text}
)}
{notification_rule === RULE.NEW_CONTENT && ( )} {notification_rule === RULE.NEW_LIVESTREAM && ( )}
{!is_read && (
{ e.preventDefault(); e.stopPropagation(); }} > doDeleteNotification(id)}> {__('Delete')} {notification_rule === RULE.NEW_CONTENT && channelUrl ? ( ) : null}
{isCommentNotification && (
{isReplying && ( setReplying(false)} onCancelReplying={() => setReplying(false)} setQuickReply={setQuickReply} supportDisabled shouldFetchComment /> )} {quickReply && ( )}
)}
); }