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,7 +70,33 @@ export default function NotificationsPage(props: Props) {
       )}
       {!fetching && (
         <>
-          {notifications && notifications.length > 0 ? (
+          <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={
@@ -56,18 +116,24 @@ export default function NotificationsPage(props: Props) {
               )
             }
             body={
+              <>
+                {filteredNotifications && filteredNotifications.length > 0 ? (
                   <div className="notification_list">
-                  {notifications.map((notification, index) => {
+                    {filteredNotifications.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>}
+                      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="/" />
@@ -77,6 +143,9 @@ export default function NotificationsPage(props: Props) {
                   </div>
                 )}
               </>
+            }
+          />
+        </>
       )}
     </Page>
   );