LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Allow to react/reply to comments from notifications

Browse source
This commit is contained in:
saltrafael 2021-07-27 14:01:52 -03:00
parent 08cca491fe
commit ec6a2c315b
No known key found for this signature in database
GPG key ID: 9C7F1DC0B0F54515
2 changed files with 99 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
ui/component/notification/view.jsx
View file

@ -9,6 +9,7 @@ import DateTime from 'component/dateTime';
import Button from 'component/button'; import Button from 'component/button';
import ChannelThumbnail from 'component/channelThumbnail'; import ChannelThumbnail from 'component/channelThumbnail';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view'; import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
import FileThumbnail from 'component/fileThumbnail'; import FileThumbnail from 'component/fileThumbnail';
@ -17,6 +18,8 @@ import NotificationContentChannelMenu from 'component/notificationContentChannel
import LbcMessage from 'component/common/lbc-message'; import LbcMessage from 'component/common/lbc-message';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import UriIndicator from 'component/uriIndicator'; import UriIndicator from 'component/uriIndicator';
import CommentReactions from 'component/commentReactions';
// import CommentCreate from 'component/commentCreate';
type Props = { type Props = {
notification: WebNotification, notification: WebNotification,
@ -28,7 +31,9 @@ type Props = {
export default function Notification(props: Props) { export default function Notification(props: Props) {
const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props; const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
const { push } = useHistory();
const { notification_rule, notification_parameters, is_read, id } = notification; const { notification_rule, notification_parameters, is_read, id } = notification;
const [isReplying, setReplying] = React.useState(false);
const isCommentNotification = const isCommentNotification =
notification_rule === RULE.COMMENT || notification_rule === RULE.COMMENT ||
notification_rule === RULE.COMMENT_REPLY || notification_rule === RULE.COMMENT_REPLY ||
@ -127,6 +132,10 @@ export default function Notification(props: Props) {
if (!is_read) { if (!is_read) {
doReadNotifications([id]); doReadNotifications([id]);
} }
if (notificationLink) {
push(notificationLink);
}
} }
function handleReadNotification(e) { function handleReadNotification(e) {
@ -134,6 +143,10 @@ export default function Notification(props: Props) {
doReadNotifications([id]); doReadNotifications([id]);
} }
function handleCommentReply() {
setReplying(!isReplying);
}
const Wrapper = menuButton const Wrapper = menuButton
? (props: { children: any }) => ( ? (props: { children: any }) => (
<MenuItem className="menu__link--notification" onSelect={handleNotificationClick}> <MenuItem className="menu__link--notification" onSelect={handleNotificationClick}>
@ -156,18 +169,20 @@ export default function Notification(props: Props) {
); );
return ( return (
<NavLink {...navLinkProps}> <Wrapper>
<Wrapper> <div
<div className={classnames('notification__wrapper', {
className={classnames('notification__wrapper', { 'notification__wrapper--unread': !is_read,
'notification__wrapper--unread': !is_read, })}
})} >
> <NavLink {...navLinkProps}>
<div className="notification__icon">{icon}</div> <div className="notification__icon">{icon}</div>
</NavLink>
<div className="notification__content-wrapper"> <div className="notification__content-wrapper">
<div className="notification__content"> <div className="notification__content">
<div className="notification__text-wrapper"> <div className="notification__text-wrapper">
<NavLink {...navLinkProps}>
{!isCommentNotification && ( {!isCommentNotification && (
<div className="notification__title">{title}</div> <div className="notification__title">{title}</div>
)} )}
@ -189,50 +204,74 @@ export default function Notification(props: Props) {
</div> </div>
</> </>
)} )}
</div> </NavLink>
{notification_rule === RULE.NEW_CONTENT && ( {isCommentNotification && (
<FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" /> <div className="notification__reactions">
)} <Button
{notification_rule === RULE.NEW_LIVESTREAM && ( label={__('Reply')}
<FileThumbnail className="comment__action"
thumbnail={notification_parameters.device.image_url} onClick={handleCommentReply}
className="notification__content-thumbnail" icon={ICONS.REPLY}
/> />
<CommentReactions uri={notificationTarget} commentId={notification_parameters.dynamic.hash} />
{/* figure out a better flow for this */}
{/* isReplying && (
<CommentCreate
isReply
uri={notificationTarget}
parentId={notification_parameters.dynamic.hash}
onDoneReplying={() => {
setReplying(false);
}}
onCancelReplying={() => {
setReplying(false);
}}
/>
) */}
</div>
)} )}
</div> </div>
<div className="notification__extra"> {notification_rule === RULE.NEW_CONTENT && (
{!is_read && <Button className="notification__mark-seen" onClick={handleReadNotification} />} <FileThumbnail uri={notification_parameters.device.target} className="notification__content-thumbnail" />
<div className="notification__time"> )}
<DateTime timeAgo date={notification.active_at} /> {notification_rule === RULE.NEW_LIVESTREAM && (
</div> <FileThumbnail
</div> thumbnail={notification_parameters.device.image_url}
className="notification__content-thumbnail"
/>
)}
</div> </div>
<div className="notification__menu"> <div className="notification__extra">
<Menu> {!is_read && <Button className="notification__mark-seen" onClick={handleReadNotification} />}
<MenuButton <div className="notification__time">
className={'menu__button notification__menu-button'} <DateTime timeAgo date={notification.active_at} />
onClick={(e) => { </div>
e.preventDefault();
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 === RULE.NEW_CONTENT && channelUrl ? (
<NotificationContentChannelMenu uri={channelUrl} />
) : null}
</MenuList>
</Menu>
</div> </div>
</div> </div>
</Wrapper>
</NavLink> <div className="notification__menu">
<Menu>
<MenuButton onClick={(e) => {
e.preventDefault();
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 === RULE.NEW_CONTENT && channelUrl ? (
<NotificationContentChannelMenu uri={channelUrl} />
) : null}
</MenuList>
</Menu>
</div>
</div>
</Wrapper>
); );
} }

13
ui/scss/component/_notification.scss
View file

@ -162,6 +162,19 @@ $contentMaxWidth: 60rem;
} }
} }
.notification__reactions {
display: flex;
margin-top: var(--spacing-s);
> *:not(:last-of-type) {
margin-right: var(--spacing-m);
}
.button__label {
margin-left: var(--spacing-xs);
}
}
.notification__bubble { .notification__bubble {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;