Add filtering on notifications page - 5193

## Issue
Closes 5193: Add filtering on notifications page

## Approach
- Add a combo box, and simply filter out the notifications based on the combo box value.
- Selection state is persistent, but reset to All if there are unread ones when entering the page.
- Tell the user that "no notifications" could be due to the filter.

static/app-strings.json

@@ -1323,6 +1323,10 @@
   "Sync YouTube Channel": "Sync YouTube Channel",
   "Terms": "Terms",
   "Privacy Policy": "Privacy Policy",
+  "Comment replies": "Comment replies",
+  "Daily watch availability": "Daily watch availability",
+  "Daily watch reminders": "Daily watch reminders",
+  "New content": "New content",
   "No notifications": "No notifications",
   "You don't have any notifications yet, but they will be here when you do!": "You don't have any notifications yet, but they will be here when you do!",
   "I like this": "I like this",

ui/page/notifications/view.jsx

@@ -4,9 +4,13 @@ import React from 'react';
 import Page from 'component/page';
 import Card from 'component/common/card';
 import Spinner from 'component/spinner';
+import { FormField } from 'component/common/form';
 import Notification from 'component/notification';
 import Button from 'component/button';
+import usePersistedState from 'effects/use-persisted-state';
 import Yrbl from 'component/yrbl';
+import * as NOTIFICATIONS from 'constants/notifications';
+import classnames from 'classnames';
 
 type Props = {
   notifications: Array<Notification>,
@@ -17,9 +21,39 @@ type Props = {
   doReadNotifications: () => void,
 };
 
+const ALL_NOTIFICATIONS = 'all';
+
 export default function NotificationsPage(props: Props) {
   const { notifications, fetching, unreadCount, unseenCount, doSeeAllNotifications, doReadNotifications } = props;
   const hasNotifications = notifications.length > 0;
+  const [filterBy, setFilterBy] = usePersistedState('notifications--filter-by', 'all');
+  const [filteredNotifications, setFilteredNotifications] = React.useState(notifications);
+  const isFiltered = filterBy !== ALL_NOTIFICATIONS;
+
+  const NOTIFICATION_FILTER_TYPES = [
+    ALL_NOTIFICATIONS,
+    NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER,
+    NOTIFICATIONS.NOTIFICATION_COMMENT,
+    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);
+    }
+  }, []);
+
+  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) {
@@ -36,46 +70,81 @@ export default function NotificationsPage(props: Props) {
       )}
       {!fetching && (
         <>
-          {notifications && notifications.length > 0 ? (
-            <Card
-              isBodyList
-              title={
-                <span>
-                  {__('Notifications')}
-                  {fetching && <Spinner type="small" />}
-                </span>
-              }
-              titleActions={
-                unreadCount > 0 && (
-                  <Button
-                    icon={ICONS.EYE}
-                    onClick={doReadNotifications}
-                    button="secondary"
-                    label={__('Mark all as read')}
-                  />
-                )
-              }
-              body={
-                <div className="notification_list">
-                  {notifications.map((notification, index) => {
-                    return <Notification key={notification.id} notification={notification} />;
-                  })}
-                </div>
-              }
-            />
-          ) : (
-            <div className="main--empty">
-              <Yrbl
-                title={__('No notifications')}
-                subtitle={<p>{__("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 className="section__header--actions">
+            <div className={'claim-search__input-container'}>
+              <FormField
+                className={classnames('claim-search__dropdown', {
+                  'claim-search__dropdown--selected': filterBy,
+                })}
+                label={__('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>
+          <Card
+            isBodyList
+            title={
+              <span>
+                {__('Notifications')}
+                {fetching && <Spinner type="small" />}
+              </span>
+            }
+            titleActions={
+              unreadCount > 0 && (
+                <Button
+                  icon={ICONS.EYE}
+                  onClick={doReadNotifications}
+                  button="secondary"
+                  label={__('Mark all as read')}
+                />
+              )
+            }
+            body={
+              <>
+                {filteredNotifications && filteredNotifications.length > 0 ? (
+                  <div className="notification_list">
+                    {filteredNotifications.map((notification, index) => {
+                      return <Notification key={notification.id} notification={notification} />;
+                    })}
+                  </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>