LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

swap seen & read notification behavior

Browse source
This commit is contained in:
Sean Yesmunt 2020-12-14 13:52:17 -05:00
parent 8eedefddd3
commit 540a527a61
6 changed files with 28 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/component/notification/index.js
View file

@ -1,8 +1,8 @@
import { connect } from 'react-redux';
import { doSeeNotifications, doDeleteNotification } from 'redux/actions/notifications';
import { doReadNotifications, doDeleteNotification } from 'redux/actions/notifications';
import Notification from './view';
export default connect(null, {
doSeeNotifications,
doReadNotifications,
doDeleteNotification,
})(Notification);

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

@ -21,14 +21,14 @@ type Props = {
notification: WebNotification,
menuButton: boolean,
children: any,
doSeeNotifications: ([number]) => void,
doReadNotifications: ([number]) => void,
doDeleteNotification: number => void,
};
export default function Notification(props: Props) {
const { notification, menuButton = false, doSeeNotifications, doDeleteNotification } = props;
const { notification, menuButton = false, doReadNotifications, doDeleteNotification } = props;
const { push } = useHistory();
const { notification_rule, notification_parameters, is_seen, id } = notification;
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;
@ -83,8 +83,8 @@ export default function Notification(props: Props) {
}
function handleNotificationClick() {
if (!is_seen) {
doSeeNotifications([id]);
if (!is_read) {
doReadNotifications([id]);
}
if (notificationLink) {
@ -92,9 +92,9 @@ export default function Notification(props: Props) {
}
}
function handleSeeNotification(e) {
function handleReadNotification(e) {
e.stopPropagation();
doSeeNotifications([id]);
doReadNotifications([id]);
}
const Wrapper = menuButton
@ -111,7 +111,7 @@ export default function Notification(props: Props) {
)
: (props: { children: any }) => (
<span
className={is_seen ? 'menu__link--notification-nolink' : 'menu__link--notification'}
className={is_read ? 'menu__link--notification-nolink' : 'menu__link--notification'}
onClick={handleNotificationClick}
>
{props.children}
@ -122,7 +122,7 @@ export default function Notification(props: Props) {
<Wrapper>
<div
className={classnames('notification__wrapper', {
'notification__wrapper--unseen': !is_seen,
'notification__wrapper--unread': !is_read,
})}
>
<div className="notification__icon">{icon}</div>
@ -157,7 +157,7 @@ export default function Notification(props: Props) {
</div>
<div className="notification__extra">
{!is_seen && <Button className="notification__mark-seen" onClick={handleSeeNotification} />}
{!is_read && <Button className="notification__mark-seen" onClick={handleReadNotification} />}
<div className="notification__time">
<DateTime timeAgo date={notification.active_at} />
</div>

8
ui/component/notificationHeaderButton/index.js
View file

@ -2,19 +2,19 @@ import { connect } from 'react-redux';
import {
selectNotifications,
selectIsFetchingNotifications,
selectUnreadNotificationCount,
selectUnseenNotificationCount,
} from 'redux/selectors/notifications';
import { doReadNotifications } from 'redux/actions/notifications';
import { doSeeAllNotifications } from 'redux/actions/notifications';
import { selectUser } from 'redux/selectors/user';
import NotificationHeaderButton from './view';
const select = state => ({
notifications: selectNotifications(state),
fetching: selectIsFetchingNotifications(state),
unreadCount: selectUnreadNotificationCount(state),
unseenCount: selectUnseenNotificationCount(state),
user: selectUser(state),
});
export default connect(select, {
doReadNotifications,
doSeeAllNotifications,
})(NotificationHeaderButton);

12
ui/component/notificationHeaderButton/view.jsx
View file

@ -8,25 +8,25 @@ import Button from 'component/button';
import { useHistory } from 'react-router';
type Props = {
unreadCount: number,
doReadNotifications: () => void,
unseenCount: number,
doSeeAllNotifications: () => void,
user: ?User,
};
export default function NotificationHeaderButton(props: Props) {
const {
unreadCount,
unseenCount,
// notifications,
// fetching,
doReadNotifications,
doSeeAllNotifications,
user,
} = props;
const notificationsEnabled = user && user.experimental_ui;
const { push } = useHistory();
function handleMenuClick() {
if (unreadCount > 0) {
doReadNotifications();
if (unseenCount > 0) {
doSeeAllNotifications();
}
push(`/$/${PAGES.NOTIFICATIONS}`);

10
ui/page/notifications/view.jsx
View file

@ -22,10 +22,10 @@ export default function NotificationsPage(props: Props) {
const hasNotifications = notifications.length > 0;
React.useEffect(() => {
if (unreadCount > 0) {
doReadNotifications();
if (unseenCount > 0) {
doSeeAllNotifications();
}
}, [unreadCount, doReadNotifications]);
}, [unseenCount, doSeeAllNotifications]);
return (
<Page>
@ -46,10 +46,10 @@ export default function NotificationsPage(props: Props) {
</span>
}
titleActions={
unseenCount > 0 && (
unreadCount > 0 && (
<Button
icon={ICONS.EYE}
onClick={doSeeAllNotifications}
onClick={doReadNotifications}
button="secondary"
label={__('Mark all as read')}
/>

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

@ -58,7 +58,7 @@ $contentMaxWidth: 35rem;
}
}
.notification__wrapper--unseen {
.notification__wrapper--unread {
background-color: var(--color-card-background-highlighted);
&:hover {