Remove old notifications route from web UI (#33038)

app/javascript/mastodon/features/notifications/components/filter_bar.jsx

@@ -1,119 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
-import StarIcon from '@/material-icons/400-24px/star.svg?react';
-import { Icon }  from 'mastodon/components/icon';
-
-const tooltips = defineMessages({
-  mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
-  favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favorites' },
-  boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
-  polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
-  follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
-  statuses: { id: 'notifications.filter.statuses', defaultMessage: 'Updates from people you follow' },
-});
-
-class FilterBar extends PureComponent {
-
-  static propTypes = {
-    selectFilter: PropTypes.func.isRequired,
-    selectedFilter: PropTypes.string.isRequired,
-    advancedMode: PropTypes.bool.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  onClick (notificationType) {
-    return () => this.props.selectFilter(notificationType);
-  }
-
-  render () {
-    const { selectedFilter, advancedMode, intl } = this.props;
-    const renderedElement = !advancedMode ? (
-      <div className='notification__filter-bar'>
-        <button
-          className={selectedFilter === 'all' ? 'active' : ''}
-          onClick={this.onClick('all')}
-        >
-          <FormattedMessage
-            id='notifications.filter.all'
-            defaultMessage='All'
-          />
-        </button>
-        <button
-          className={selectedFilter === 'mention' ? 'active' : ''}
-          onClick={this.onClick('mention')}
-        >
-          <FormattedMessage
-            id='notifications.filter.mentions'
-            defaultMessage='Mentions'
-          />
-        </button>
-      </div>
-    ) : (
-      <div className='notification__filter-bar'>
-        <button
-          className={selectedFilter === 'all' ? 'active' : ''}
-          onClick={this.onClick('all')}
-        >
-          <FormattedMessage
-            id='notifications.filter.all'
-            defaultMessage='All'
-          />
-        </button>
-        <button
-          className={selectedFilter === 'mention' ? 'active' : ''}
-          onClick={this.onClick('mention')}
-          title={intl.formatMessage(tooltips.mentions)}
-        >
-          <Icon id='reply-all' icon={ReplyAllIcon} />
-        </button>
-        <button
-          className={selectedFilter === 'favourite' ? 'active' : ''}
-          onClick={this.onClick('favourite')}
-          title={intl.formatMessage(tooltips.favourites)}
-        >
-          <Icon id='star' icon={StarIcon} />
-        </button>
-        <button
-          className={selectedFilter === 'reblog' ? 'active' : ''}
-          onClick={this.onClick('reblog')}
-          title={intl.formatMessage(tooltips.boosts)}
-        >
-          <Icon id='retweet' icon={RepeatIcon} />
-        </button>
-        <button
-          className={selectedFilter === 'poll' ? 'active' : ''}
-          onClick={this.onClick('poll')}
-          title={intl.formatMessage(tooltips.polls)}
-        >
-          <Icon id='tasks' icon={InsertChartIcon} />
-        </button>
-        <button
-          className={selectedFilter === 'status' ? 'active' : ''}
-          onClick={this.onClick('status')}
-          title={intl.formatMessage(tooltips.statuses)}
-        >
-          <Icon id='home' icon={HomeIcon} />
-        </button>
-        <button
-          className={selectedFilter === 'follow' ? 'active' : ''}
-          onClick={this.onClick('follow')}
-          title={intl.formatMessage(tooltips.follows)}
-        >
-          <Icon id='user-plus' icon={PersonAddIcon} />
-        </button>
-      </div>
-    );
-    return renderedElement;
-  }
-
-}
-
-export default injectIntl(FilterBar);

app/javascript/mastodon/features/notifications/containers/filter_bar_container.js

@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-
-import { setFilter } from '../../../actions/notifications';
-import FilterBar from '../components/filter_bar';
-
-const makeMapStateToProps = state => ({
-  selectedFilter: state.getIn(['settings', 'notifications', 'quickFilter', 'active']),
-  advancedMode: state.getIn(['settings', 'notifications', 'quickFilter', 'advanced']),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  selectFilter (newActiveFilter) {
-    dispatch(setFilter(newActiveFilter));
-  },
-});
-
-export default connect(makeMapStateToProps, mapDispatchToProps)(FilterBar);

app/javascript/mastodon/features/notifications/index.jsx

@@ -1,308 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-
-import { createSelector } from '@reduxjs/toolkit';
-import { List as ImmutableList } from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
-
-import { debounce } from 'lodash';
-
-import DoneAllIcon from '@/material-icons/400-24px/done_all.svg?react';
-import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
-import { compareId } from 'mastodon/compare_id';
-import { Icon }  from 'mastodon/components/icon';
-import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-
-import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
-import { submitMarkers } from '../../actions/markers';
-import {
-  expandNotifications,
-  scrollTopNotifications,
-  loadPending,
-  mountNotifications,
-  unmountNotifications,
-  markNotificationsAsRead,
-} from '../../actions/notifications';
-import Column from '../../components/column';
-import ColumnHeader from '../../components/column_header';
-import { LoadGap } from '../../components/load_gap';
-import ScrollableList from '../../components/scrollable_list';
-
-import {
-  FilteredNotificationsBanner,
-  FilteredNotificationsIconButton,
-} from './components/filtered_notifications_banner';
-import NotificationsPermissionBanner from './components/notifications_permission_banner';
-import ColumnSettingsContainer from './containers/column_settings_container';
-import FilterBarContainer from './containers/filter_bar_container';
-import NotificationContainer from './containers/notification_container';
-
-const messages = defineMessages({
-  title: { id: 'column.notifications', defaultMessage: 'Notifications' },
-  markAsRead : { id: 'notifications.mark_as_read', defaultMessage: 'Mark every notification as read' },
-});
-
-const getExcludedTypes = createSelector([
-  state => state.getIn(['settings', 'notifications', 'shows']),
-], (shows) => {
-  return ImmutableList(shows.filter(item => !item).keys());
-});
-
-const getNotifications = createSelector([
-  state => state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
-  state => state.getIn(['settings', 'notifications', 'quickFilter', 'active']),
-  getExcludedTypes,
-  state => state.getIn(['notifications', 'items']),
-], (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 => ({
-  notifications: getNotifications(state),
-  isLoading: state.getIn(['notifications', 'isLoading'], 0) > 0,
-  isUnread: state.getIn(['notifications', 'unread']) > 0 || state.getIn(['notifications', 'pendingItems']).size > 0,
-  hasMore: state.getIn(['notifications', 'hasMore']),
-  numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size,
-  lastReadId: state.getIn(['settings', 'notifications', 'showUnread']) ? state.getIn(['notifications', 'readMarkerId']) : '0',
-  canMarkAsRead: state.getIn(['settings', 'notifications', 'showUnread']) && state.getIn(['notifications', 'readMarkerId']) !== '0' && getNotifications(state).some(item => item !== null && compareId(item.get('id'), state.getIn(['notifications', 'readMarkerId'])) > 0),
-  needsNotificationPermission: state.getIn(['settings', 'notifications', 'alerts']).includes(true) && state.getIn(['notifications', 'browserSupport']) && state.getIn(['notifications', 'browserPermission']) === 'default' && !state.getIn(['settings', 'notifications', 'dismissPermissionBanner']),
-});
-
-class Notifications extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    columnId: PropTypes.string,
-    notifications: ImmutablePropTypes.list.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    isLoading: PropTypes.bool,
-    isUnread: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    hasMore: PropTypes.bool,
-    numPending: PropTypes.number,
-    lastReadId: PropTypes.string,
-    canMarkAsRead: PropTypes.bool,
-    needsNotificationPermission: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    trackScroll: true,
-  };
-
-  UNSAFE_componentWillMount() {
-    this.props.dispatch(mountNotifications());
-  }
-
-  componentWillUnmount () {
-    this.handleLoadOlder.cancel();
-    this.handleScrollToTop.cancel();
-    this.handleScroll.cancel();
-    this.props.dispatch(scrollTopNotifications(false));
-    this.props.dispatch(unmountNotifications());
-  }
-
-  handleLoadGap = (maxId) => {
-    this.props.dispatch(expandNotifications({ maxId }));
-  };
-
-  handleLoadOlder = debounce(() => {
-    const last = this.props.notifications.last();
-    this.props.dispatch(expandNotifications({ maxId: last && last.get('id') }));
-  }, 300, { leading: true });
-
-  handleLoadPending = () => {
-    this.props.dispatch(loadPending());
-  };
-
-  handleScrollToTop = debounce(() => {
-    this.props.dispatch(scrollTopNotifications(true));
-  }, 100);
-
-  handleScroll = debounce(() => {
-    this.props.dispatch(scrollTopNotifications(false));
-  }, 100);
-
-  handlePin = () => {
-    const { columnId, dispatch } = this.props;
-
-    if (columnId) {
-      dispatch(removeColumn(columnId));
-    } else {
-      dispatch(addColumn('NOTIFICATIONS', {}));
-    }
-  };
-
-  handleMove = (dir) => {
-    const { columnId, dispatch } = this.props;
-    dispatch(moveColumn(columnId, dir));
-  };
-
-  handleHeaderClick = () => {
-    this.column.scrollTop();
-  };
-
-  setColumnRef = c => {
-    this.column = c;
-  };
-
-  handleMoveUp = id => {
-    const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
-    this._selectChild(elementIndex, true);
-  };
-
-  handleMoveDown = id => {
-    const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
-    this._selectChild(elementIndex, false);
-  };
-
-  _selectChild (index, align_top) {
-    const container = this.column.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
-
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
-  }
-
-  handleMarkAsRead = () => {
-    this.props.dispatch(markNotificationsAsRead());
-    this.props.dispatch(submitMarkers({ immediate: true }));
-  };
-
-  render () {
-    const { intl, notifications, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, lastReadId, canMarkAsRead, needsNotificationPermission } = this.props;
-    const pinned = !!columnId;
-    const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. When other people interact with you, you will see it here." />;
-    const { signedIn } = this.props.identity;
-
-    let scrollableContent = null;
-
-    const filterBarContainer = signedIn
-      ? (<FilterBarContainer />)
-      : null;
-
-    if (isLoading && this.scrollableContent) {
-      scrollableContent = this.scrollableContent;
-    } else if (notifications.size > 0 || hasMore) {
-      scrollableContent = notifications.map((item, index) => item === null ? (
-        <LoadGap
-          key={'gap:' + notifications.getIn([index + 1, 'id'])}
-          disabled={isLoading}
-          param={index > 0 ? notifications.getIn([index - 1, 'id']) : null}
-          onClick={this.handleLoadGap}
-        />
-      ) : (
-        <NotificationContainer
-          key={item.get('id')}
-          notification={item}
-          accountId={item.get('account')}
-          onMoveUp={this.handleMoveUp}
-          onMoveDown={this.handleMoveDown}
-          unread={lastReadId !== '0' && compareId(item.get('id'), lastReadId) > 0}
-        />
-      ));
-    } else {
-      scrollableContent = null;
-    }
-
-    this.scrollableContent = scrollableContent;
-
-    let scrollContainer;
-
-    const prepend = (
-      <>
-        {needsNotificationPermission && <NotificationsPermissionBanner />}
-        <FilteredNotificationsBanner />
-      </>
-    );
-
-    if (signedIn) {
-      scrollContainer = (
-        <ScrollableList
-          scrollKey={`notifications-${columnId}`}
-          trackScroll={!pinned}
-          isLoading={isLoading}
-          showLoading={isLoading && notifications.size === 0}
-          hasMore={hasMore}
-          numPending={numPending}
-          prepend={prepend}
-          alwaysPrepend
-          emptyMessage={emptyMessage}
-          onLoadMore={this.handleLoadOlder}
-          onLoadPending={this.handleLoadPending}
-          onScrollToTop={this.handleScrollToTop}
-          onScroll={this.handleScroll}
-          bindToDocument={!multiColumn}
-        >
-          {scrollableContent}
-        </ScrollableList>
-      );
-    } else {
-      scrollContainer = <NotSignedInIndicator />;
-    }
-
-    const extraButton = (
-      <>
-        <FilteredNotificationsIconButton className='column-header__button' />
-        {canMarkAsRead && (
-          <button
-            aria-label={intl.formatMessage(messages.markAsRead)}
-            title={intl.formatMessage(messages.markAsRead)}
-            onClick={this.handleMarkAsRead}
-            className='column-header__button'
-          >
-            <Icon id='done-all' icon={DoneAllIcon} />
-          </button>
-        )}
-      </>
-    );
-
-    return (
-      <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
-        <ColumnHeader
-          icon='bell'
-          iconComponent={NotificationsIcon}
-          active={isUnread}
-          title={intl.formatMessage(messages.title)}
-          onPin={this.handlePin}
-          onMove={this.handleMove}
-          onClick={this.handleHeaderClick}
-          pinned={pinned}
-          multiColumn={multiColumn}
-          extraButton={extraButton}
-        >
-          <ColumnSettingsContainer />
-        </ColumnHeader>
-
-        {filterBarContainer}
-
-        {scrollContainer}
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title)}</title>
-          <meta name='robots' content='noindex' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(withIdentity(injectIntl(Notifications)));

app/javascript/mastodon/features/notifications_wrapper.jsx

@@ -1,9 +0,0 @@
-import Notifications_v2 from 'mastodon/features/notifications_v2';
-
-export const NotificationsWrapper = (props) => {
-  return (
-    <Notifications_v2 {...props} />
-  );
-};
-
-export default NotificationsWrapper;

app/javascript/mastodon/features/ui/components/columns_area.jsx

@@ -8,7 +8,7 @@ import { scrollRight } from '../../../scroll';
 import BundleContainer from '../containers/bundle_container';
 import {
   Compose,
-  NotificationsWrapper,
+  Notifications,
   HomeTimeline,
   CommunityTimeline,
   PublicTimeline,
@@ -30,7 +30,7 @@ import NavigationPanel from './navigation_panel';
 const componentMap = {
   'COMPOSE': Compose,
   'HOME': HomeTimeline,
-  'NOTIFICATIONS': NotificationsWrapper,
+  'NOTIFICATIONS': Notifications,
   'PUBLIC': PublicTimeline,
   'REMOTE': PublicTimeline,
   'COMMUNITY': CommunityTimeline,

app/javascript/mastodon/features/ui/index.jsx

@@ -49,7 +49,7 @@ import {
   Favourites,
   DirectTimeline,
   HashtagTimeline,
-  NotificationsWrapper,
+  Notifications,
   NotificationRequests,
   NotificationRequest,
   FollowRequests,
@@ -211,7 +211,7 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/lists/:id/edit' component={ListEdit} content={children} />
             <WrappedRoute path='/lists/:id/members' component={ListMembers} content={children} />
             <WrappedRoute path='/lists/:id' component={ListTimeline} content={children} />
-            <WrappedRoute path='/notifications' component={NotificationsWrapper} content={children} exact />
+            <WrappedRoute path='/notifications' component={Notifications} content={children} exact />
             <WrappedRoute path='/notifications/requests' component={NotificationRequests} content={children} exact />
             <WrappedRoute path='/notifications/requests/:id' component={NotificationRequest} content={children} exact />
             <WrappedRoute path='/favourites' component={FavouritedStatuses} content={children} />

app/javascript/mastodon/features/ui/util/async-components.js

@@ -7,15 +7,7 @@ export function Compose () {
 }
 
 export function Notifications () {
-  return import(/* webpackChunkName: "features/notifications_v1" */'../../notifications');
+  return import(/* webpackChunkName: "features/notifications" */'../../notifications_v2');
-}
-
-export function Notifications_v2 () {
-  return import(/* webpackChunkName: "features/notifications_v2" */'../../notifications_v2');
-}
-
-export function NotificationsWrapper () {
-  return import(/* webpackChunkName: "features/notifications" */'../../notifications_wrapper');
 }
 
 export function HomeTimeline () {