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, 20 insertions, 3 deletions

diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js
index aa82dbbb9..9430b2050 100644
--- a/app/javascript/mastodon/features/notifications/index.js
+++ b/app/javascript/mastodon/features/notifications/index.js
@@ -9,6 +9,7 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import NotificationContainer from './containers/notification_container';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnSettingsContainer from './containers/column_settings_container';
+import FilterBarContainer from './containers/filter_bar_container';
 import { createSelector } from 'reselect';
 import { List as ImmutableList } from 'immutable';
 import { debounce } from 'lodash';
@@ -20,11 +21,22 @@ const messages = defineMessages({
 });
 
 const getNotifications = createSelector([
+  state => state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
+  state => state.getIn(['settings', 'notifications', 'quickFilter', 'active']),
   state => ImmutableList(state.getIn(['settings', 'notifications', 'shows']).filter(item => !item).keys()),
   state => state.getIn(['notifications', 'items']),
-], (excludedTypes, notifications) => notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type'))));
+], (showFilterBar, allowedType, excludedTypes, notifications) => {
+  if (!showFilterBar || allowedType === 'all') {
+    // used if user changed the notification settings after loading the notifications from the server
+    // otherwise a list of notifications will come pre-filtered from the backend
+    // we need to turn it off for FilterBar in order not to block ourselves from seeing a specific category
+    return notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type')));
+  }
+  return notifications.filter(item => item !== null && allowedType === item.get('type'));
+});
 
 const mapStateToProps = state => ({
+  showFilterBar: state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
   notifications: getNotifications(state),
   isLoading: state.getIn(['notifications', 'isLoading'], true),
   isUnread: state.getIn(['notifications', 'unread']) > 0,
@@ -38,6 +50,7 @@ class Notifications extends React.PureComponent {
   static propTypes = {
     columnId: PropTypes.string,
     notifications: ImmutablePropTypes.list.isRequired,
+    showFilterBar: PropTypes.bool.isRequired,
     dispatch: PropTypes.func.isRequired,
     shouldUpdateScroll: PropTypes.func,
     intl: PropTypes.object.isRequired,
@@ -117,12 +130,16 @@ class Notifications extends React.PureComponent {
   }
 
   render () {
-    const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore } = this.props;
+    const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, showFilterBar } = this.props;
     const pinned = !!columnId;
     const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
 
     let scrollableContent = null;
 
+    const filterBarContainer = showFilterBar
+      ? (<FilterBarContainer />)
+      : null;
+
     if (isLoading && this.scrollableContent) {
       scrollableContent = this.scrollableContent;
     } else if (notifications.size > 0 || hasMore) {
@@ -179,7 +196,7 @@ class Notifications extends React.PureComponent {
         >
           <ColumnSettingsContainer />
         </ColumnHeader>
-
+        {filterBarContainer}
         {scrollContainer}
       </Column>
     );