Update GUI to use queried notification filter.

- Re-organize the return statement of 'NotificationsPage' a bit, otherwise the entire page will reload (blink) every time the drop-down value is changed due to the 'fetching' flag.

- Retained the original behavior of (only showing a blank page + spinner) on the very first load. I think there is merit in not showing the buttons immediately (e.g. when not logged in and `/$/notifications` is accessed directly).

static/app-strings.json

@@ -1358,8 +1358,8 @@
   "Terms": "Terms",
   "Privacy Policy": "Privacy Policy",
   "Comment replies": "Comment replies",
-  "Daily watch availability": "Daily watch availability",
+  "Replies": "Replies",
-  "Daily watch reminders": "Daily watch reminders",
+  "Others": "Others",
   "New content": "New content",
   "No notifications": "No notifications",
   "Try selecting another filter.": "Try selecting another filter.",

ui/page/notifications/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import {
   selectNotifications,
+  selectNotificationsFiltered,
   selectIsFetchingNotifications,
   selectUnreadNotificationCount,
   selectUnseenNotificationCount,
@@ -8,8 +9,9 @@ import {
 import { doReadNotifications, doNotificationList, doSeeAllNotifications } from 'redux/actions/notifications';
 import NotificationsPage from './view';
 
-const select = state => ({
+const select = (state) => ({
   notifications: selectNotifications(state),
+  notificationsFiltered: selectNotificationsFiltered(state),
   fetching: selectIsFetchingNotifications(state),
   unreadCount: selectUnreadNotificationCount(state),
   unseenCount: selectUnseenNotificationCount(state),

ui/page/notifications/view.jsx

@@ -9,64 +9,68 @@ import Button from 'component/button';
 import usePersistedState from 'effects/use-persisted-state';
 import Yrbl from 'component/yrbl';
 import * as NOTIFICATIONS from 'constants/notifications';
+import useFetched from 'effects/use-fetched';
+
+const RULE_LABELS = {
+  [NOTIFICATIONS.NOTIFICATION_RULE_NONE]: 'All',
+  [NOTIFICATIONS.NOTIFICATION_RULE_COMMENTS]: 'Comments',
+  [NOTIFICATIONS.NOTIFICATION_RULE_REPLIES]: 'Replies',
+  [NOTIFICATIONS.NOTIFICATION_RULE_FOLLOWERS]: 'Followers',
+  [NOTIFICATIONS.NOTIFICATION_RULE_NEW_CONTENT]: 'New content',
+  [NOTIFICATIONS.NOTIFICATION_RULE_OTHERS]: 'Others',
+};
 
 type Props = {
   notifications: Array<Notification>,
+  notificationsFiltered: Array<Notification>,
   fetching: boolean,
   unreadCount: number,
   unseenCount: number,
   doSeeAllNotifications: () => void,
   doReadNotifications: () => void,
+  doNotificationList: (string) => void,
 };
 
-const ALL_NOTIFICATIONS = 'all';
-
 export default function NotificationsPage(props: Props) {
-  const { notifications, fetching, unreadCount, unseenCount, doSeeAllNotifications, doReadNotifications } = props;
+  const {
-  const hasNotifications = notifications.length > 0;
+    notifications,
-  const [filterBy, setFilterBy] = usePersistedState('notifications--filter-by', 'all');
+    notificationsFiltered,
-  const [filteredNotifications, setFilteredNotifications] = React.useState(notifications);
+    fetching,
-  const isFiltered = filterBy !== ALL_NOTIFICATIONS;
+    unreadCount,
+    unseenCount,
+    doSeeAllNotifications,
+    doReadNotifications,
+    doNotificationList,
+  } = props;
 
-  const NOTIFICATION_FILTER_TYPES = [
+  const initialFetchDone = useFetched(fetching);
-    ALL_NOTIFICATIONS,
+  const [rule, setRule] = usePersistedState('notifications--rule', NOTIFICATIONS.NOTIFICATION_RULE_NONE);
-    NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER,
+  const isFiltered = rule !== NOTIFICATIONS.NOTIFICATION_RULE_NONE;
-    NOTIFICATIONS.NOTIFICATION_COMMENT,
+  const list = isFiltered ? notificationsFiltered : notifications;
-    NOTIFICATIONS.NOTIFICATION_REPLY,
-    NOTIFICATIONS.DAILY_WATCH_AVAILABLE,
-    NOTIFICATIONS.DAILY_WATCH_REMIND,
-    NOTIFICATIONS.NEW_CONTENT,
-  ];
 
   React.useEffect(() => {
     if (unseenCount > 0 || unreadCount > 0) {
       // If there are unread notifications when entering the page, reset to All.
-      setFilterBy(ALL_NOTIFICATIONS);
+      setRule(NOTIFICATIONS.NOTIFICATION_RULE_NONE);
     }
   }, []);
 
-  React.useEffect(() => {
-    if (notifications && filterBy !== ALL_NOTIFICATIONS) {
-      setFilteredNotifications(notifications.filter((n) => n.notification_rule === filterBy));
-    } else {
-      setFilteredNotifications(notifications);
-    }
-  }, [notifications, filterBy]);
-
   React.useEffect(() => {
     if (unseenCount > 0) {
       doSeeAllNotifications();
     }
   }, [unseenCount, doSeeAllNotifications]);
 
-  return (
+  React.useEffect(() => {
-    <Page>
+    if (rule && rule !== '') {
-      {fetching && !hasNotifications && (
+      // Fetch filtered list when:
-        <div className="main--empty">
+      // (1) 'rule' changed
-          <Spinner delayed />
+      // (2) new "all" notifications received (e.g. from websocket).
-        </div>
+      doNotificationList(rule);
-      )}
+    }
-      {!fetching && (
+  }, [rule, notifications]);
+
+  const notificationListElement = (
     <>
       <div className="claim-list__header">
         <h1 className="card__title">{__('Notifications')}</h1>
@@ -74,45 +78,36 @@ export default function NotificationsPage(props: Props) {
           {fetching && <Spinner type="small" />}
 
           {unreadCount > 0 && (
-                <Button
+            <Button icon={ICONS.EYE} onClick={doReadNotifications} button="secondary" label={__('Mark all as read')} />
-                  icon={ICONS.EYE}
-                  onClick={doReadNotifications}
-                  button="secondary"
-                  label={__('Mark all as read')}
-                />
           )}
           <FormField
             className="notification__filter"
             type="select"
             name="filter"
-                value={filterBy || ALL_NOTIFICATIONS}
+            value={rule}
-                onChange={(e) => setFilterBy(e.target.value)}
+            onChange={(e) => setRule(e.target.value)}
           >
-                {NOTIFICATION_FILTER_TYPES.map((type) => (
+            {Object.entries(RULE_LABELS).map((r) => {
-                  <option key={type} value={type}>
+              return (
-                    {/* i18fixme */}
+                <option key={r[0]} value={r[0]}>
-                    {type === ALL_NOTIFICATIONS && __('All')}
+                  {__(String(r[1]))}
-                    {type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
-                    {type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
-                    {type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
-                    {type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
-                    {type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
-                    {type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
                 </option>
-                ))}
+              );
+            })}
           </FormField>
         </div>
       </div>
-          {filteredNotifications && filteredNotifications.length > 0 ? (
+      {list && list.length > 0 ? (
         <div className="card">
           <div className="notification_list">
-                {filteredNotifications.map((notification, index) => {
+            {list.map((notification, index) => {
               return <Notification key={notification.id} notification={notification} />;
             })}
           </div>
         </div>
       ) : (
         <div className="main--empty">
+          {!fetching && (
             <Yrbl
               title={__('No notifications')}
               subtitle={
@@ -128,9 +123,22 @@ export default function NotificationsPage(props: Props) {
                 </div>
               }
             />
+          )}
         </div>
       )}
     </>
+  );
+
+  return (
+    <Page>
+      {initialFetchDone ? (
+        notificationListElement
+      ) : fetching ? (
+        <div className="main--empty">
+          <Spinner delayed />
+        </div>
+      ) : (
+        notificationListElement
       )}
     </Page>
   );