Notification bell shows is_read, not is_seen

## Issue
Closes 5664: notification bell shows is_read, not is_seen
This commit is contained in:
infinite-persistence 2021-03-16 09:42:49 +08:00 committed by Sean Yesmunt
parent ddc5a65c49
commit b467873f0b
4 changed files with 20 additions and 20 deletions

View file

@ -1,10 +1,10 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { selectUnreadNotificationCount } from 'redux/selectors/notifications'; import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
import { selectUser } from 'redux/selectors/user'; import { selectUser } from 'redux/selectors/user';
import NotificationBubble from './view'; import NotificationBubble from './view';
const select = state => ({ const select = (state) => ({
unreadCount: selectUnreadNotificationCount(state), unseenCount: selectUnseenNotificationCount(state),
user: selectUser(state), user: selectUser(state),
}); });

View file

@ -3,16 +3,16 @@ import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
type Props = { type Props = {
unreadCount: number, unseenCount: number,
inline: boolean, inline: boolean,
user: ?User, user: ?User,
}; };
export default function NotificationHeaderButton(props: Props) { export default function NotificationHeaderButton(props: Props) {
const { unreadCount, inline = false, user } = props; const { unseenCount, inline = false, user } = props;
const notificationsEnabled = user && user.experimental_ui; const notificationsEnabled = user && user.experimental_ui;
if (unreadCount === 0 || !notificationsEnabled) { if (unseenCount === 0 || !notificationsEnabled) {
return null; return null;
} }
@ -24,10 +24,10 @@ export default function NotificationHeaderButton(props: Props) {
> >
<span <span
className={classnames('notification__count', { className={classnames('notification__count', {
'notification__bubble--small': unreadCount > 9, 'notification__bubble--small': unseenCount > 9,
})} })}
> >
{unreadCount > 20 ? '20+' : unreadCount} {unseenCount > 20 ? '20+' : unseenCount}
</span> </span>
</span> </span>
); );

View file

@ -5,17 +5,17 @@ import { selectFollowedTags } from 'redux/selectors/tags';
import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user'; import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
import { selectHomepageData, selectLanguage } from 'redux/selectors/settings'; import { selectHomepageData, selectLanguage } from 'redux/selectors/settings';
import { doSignOut } from 'redux/actions/app'; import { doSignOut } from 'redux/actions/app';
import { selectUnreadNotificationCount } from 'redux/selectors/notifications'; import { selectUnseenNotificationCount } from 'redux/selectors/notifications';
import SideNavigation from './view'; import SideNavigation from './view';
const select = state => ({ const select = (state) => ({
subscriptions: selectSubscriptions(state), subscriptions: selectSubscriptions(state),
followedTags: selectFollowedTags(state), followedTags: selectFollowedTags(state),
language: selectLanguage(state), // trigger redraw on language change language: selectLanguage(state), // trigger redraw on language change
email: selectUserVerifiedEmail(state), email: selectUserVerifiedEmail(state),
purchaseSuccess: selectPurchaseUriSuccess(state), purchaseSuccess: selectPurchaseUriSuccess(state),
unreadCount: selectUnreadNotificationCount(state), unseenCount: selectUnseenNotificationCount(state),
user: selectUser(state), user: selectUser(state),
homepageData: selectHomepageData(state), homepageData: selectHomepageData(state),
}); });

View file

@ -38,10 +38,10 @@ type Props = {
uploadCount: number, uploadCount: number,
doSignOut: () => void, doSignOut: () => void,
sidebarOpen: boolean, sidebarOpen: boolean,
setSidebarOpen: boolean => void, setSidebarOpen: (boolean) => void,
isMediumScreen: boolean, isMediumScreen: boolean,
isOnFilePage: boolean, isOnFilePage: boolean,
unreadCount: number, unseenCount: number,
purchaseSuccess: boolean, purchaseSuccess: boolean,
doClearPurchasedUriSuccess: () => void, doClearPurchasedUriSuccess: () => void,
user: ?User, user: ?User,
@ -69,7 +69,7 @@ function SideNavigation(props: Props) {
setSidebarOpen, setSidebarOpen,
isMediumScreen, isMediumScreen,
isOnFilePage, isOnFilePage,
unreadCount, unseenCount,
homepageData, homepageData,
user, user,
} = props; } = props;
@ -232,7 +232,7 @@ function SideNavigation(props: Props) {
const isAbsolute = isOnFilePage || isMediumScreen; const isAbsolute = isOnFilePage || isMediumScreen;
const microNavigation = !sidebarOpen || isMediumScreen; const microNavigation = !sidebarOpen || isMediumScreen;
const subLinks = email const subLinks = email
? MOBILE_LINKS.filter(link => { ? MOBILE_LINKS.filter((link) => {
if (!notificationsEnabled && link.icon === ICONS.NOTIFICATION) { if (!notificationsEnabled && link.icon === ICONS.NOTIFICATION) {
return false; return false;
} }
@ -320,7 +320,7 @@ function SideNavigation(props: Props) {
> >
<div> <div>
<ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}> <ul className={classnames('navigation-links', { 'navigation-links--micro': !sidebarOpen })}>
{SIDE_LINKS.map(linkProps => { {SIDE_LINKS.map((linkProps) => {
// $FlowFixMe // $FlowFixMe
const { hideForUnauth, ...passedProps } = linkProps; const { hideForUnauth, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : ( return !email && linkProps.hideForUnauth && IS_WEB ? null : (
@ -334,7 +334,7 @@ function SideNavigation(props: Props) {
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon} icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', { className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary, 'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unreadCount > 0, 'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unseenCount > 0,
})} })}
activeClass="navigation-link--active" activeClass="navigation-link--active"
/> />
@ -386,7 +386,7 @@ function SideNavigation(props: Props) {
> >
<div> <div>
<ul className="navigation-links--absolute"> <ul className="navigation-links--absolute">
{SIDE_LINKS.map(linkProps => { {SIDE_LINKS.map((linkProps) => {
// $FlowFixMe // $FlowFixMe
const { hideForUnauth, link, route, ...passedProps } = linkProps; const { hideForUnauth, link, route, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : ( return !email && linkProps.hideForUnauth && IS_WEB ? null : (
@ -399,7 +399,7 @@ function SideNavigation(props: Props) {
icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon} icon={pulseLibrary && linkProps.icon === ICONS.LIBRARY ? ICONS.PURCHASED : linkProps.icon}
className={classnames('navigation-link', { className={classnames('navigation-link', {
'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary, 'navigation-link--pulse': linkProps.icon === ICONS.LIBRARY && pulseLibrary,
'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unreadCount > 0, 'navigation-link--highlighted': linkProps.icon === ICONS.NOTIFICATION && unseenCount > 0,
})} })}
activeClass="navigation-link--active" activeClass="navigation-link--active"
/> />
@ -409,7 +409,7 @@ function SideNavigation(props: Props) {
})} })}
</ul> </ul>
<ul className="navigation-links--absolute mobile-only"> <ul className="navigation-links--absolute mobile-only">
{subLinks.map(linkProps => { {subLinks.map((linkProps) => {
const { hideForUnauth, ...passedProps } = linkProps; const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : ( return !email && hideForUnauth && IS_WEB ? null : (