import { List as ImmutableList } from 'immutable';
import { unescapeHTML } from 'flavours/glitch/util/html';
import { getFiltersRegex } from 'flavours/glitch/selectors';
+import { usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
+import compareId from 'flavours/glitch/util/compare_id';
export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
export const NOTIFICATIONS_FILTER_SET = 'NOTIFICATIONS_FILTER_SET';
-export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
-export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
+export const NOTIFICATIONS_CLEAR = 'NOTIFICATIONS_CLEAR';
+export const NOTIFICATIONS_SCROLL_TOP = 'NOTIFICATIONS_SCROLL_TOP';
+export const NOTIFICATIONS_LOAD_PENDING = 'NOTIFICATIONS_LOAD_PENDING';
export const NOTIFICATIONS_MOUNT = 'NOTIFICATIONS_MOUNT';
export const NOTIFICATIONS_UNMOUNT = 'NOTIFICATIONS_UNMOUNT';
}
};
+export const loadPending = () => ({
+ type: NOTIFICATIONS_LOAD_PENDING,
+});
+
export function updateNotifications(notification, intlMessages, intlLocale) {
return (dispatch, getState) => {
const showInColumn = getState().getIn(['settings', 'notifications', 'shows', notification.type], true);
dispatch({
type: NOTIFICATIONS_UPDATE,
notification,
+ usePendingItems: preferPendingItems,
meta: (playSound && !filtered) ? { sound: 'boop' } : undefined,
});
: excludeTypesFromFilter(activeFilter),
};
- if (!maxId && notifications.get('items').size > 0) {
- params.since_id = notifications.getIn(['items', 0, 'id']);
+ if (!params.max_id && (notifications.get('items', ImmutableList()).size + notifications.get('pendingItems', ImmutableList()).size) > 0) {
+ const a = notifications.getIn(['pendingItems', 0, 'id']);
+ const b = notifications.getIn(['items', 0, 'id']);
+
+ if (a && b && compareId(a, b) > 0) {
+ params.since_id = a;
+ } else {
+ params.since_id = b || a;
+ }
}
+ const isLoadingRecent = !!params.since_id;
+
dispatch(expandNotificationsRequest(isLoadingMore));
api(getState).get('/api/v1/notifications', { params }).then(response => {
dispatch(importFetchedAccounts(response.data.map(item => item.account)));
dispatch(importFetchedStatuses(response.data.map(item => item.status).filter(status => !!status)));
- dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore));
+ dispatch(expandNotificationsSuccess(response.data, next ? next.uri : null, isLoadingMore, isLoadingRecent && preferPendingItems));
fetchRelatedRelationships(dispatch, response.data);
done();
}).catch(error => {
};
};
-export function expandNotificationsSuccess(notifications, next, isLoadingMore) {
+export function expandNotificationsSuccess(notifications, next, isLoadingMore, usePendingItems) {
return {
type: NOTIFICATIONS_EXPAND_SUCCESS,
notifications,
- accounts: notifications.map(item => item.account),
- statuses: notifications.map(item => item.status).filter(status => !!status),
next,
+ usePendingItems,
skipLoading: !isLoadingMore,
};
};
import { importFetchedStatus, importFetchedStatuses } from './importer';
import api, { getLinks } from 'flavours/glitch/util/api';
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import compareId from 'flavours/glitch/util/compare_id';
+import { usePendingItems as preferPendingItems } from 'flavours/glitch/util/initial_state';
export const TIMELINE_UPDATE = 'TIMELINE_UPDATE';
export const TIMELINE_DELETE = 'TIMELINE_DELETE';
export const TIMELINE_EXPAND_SUCCESS = 'TIMELINE_EXPAND_SUCCESS';
export const TIMELINE_EXPAND_FAIL = 'TIMELINE_EXPAND_FAIL';
-export const TIMELINE_SCROLL_TOP = 'TIMELINE_SCROLL_TOP';
+export const TIMELINE_SCROLL_TOP = 'TIMELINE_SCROLL_TOP';
+export const TIMELINE_LOAD_PENDING = 'TIMELINE_LOAD_PENDING';
+export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
+export const TIMELINE_CONNECT = 'TIMELINE_CONNECT';
-export const TIMELINE_CONNECT = 'TIMELINE_CONNECT';
-export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
+export const loadPending = timeline => ({
+ type: TIMELINE_LOAD_PENDING,
+ timeline,
+});
export function updateTimeline(timeline, status, accept) {
return dispatch => {
type: TIMELINE_UPDATE,
timeline,
status,
+ usePendingItems: preferPendingItems,
});
};
};
return;
}
- if (!params.max_id && !params.pinned && timeline.get('items', ImmutableList()).size > 0) {
- params.since_id = timeline.getIn(['items', 0]);
+ if (!params.max_id && !params.pinned && (timeline.get('items', ImmutableList()).size + timeline.get('pendingItems', ImmutableList()).size) > 0) {
+ const a = timeline.getIn(['pendingItems', 0]);
+ const b = timeline.getIn(['items', 0]);
+
+ if (a && b && compareId(a, b) > 0) {
+ params.since_id = a;
+ } else {
+ params.since_id = b || a;
+ }
}
const isLoadingRecent = !!params.since_id;
api(getState).get(path, { params }).then(response => {
const next = getLinks(response).refs.find(link => link.rel === 'next');
dispatch(importFetchedStatuses(response.data));
- dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.code === 206, isLoadingRecent, isLoadingMore));
+ dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.code === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems));
done();
}).catch(error => {
dispatch(expandTimelineFail(timelineId, error, isLoadingMore));
};
};
-export function expandTimelineSuccess(timeline, statuses, next, partial, isLoadingRecent, isLoadingMore) {
+export function expandTimelineSuccess(timeline, statuses, next, partial, isLoadingRecent, isLoadingMore, usePendingItems) {
return {
type: TIMELINE_EXPAND_SUCCESS,
timeline,
next,
partial,
isLoadingRecent,
+ usePendingItems,
skipLoading: !isLoadingMore,
};
};
};
};
-export function disconnectTimeline(timeline) {
- return {
- type: TIMELINE_DISCONNECT,
- timeline,
- };
-};
+export const disconnectTimeline = timeline => ({
+ type: TIMELINE_DISCONNECT,
+ timeline,
+ usePendingItems: preferPendingItems,
+});
--- /dev/null
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+
+export default class LoadPending extends React.PureComponent {
+
+ static propTypes = {
+ onClick: PropTypes.func,
+ count: PropTypes.number,
+ }
+
+ render() {
+ const { count } = this.props;
+
+ return (
+ <button className='load-more load-gap' onClick={this.props.onClick}>
+ <FormattedMessage id='load_pending' defaultMessage='{count, plural, one {# new item} other {# new items}}' values={{ count }} />
+ </button>
+ );
+ }
+
+}
import PropTypes from 'prop-types';
import IntersectionObserverArticleContainer from 'flavours/glitch/containers/intersection_observer_article_container';
import LoadMore from './load_more';
+import LoadPending from './load_pending';
import IntersectionObserverWrapper from 'flavours/glitch/util/intersection_observer_wrapper';
import { throttle } from 'lodash';
import { List as ImmutableList } from 'immutable';
static propTypes = {
scrollKey: PropTypes.string.isRequired,
onLoadMore: PropTypes.func,
+ onLoadPending: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
trackScroll: PropTypes.bool,
isLoading: PropTypes.bool,
showLoading: PropTypes.bool,
hasMore: PropTypes.bool,
+ numPending: PropTypes.number,
prepend: PropTypes.node,
alwaysPrepend: PropTypes.bool,
emptyMessage: PropTypes.node,
return !(location.state && location.state.mastodonModalOpen);
}
+ handleLoadPending = e => {
+ e.preventDefault();
+ this.props.onLoadPending();
+ }
+
render () {
- const { children, scrollKey, trackScroll, shouldUpdateScroll, showLoading, isLoading, hasMore, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
+ const { children, scrollKey, trackScroll, shouldUpdateScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props;
const { fullscreen } = this.state;
const childrenCount = React.Children.count(children);
const loadMore = (hasMore && onLoadMore) ? <LoadMore visible={!isLoading} onClick={this.handleLoadMore} /> : null;
+ const loadPending = (numPending > 0) ? <LoadPending count={numPending} onClick={this.handleLoadPending} /> : null;
let scrollableArea = null;
if (showLoading) {
<div role='feed' className='item-list'>
{prepend}
+ {loadPending}
+
{React.Children.map(this.props.children, (child, index) => (
<IntersectionObserverArticleContainer
key={child.key}
return (
<div>
<div className='column-settings__row'>
- <SettingToggle settings={settings} settingPath={['other', 'onlyMedia']} onChange={onChange} label={<FormattedMessage id='community.column_settings.media_only' defaultMessage='Media Only' />} />
+ <SettingToggle settings={settings} settingPath={['other', 'onlyMedia']} onChange={onChange} label={<FormattedMessage id='community.column_settings.media_only' defaultMessage='Media only' />} />
</div>
<span className='column-settings__section'><FormattedMessage id='home.column_settings.advanced' defaultMessage='Advanced' /></span>
label: PropTypes.node.isRequired,
meta: PropTypes.node,
onChange: PropTypes.func.isRequired,
+ defaultValue: PropTypes.bool,
}
onChange = ({ target }) => {
}
render () {
- const { prefix, settings, settingPath, label, meta } = this.props;
+ const { prefix, settings, settingPath, label, meta, defaultValue } = this.props;
const id = ['setting-toggle', prefix, ...settingPath].filter(Boolean).join('-');
return (
<div className='setting-toggle'>
- <Toggle id={id} checked={settings.getIn(settingPath)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
+ <Toggle id={id} checked={settings.getIn(settingPath, defaultValue)} onChange={this.onChange} onKeyDown={this.onKeyDown} />
<label htmlFor={id} className='setting-toggle__label'>{label}</label>
{meta && <span className='setting-meta__label'>{meta}</span>}
</div>
scrollTopNotifications,
mountNotifications,
unmountNotifications,
+ loadPending,
} from 'flavours/glitch/actions/notifications';
import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
import NotificationContainer from './containers/notification_container';
isLoading: state.getIn(['notifications', 'isLoading'], true),
isUnread: state.getIn(['notifications', 'unread']) > 0,
hasMore: state.getIn(['notifications', 'hasMore']),
+ numPending: state.getIn(['notifications', 'pendingItems'], ImmutableList()).size,
notifCleaningActive: state.getIn(['notifications', 'cleaningMode']),
});
isUnread: PropTypes.bool,
multiColumn: PropTypes.bool,
hasMore: PropTypes.bool,
+ numPending: PropTypes.number,
localSettings: ImmutablePropTypes.map,
notifCleaningActive: PropTypes.bool,
onEnterCleaningMode: PropTypes.func,
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);
}
render () {
- const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, showFilterBar } = this.props;
+ const { intl, notifications, shouldUpdateScroll, isLoading, isUnread, columnId, multiColumn, hasMore, numPending, 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." />;
isLoading={isLoading}
showLoading={isLoading && notifications.size === 0}
hasMore={hasMore}
+ numPending={numPending}
emptyMessage={emptyMessage}
onLoadMore={this.handleLoadOlder}
+ onLoadPending={this.handleLoadPending}
onScrollToTop={this.handleScrollToTop}
onScroll={this.handleScroll}
shouldUpdateScroll={shouldUpdateScroll}
import { connect } from 'react-redux';
import StatusList from 'flavours/glitch/components/status_list';
-import { scrollTopTimeline } from 'flavours/glitch/actions/timelines';
+import { scrollTopTimeline, loadPending } from 'flavours/glitch/actions/timelines';
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { createSelector } from 'reselect';
import { debounce } from 'lodash';
isLoading: state.getIn(['timelines', timelineId, 'isLoading'], true),
isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
hasMore: state.getIn(['timelines', timelineId, 'hasMore']),
+ numPending: state.getIn(['timelines', timelineId, 'pendingItems'], ImmutableList()).size,
});
return mapStateToProps;
dispatch(scrollTopTimeline(timelineId, false));
}, 100),
+ onLoadPending: () => dispatch(loadPending(timelineId)),
+
});
export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
NOTIFICATIONS_FILTER_SET,
NOTIFICATIONS_CLEAR,
NOTIFICATIONS_SCROLL_TOP,
+ NOTIFICATIONS_LOAD_PENDING,
NOTIFICATIONS_DELETE_MARKED_REQUEST,
NOTIFICATIONS_DELETE_MARKED_SUCCESS,
NOTIFICATION_MARK_FOR_DELETE,
import compareId from 'flavours/glitch/util/compare_id';
const initialState = ImmutableMap({
+ pendingItems: ImmutableList(),
items: ImmutableList(),
hasMore: true,
top: false,
status: notification.status ? notification.status.id : null,
});
-const normalizeNotification = (state, notification) => {
+const normalizeNotification = (state, notification, usePendingItems) => {
+ if (usePendingItems) {
+ return state.update('pendingItems', list => list.unshift(notificationToMap(state, notification)));
+ }
+
const top = !shouldCountUnreadNotifications(state);
if (top) {
});
};
-const expandNormalizedNotifications = (state, notifications, next) => {
+const expandNormalizedNotifications = (state, notifications, next, usePendingItems) => {
const top = !(shouldCountUnreadNotifications(state));
const lastReadId = state.get('lastReadId');
let items = ImmutableList();
return state.withMutations(mutable => {
if (!items.isEmpty()) {
- mutable.update('items', list => {
+ mutable.update(usePendingItems ? 'pendingItems' : 'items', list => {
const lastIndex = 1 + list.findLastIndex(
item => item !== null && (compareId(item.get('id'), items.last().get('id')) > 0 || item.get('id') === items.last().get('id'))
);
};
const filterNotifications = (state, relationship) => {
- return state.update('items', list => list.filterNot(item => item !== null && item.get('account') === relationship.id));
+ const helper = list => list.filterNot(item => item !== null && item.get('account') === relationship.id);
+ return state.update('items', helper).update('pendingItems', helper);
};
const clearUnread = (state) => {
const deletedUnread = state.get('items').filter(item => item !== null && item.get('status') === statusId && compareId(item.get('id'), lastReadId) > 0);
state = state.update('unread', unread => unread - deletedUnread.size);
}
- return state.update('items', list => list.filterNot(item => item !== null && item.get('status') === statusId));
+ const helper = list => list.filterNot(item => item !== null && item.get('status') === statusId);
+ return state.update('items', helper).update('pendingItems', helper);
};
const markForDelete = (state, notificationId, yes) => {
return state.update('mounted', count => count - 1);
case NOTIFICATIONS_SET_VISIBILITY:
return updateVisibility(state, action.visibility);
+ case NOTIFICATIONS_LOAD_PENDING:
+ return state.update('items', list => state.get('pendingItems').concat(list.take(40))).set('pendingItems', ImmutableList()).set('unread', 0);
case NOTIFICATIONS_EXPAND_REQUEST:
case NOTIFICATIONS_DELETE_MARKED_REQUEST:
return state.set('isLoading', true);
case NOTIFICATIONS_SCROLL_TOP:
return updateTop(state, action.top);
case NOTIFICATIONS_UPDATE:
- return normalizeNotification(state, action.notification);
+ return normalizeNotification(state, action.notification, action.usePendingItems);
case NOTIFICATIONS_EXPAND_SUCCESS:
- return expandNormalizedNotifications(state, action.notifications, action.next);
+ return expandNormalizedNotifications(state, action.notifications, action.next, action.usePendingItems);
case ACCOUNT_BLOCK_SUCCESS:
return filterNotifications(state, action.relationship);
case ACCOUNT_MUTE_SUCCESS:
return action.relationship.muting_notifications ? filterNotifications(state, action.relationship) : state;
case NOTIFICATIONS_CLEAR:
- return state.set('items', ImmutableList()).set('hasMore', false);
+ return state.set('items', ImmutableList()).set('pendingItems', 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.update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items) :
state;
case NOTIFICATION_MARK_FOR_DELETE:
TIMELINE_SCROLL_TOP,
TIMELINE_CONNECT,
TIMELINE_DISCONNECT,
+ TIMELINE_LOAD_PENDING,
} from 'flavours/glitch/actions/timelines';
import {
ACCOUNT_BLOCK_SUCCESS,
top: true,
isLoading: false,
hasMore: true,
+ pendingItems: ImmutableList(),
items: ImmutableList(),
});
-const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent) => {
+const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => {
return state.update(timeline, initialTimeline, map => map.withMutations(mMap => {
mMap.set('isLoading', false);
mMap.set('isPartial', isPartial);
if (timeline.endsWith(':pinned')) {
mMap.set('items', statuses.map(status => status.get('id')));
} else if (!statuses.isEmpty()) {
- mMap.update('items', ImmutableList(), oldIds => {
+ mMap.update(usePendingItems ? 'pendingItems' : 'items', ImmutableList(), oldIds => {
const newIds = statuses.map(status => status.get('id'));
const lastIndex = oldIds.findLastIndex(id => id !== null && compareId(id, newIds.last()) >= 0) + 1;
const firstIndex = oldIds.take(lastIndex).findLastIndex(id => id !== null && compareId(id, newIds.first()) > 0);
}));
};
-const updateTimeline = (state, timeline, status) => {
+const updateTimeline = (state, timeline, status, usePendingItems) => {
+ if (usePendingItems) {
+ if (state.getIn([timeline, 'pendingItems'], ImmutableList()).includes(status.get('id')) || state.getIn([timeline, 'items'], ImmutableList()).includes(status.get('id'))) {
+ return state;
+ }
+
+ return state.update(timeline, initialTimeline, map => map.update('pendingItems', list => list.unshift(status.get('id'))));
+ }
+
const top = state.getIn([timeline, 'top']);
const ids = state.getIn([timeline, 'items'], ImmutableList());
const includesId = ids.includes(status.get('id'));
const deleteStatus = (state, id, accountId, references, exclude_account = null) => {
state.keySeq().forEach(timeline => {
- if (exclude_account === null || (timeline !== `account:${exclude_account}` && !timeline.startsWith(`account:${exclude_account}:`)))
- state = state.updateIn([timeline, 'items'], list => list.filterNot(item => item === id));
+ if (exclude_account === null || (timeline !== `account:${exclude_account}` && !timeline.startsWith(`account:${exclude_account}:`))) {
+ const helper = list => list.filterNot(item => item === id);
+ state = state.updateIn([timeline, 'items'], helper).updateIn([timeline, 'pendingItems'], helper);
+ }
});
// Remove reblogs of deleted status
return state;
};
-const filterTimeline = (timeline, state, relationship, statuses) =>
- state.updateIn([timeline, 'items'], ImmutableList(), list =>
- list.filterNot(statusId =>
- statuses.getIn([statusId, 'account']) === relationship.id
- ));
+const filterTimeline = (timeline, state, relationship, statuses) => {
+ const helper = list => list.filterNot(statusId => statuses.getIn([statusId, 'account']) === relationship.id);
+ return state.updateIn([timeline, 'items'], ImmutableList(), helper).updateIn([timeline, 'pendingItems'], ImmutableList(), helper);
+};
const updateTop = (state, timeline, top) => {
return state.update(timeline, initialTimeline, map => map.withMutations(mMap => {
export default function timelines(state = initialState, action) {
switch(action.type) {
+ case TIMELINE_LOAD_PENDING:
+ return state.update(action.timeline, initialTimeline, map =>
+ map.update('items', list => map.get('pendingItems').concat(list.take(40))).set('pendingItems', ImmutableList()).set('unread', 0));
case TIMELINE_EXPAND_REQUEST:
return state.update(action.timeline, initialTimeline, map => map.set('isLoading', true));
case TIMELINE_EXPAND_FAIL:
return state.update(action.timeline, initialTimeline, map => map.set('isLoading', false));
case TIMELINE_EXPAND_SUCCESS:
- return expandNormalizedTimeline(state, action.timeline, fromJS(action.statuses), action.next, action.partial, action.isLoadingRecent);
+ return expandNormalizedTimeline(state, action.timeline, fromJS(action.statuses), action.next, action.partial, action.isLoadingRecent, action.usePendingItems);
case TIMELINE_UPDATE:
- return updateTimeline(state, action.timeline, fromJS(action.status));
+ return updateTimeline(state, action.timeline, fromJS(action.status), action.usePendingItems);
case TIMELINE_DELETE:
return deleteStatus(state, action.id, action.accountId, action.references, action.reblogOf);
case TIMELINE_CLEAR:
return state.update(
action.timeline,
initialTimeline,
- map => map.set('online', false).update('items', items => items.first() ? items.unshift(null) : items)
+ map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : 'items', items => items.first() ? items.unshift(null) : items)
);
default:
return state;
-export default function compareId(id1, id2) {
+export default function compareId (id1, id2) {
if (id1 === id2) {
return 0;
}
+
if (id1.length === id2.length) {
return id1 > id2 ? 1 : -1;
} else {
return id1.length > id2.length ? 1 : -1;
}
-}
+};
export const defaultContentType = getMeta('default_content_type');
export const forceSingleColumn = getMeta('advanced_layout') === false;
export const useBlurhash = getMeta('use_blurhash');
+export const usePendingItems = getMeta('use_pending_items');
export default initialState;
cat aescling's git repositories / mastodon.git / commitdiff