Add notification quick-filter bar in the frontend app (#9399)

* create FilterBar componer and its container, unstyled

* introduce basic styling for FilterBar

* add selection css

* allow FilterBar to display active CSS with js

* connect the FilterBar to the Redux state

* change getNotifications to use filter

* remove temporary comments

* add an option to turn the FilterBar off in settings

* fix showFilterBar data type to boolean

* fix eslint errors

* add English and Polish translations

* allowed filter bar overflow to accomodate for longer languages

* fix mispelled translation key

* add unified CSS look

* replace text in FilterBar with icons

* add tooltips

* replace text @ with an icon

* introduce simple and advanced filtering view

* add ability to toggle the advanced view

* add Polish translations

* change Advanced View description to be more clear

* make each filter flush notifications and load new ones, fixing pagination

* simplify getNotifications once frontend filtering is not needed for FilterBar

* add a semicolon

* Revert "simplify getNotifications once frontend filtering is not needed for FilterBar"

This reverts commit 9f4be7857135b0327814bd22a3e8a4e7b546f7cc.

* reset filter to 'all' when turning off FilterBar

1 files changed, 23 insertions, 1 deletions

diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index d24f39ad2..4c145febc 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -8,6 +8,7 @@ import {
   importFetchedStatuses,
 } from './importer';
 import { defineMessages } from 'react-intl';
+import { List as ImmutableList } from 'immutable';
 import { unescapeHTML } from '../utils/html';
 import { getFilters, regexFromFilters } from '../selectors';
 
@@ -18,6 +19,8 @@ export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST';
 export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
 export const NOTIFICATIONS_EXPAND_FAIL    = 'NOTIFICATIONS_EXPAND_FAIL';
 
+export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
+
 export const NOTIFICATIONS_CLEAR      = 'NOTIFICATIONS_CLEAR';
 export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
 
@@ -88,10 +91,16 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
 
 const excludeTypesFromSettings = state => state.getIn(['settings', 'notifications', 'shows']).filter(enabled => !enabled).keySeq().toJS();
 
+const excludeTypesFromFilter = filter => {
+  const allTypes = ImmutableList(['follow', 'favourite', 'reblog', 'mention']);
+  return allTypes.filterNot(item => item === filter).toJS();
+};
+
 const noOp = () => {};
 
 export function expandNotifications({ maxId } = {}, done = noOp) {
   return (dispatch, getState) => {
+    const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']);
     const notifications = getState().get('notifications');
     const isLoadingMore = !!maxId;
 
@@ -102,7 +111,9 @@ export function expandNotifications({ maxId } = {}, done = noOp) {
 
     const params = {
       max_id: maxId,
-      exclude_types: excludeTypesFromSettings(getState()),
+      exclude_types: activeFilter === 'all'
+        ? excludeTypesFromSettings(getState())
+        : excludeTypesFromFilter(activeFilter),
     };
 
     if (!maxId && notifications.get('items').size > 0) {
@@ -167,3 +178,14 @@ export function scrollTopNotifications(top) {
     top,
   };
 };
+
+export function setFilter (filterType) {
+  return dispatch => {
+    dispatch({
+      type: NOTIFICATIONS_FILTER_SET,
+      path: ['notifications', 'quickFilter', 'active'],
+      value: filterType,
+    });
+    dispatch(expandNotifications());
+  };
+};