123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- import React from 'react';
- import { connect } from 'react-redux';
- import PropTypes from 'prop-types';
- import ImmutablePropTypes from 'react-immutable-proptypes';
- import Column from '../../components/column';
- import ColumnHeader from '../../components/column_header';
- import {
- expandNotifications,
- scrollTopNotifications,
- loadPending,
- mountNotifications,
- unmountNotifications,
- markNotificationsAsRead,
- } from '../../actions/notifications';
- import { submitMarkers } from '../../actions/markers';
- 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';
- import ScrollableList from '../../components/scrollable_list';
- import LoadGap from '../../components/load_gap';
- import Icon from 'mastodon/components/icon';
- import compareId from 'mastodon/compare_id';
- import NotificationsPermissionBanner from './components/notifications_permission_banner';
- import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator';
- import { Helmet } from 'react-helmet';
- 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 => ({
- showFilterBar: state.getIn(['settings', 'notifications', 'quickFilter', 'show']),
- 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']),
- });
- export default @connect(mapStateToProps)
- @injectIntl
- class Notifications extends React.PureComponent {
- static contextTypes = {
- identity: PropTypes.object,
- };
- static propTypes = {
- columnId: PropTypes.string,
- notifications: ImmutablePropTypes.list.isRequired,
- showFilterBar: PropTypes.bool.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,
- };
- 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, showFilterBar, 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.context.identity;
- let scrollableContent = null;
- const filterBarContainer = (signedIn && showFilterBar)
- ? (<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}
- maxId={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;
- if (signedIn) {
- scrollContainer = (
- <ScrollableList
- scrollKey={`notifications-${columnId}`}
- trackScroll={!pinned}
- isLoading={isLoading}
- showLoading={isLoading && notifications.size === 0}
- hasMore={hasMore}
- numPending={numPending}
- prepend={needsNotificationPermission && <NotificationsPermissionBanner />}
- alwaysPrepend
- emptyMessage={emptyMessage}
- onLoadMore={this.handleLoadOlder}
- onLoadPending={this.handleLoadPending}
- onScrollToTop={this.handleScrollToTop}
- onScroll={this.handleScroll}
- bindToDocument={!multiColumn}
- >
- {scrollableContent}
- </ScrollableList>
- );
- } else {
- scrollContainer = <NotSignedInIndicator />;
- }
- let extraButton = null;
- if (canMarkAsRead) {
- extraButton = (
- <button
- aria-label={intl.formatMessage(messages.markAsRead)}
- title={intl.formatMessage(messages.markAsRead)}
- onClick={this.handleMarkAsRead}
- className='column-header__button'
- >
- <Icon id='check' />
- </button>
- );
- }
- return (
- <Column bindToDocument={!multiColumn} ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
- <ColumnHeader
- icon='bell'
- 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>
- );
- }
- }
|