diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js
index 0d52100b90..8185a4ee23 100644
--- a/app/javascript/flavours/glitch/actions/notifications.js
+++ b/app/javascript/flavours/glitch/actions/notifications.js
@@ -1,5 +1,4 @@
import api, { getLinks } from 'flavours/glitch/util/api';
-import { List as ImmutableList } from 'immutable';
import IntlMessageFormat from 'intl-messageformat';
import { fetchRelationships } from './accounts';
import { defineMessages } from 'react-intl';
@@ -18,10 +17,6 @@ export const NOTIFICATIONS_UNMARK_ALL_FOR_DELETE = 'NOTIFICATIONS_UNMARK_ALL_FOR
// Mark one for delete
export const NOTIFICATION_MARK_FOR_DELETE = 'NOTIFICATION_MARK_FOR_DELETE';
-export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST';
-export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS';
-export const NOTIFICATIONS_REFRESH_FAIL = 'NOTIFICATIONS_REFRESH_FAIL';
-
export const NOTIFICATIONS_EXPAND_REQUEST = 'NOTIFICATIONS_EXPAND_REQUEST';
export const NOTIFICATIONS_EXPAND_SUCCESS = 'NOTIFICATIONS_EXPAND_SUCCESS';
export const NOTIFICATIONS_EXPAND_FAIL = 'NOTIFICATIONS_EXPAND_FAIL';
@@ -72,73 +67,15 @@ export function updateNotifications(notification, intlMessages, intlLocale) {
const excludeTypesFromSettings = state => state.getIn(['settings', 'notifications', 'shows']).filter(enabled => !enabled).keySeq().toJS();
-export function refreshNotifications() {
+
+export function expandNotifications({ maxId } = {}) {
return (dispatch, getState) => {
- const params = {};
- const ids = getState().getIn(['notifications', 'items']);
-
- let skipLoading = false;
-
- if (ids.size > 0) {
- params.since_id = ids.first().get('id');
- }
-
- if (getState().getIn(['notifications', 'loaded'])) {
- skipLoading = true;
- }
-
- params.exclude_types = excludeTypesFromSettings(getState());
-
- dispatch(refreshNotificationsRequest(skipLoading));
-
- api(getState).get('/api/v1/notifications', { params }).then(response => {
- const next = getLinks(response).refs.find(link => link.rel === 'next');
-
- dispatch(refreshNotificationsSuccess(response.data, skipLoading, next ? next.uri : null));
- fetchRelatedRelationships(dispatch, response.data);
- }).catch(error => {
- dispatch(refreshNotificationsFail(error, skipLoading));
- });
- };
-};
-
-export function refreshNotificationsRequest(skipLoading) {
- return {
- type: NOTIFICATIONS_REFRESH_REQUEST,
- skipLoading,
- };
-};
-
-export function refreshNotificationsSuccess(notifications, skipLoading, next) {
- return {
- type: NOTIFICATIONS_REFRESH_SUCCESS,
- notifications,
- accounts: notifications.map(item => item.account),
- statuses: notifications.map(item => item.status).filter(status => !!status),
- skipLoading,
- next,
- };
-};
-
-export function refreshNotificationsFail(error, skipLoading) {
- return {
- type: NOTIFICATIONS_REFRESH_FAIL,
- error,
- skipLoading,
- };
-};
-
-export function expandNotifications() {
- return (dispatch, getState) => {
- const items = getState().getIn(['notifications', 'items'], ImmutableList());
-
- if (getState().getIn(['notifications', 'isLoading']) || items.size === 0) {
+ if (getState().getIn(['notifications', 'isLoading'])) {
return;
}
const params = {
- max_id: items.last().get('id'),
- limit: 20,
+ max_id: maxId,
exclude_types: excludeTypesFromSettings(getState()),
};
diff --git a/app/javascript/flavours/glitch/actions/streaming.js b/app/javascript/flavours/glitch/actions/streaming.js
index 8d623af75c..ac69c8b43e 100644
--- a/app/javascript/flavours/glitch/actions/streaming.js
+++ b/app/javascript/flavours/glitch/actions/streaming.js
@@ -5,7 +5,7 @@ import {
expandHomeTimeline,
disconnectTimeline,
} from './timelines';
-import { updateNotifications, refreshNotifications } from './notifications';
+import { updateNotifications, expandNotifications } from './notifications';
import { getLocale } from 'mastodon/locales';
const { messages } = getLocale();
@@ -38,7 +38,7 @@ export function connectTimelineStream (timelineId, path, pollingRefresh = null)
function refreshHomeTimelineAndNotification (dispatch) {
dispatch(expandHomeTimeline());
- dispatch(refreshNotifications());
+ dispatch(expandNotifications());
}
export const connectUserStream = () => connectTimelineStream('home', 'user', refreshHomeTimelineAndNotification);
diff --git a/app/javascript/flavours/glitch/features/notifications/index.js b/app/javascript/flavours/glitch/features/notifications/index.js
index c27d3ffc91..f1319af45e 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.js
+++ b/app/javascript/flavours/glitch/features/notifications/index.js
@@ -17,6 +17,7 @@ import { createSelector } from 'reselect';
import { List as ImmutableList } from 'immutable';
import { debounce } from 'lodash';
import ScrollableList from 'flavours/glitch/components/scrollable_list';
+import LoadMore from 'flavours/glitch/components/load_more';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@@ -25,14 +26,32 @@ const messages = defineMessages({
const getNotifications = createSelector([
state => ImmutableList(state.getIn(['settings', 'notifications', 'shows']).filter(item => !item).keys()),
state => state.getIn(['notifications', 'items']),
-], (excludedTypes, notifications) => notifications.filterNot(item => excludedTypes.includes(item.get('type'))));
+], (excludedTypes, notifications) => notifications.filterNot(item => item !== null && excludedTypes.includes(item.get('type'))));
+
+class LoadGap extends React.PureComponent {
+
+ static propTypes = {
+ disabled: PropTypes.bool,
+ maxId: PropTypes.string,
+ onClick: PropTypes.func.isRequired,
+ };
+
+ handleClick = () => {
+ this.props.onClick(this.props.maxId);
+ }
+
+ render () {
+ return ;
+ }
+
+}
const mapStateToProps = state => ({
notifications: getNotifications(state),
localSettings: state.get('local_settings'),
isLoading: state.getIn(['notifications', 'isLoading'], true),
isUnread: state.getIn(['notifications', 'unread']) > 0,
- hasMore: !!state.getIn(['notifications', 'next']),
+ hasMore: state.getIn(['notifications', 'hasMore']),
notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
});
@@ -67,9 +86,13 @@ export default class Notifications extends React.PureComponent {
trackScroll: true,
};
- handleLoadMore = debounce(() => {
- this.props.dispatch(scrollTopNotifications(false));
- this.props.dispatch(expandNotifications());
+ 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 });
handleScrollToTop = debounce(() => {
@@ -104,12 +127,12 @@ export default class Notifications extends React.PureComponent {
}
handleMoveUp = id => {
- const elementIndex = this.props.notifications.findIndex(item => item.get('id') === id) - 1;
+ const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
this._selectChild(elementIndex);
}
handleMoveDown = id => {
- const elementIndex = this.props.notifications.findIndex(item => item.get('id') === id) + 1;
+ const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
this._selectChild(elementIndex);
}
@@ -131,7 +154,14 @@ export default class Notifications extends React.PureComponent {
if (isLoading && this.scrollableContent) {
scrollableContent = this.scrollableContent;
} else if (notifications.size > 0 || hasMore) {
- scrollableContent = notifications.map((item) => (
+ scrollableContent = notifications.map((item, index) => item === null ? (
+ 0 ? notifications.getIn([index - 1, 'id']) : null}
+ onClick={this.handleLoadGap}
+ />
+ ) : (
{
});
};
-const normalizeNotifications = (state, notifications, next) => {
- let items = ImmutableList();
- const loaded = state.get('loaded');
+const newer = (m, n) => {
+ const mId = m.get('id');
+ const nId = n.get('id');
- notifications.forEach((n, i) => {
- items = items.set(i, notificationToMap(state, n));
- });
-
- if (state.get('next') === null) {
- state = state.set('next', next);
- }
-
- return state
- .update('items', list => loaded ? items.concat(list) : list.concat(items))
- .set('loaded', true)
- .set('isLoading', false);
+ return mId.length === nId.length ? mId > nId : mId.length > nId.length;
};
-const appendNormalizedNotifications = (state, notifications, next) => {
+const expandNormalizedNotifications = (state, notifications, next) => {
let items = ImmutableList();
notifications.forEach((n, i) => {
items = items.set(i, notificationToMap(state, n));
});
- return state
- .update('items', list => list.concat(items))
- .set('next', next)
- .set('isLoading', false);
+ return state.withMutations(mutable => {
+ if (!items.isEmpty()) {
+ mutable.update('items', list => {
+ const lastIndex = 1 + list.findLastIndex(
+ item => item !== null && (newer(item, items.last()) || item.get('id') === items.last().get('id'))
+ );
+
+ const firstIndex = 1 + list.take(lastIndex).findLastIndex(
+ item => item !== null && newer(item, items.first())
+ );
+
+ return list.take(firstIndex).concat(items, list.skip(lastIndex));
+ });
+ }
+
+ if (!next) {
+ mutable.set('hasMore', true);
+ }
+
+ mutable.set('isLoading', false);
+ });
};
const filterNotifications = (state, relationship) => {
@@ -137,29 +139,29 @@ export default function notifications(state = initialState, action) {
let st;
switch(action.type) {
- case NOTIFICATIONS_REFRESH_REQUEST:
case NOTIFICATIONS_EXPAND_REQUEST:
case NOTIFICATIONS_DELETE_MARKED_REQUEST:
return state.set('isLoading', true);
case NOTIFICATIONS_DELETE_MARKED_FAIL:
- case NOTIFICATIONS_REFRESH_FAIL:
case NOTIFICATIONS_EXPAND_FAIL:
return state.set('isLoading', false);
case NOTIFICATIONS_SCROLL_TOP:
return updateTop(state, action.top);
case NOTIFICATIONS_UPDATE:
return normalizeNotification(state, action.notification);
- case NOTIFICATIONS_REFRESH_SUCCESS:
- return normalizeNotifications(state, action.notifications, action.next);
case NOTIFICATIONS_EXPAND_SUCCESS:
- return appendNormalizedNotifications(state, action.notifications, action.next);
+ return expandNormalizedNotifications(state, action.notifications, action.next);
case ACCOUNT_BLOCK_SUCCESS:
case ACCOUNT_MUTE_SUCCESS:
return filterNotifications(state, action.relationship);
case NOTIFICATIONS_CLEAR:
- return state.set('items', ImmutableList()).set('next', null);
+ return state.set('items', ImmutableList()).set('hasMore', false);
case TIMELINE_DELETE:
return deleteByStatus(state, action.id);
+ case TIMELINE_DISCONNECT:
+ return action.timeline === 'home' ?
+ state.update('items', items => items.first() ? items.unshift(null) : items) :
+ state;
case NOTIFICATION_MARK_FOR_DELETE:
return markForDelete(state, action.id, action.yes);