swap seen & read notification behavior

ui/component/notification/index.js

@@ -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);

ui/component/notification/view.jsx

@@ -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) {
+    if (!is_read) {
-      doSeeNotifications([id]);
+      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>

ui/component/notificationHeaderButton/index.js

@@ -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);

ui/component/notificationHeaderButton/view.jsx

@@ -8,25 +8,25 @@ import Button from 'component/button';
 import { useHistory } from 'react-router';
 
 type Props = {
-  unreadCount: number,
+  unseenCount: number,
-  doReadNotifications: () => void,
+  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) {
+    if (unseenCount > 0) {
-      doReadNotifications();
+      doSeeAllNotifications();
     }
 
     push(`/$/${PAGES.NOTIFICATIONS}`);

ui/page/notifications/view.jsx

@@ -22,10 +22,10 @@ export default function NotificationsPage(props: Props) {
   const hasNotifications = notifications.length > 0;
 
   React.useEffect(() => {
-    if (unreadCount > 0) {
+    if (unseenCount > 0) {
-      doReadNotifications();
+      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')}
                   />

ui/scss/component/_notification.scss

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