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,128 +9,136 @@ 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]);
 
+  React.useEffect(() => {
+    if (rule && rule !== '') {
+      // Fetch filtered list when:
+      // (1) 'rule' changed
+      // (2) new "all" notifications received (e.g. from websocket).
+      doNotificationList(rule);
+    }
+  }, [rule, notifications]);
+
+  const notificationListElement = (
+    <>
+      <div className="claim-list__header">
+        <h1 className="card__title">{__('Notifications')}</h1>
+        <div className="claim-list__alt-controls--wrap">
+          {fetching && <Spinner type="small" />}
+
+          {unreadCount > 0 && (
+            <Button icon={ICONS.EYE} onClick={doReadNotifications} button="secondary" label={__('Mark all as read')} />
+          )}
+          <FormField
+            className="notification__filter"
+            type="select"
+            name="filter"
+            value={rule}
+            onChange={(e) => setRule(e.target.value)}
+          >
+            {Object.entries(RULE_LABELS).map((r) => {
+              return (
+                <option key={r[0]} value={r[0]}>
+                  {__(String(r[1]))}
+                </option>
+              );
+            })}
+          </FormField>
+        </div>
+      </div>
+      {list && list.length > 0 ? (
+        <div className="card">
+          <div className="notification_list">
+            {list.map((notification, index) => {
+              return <Notification key={notification.id} notification={notification} />;
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="main--empty">
+          {!fetching && (
+            <Yrbl
+              title={__('No notifications')}
+              subtitle={
+                <p>
+                  {isFiltered
+                    ? __('Try selecting another filter.')
+                    : __("You don't have any notifications yet, but they will be here when you do!")}
+                </p>
+              }
+              actions={
+                <div className="section__actions">
+                  <Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
+                </div>
+              }
+            />
+          )}
+        </div>
+      )}
+    </>
+  );
+
   return (
     <Page>
-      {fetching && !hasNotifications && (
+      {initialFetchDone ? (
+        notificationListElement
+      ) : fetching ? (
         <div className="main--empty">
           <Spinner delayed />
         </div>
-      )}
+      ) : (
-      {!fetching && (
+        notificationListElement
-        <>
-          <div className="claim-list__header">
-            <h1 className="card__title">{__('Notifications')}</h1>
-            <div className="claim-list__alt-controls--wrap">
-              {fetching && <Spinner type="small" />}
-
-              {unreadCount > 0 && (
-                <Button
-                  icon={ICONS.EYE}
-                  onClick={doReadNotifications}
-                  button="secondary"
-                  label={__('Mark all as read')}
-                />
-              )}
-              <FormField
-                className="notification__filter"
-                type="select"
-                name="filter"
-                value={filterBy || ALL_NOTIFICATIONS}
-                onChange={(e) => setFilterBy(e.target.value)}
-              >
-                {NOTIFICATION_FILTER_TYPES.map((type) => (
-                  <option key={type} value={type}>
-                    {/* i18fixme */}
-                    {type === ALL_NOTIFICATIONS && __('All')}
-                    {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 ? (
-            <div className="card">
-              <div className="notification_list">
-                {filteredNotifications.map((notification, index) => {
-                  return <Notification key={notification.id} notification={notification} />;
-                })}
-              </div>
-            </div>
-          ) : (
-            <div className="main--empty">
-              <Yrbl
-                title={__('No notifications')}
-                subtitle={
-                  <p>
-                    {isFiltered
-                      ? __('Try selecting another filter.')
-                      : __("You don't have any notifications yet, but they will be here when you do!")}
-                  </p>
-                }
-                actions={
-                  <div className="section__actions">
-                    <Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
-                  </div>
-                }
-              />
-            </div>
-          )}
-        </>
       )}
     </Page>
   );