Notification bell shows is_read, not is_seen
## Issue Closes 5664: notification bell shows is_read, not is_seen
This commit is contained in:
parent
ddc5a65c49
commit
b467873f0b
4 changed files with 20 additions and 20 deletions
|
@ -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),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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),
|
||||||
});
|
});
|
||||||
|
|
|
@ -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 : (
|
||||||
|
|
Loading…
Reference in a new issue