Fix 12661 (#12744)
* Revert "persist last-intersected status update and restore when ScrollableList is restored" This reverts commit 07e26142ef6a8e74bd2ac5e9b461a5a1699bd4c8. accidentally merged spurious code in https://github.com/tootsuite/mastodon/pull/12661. https://github.com/tootsuite/mastodon/pull/12735 removes the slowdown that this code was trying to solve; and other functionality successfully restores the view state of the list * Revert "cache currently-viewing status id to avoid calling redux with identical value" This reverts commit c93df2159fbd3888a5c48d8a8b8ae61dbbc54b89. accidentally merged spurious code in https://github.com/tootsuite/mastodon/pull/12661. https://github.com/tootsuite/mastodon/pull/12735 removes the slowdown that this code was trying to solve; and other functionality successfully restores the view state of the listgh/stable
parent
aa138ea350
commit
9cbbc50fcd
|
@ -17,14 +17,6 @@ export const TIMELINE_LOAD_PENDING = 'TIMELINE_LOAD_PENDING';
|
||||||
export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
|
export const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
|
||||||
export const TIMELINE_CONNECT = 'TIMELINE_CONNECT';
|
export const TIMELINE_CONNECT = 'TIMELINE_CONNECT';
|
||||||
|
|
||||||
export const CURRENTLY_VIEWING = 'CURRENTLY_VIEWING';
|
|
||||||
|
|
||||||
export const updateCurrentlyViewing = (timeline, id) => ({
|
|
||||||
type: CURRENTLY_VIEWING,
|
|
||||||
timeline,
|
|
||||||
id,
|
|
||||||
});
|
|
||||||
|
|
||||||
export const loadPending = timeline => ({
|
export const loadPending = timeline => ({
|
||||||
type: TIMELINE_LOAD_PENDING,
|
type: TIMELINE_LOAD_PENDING,
|
||||||
timeline,
|
timeline,
|
||||||
|
|
|
@ -20,8 +20,6 @@ export default class IntersectionObserverArticle extends React.Component {
|
||||||
cachedHeight: PropTypes.number,
|
cachedHeight: PropTypes.number,
|
||||||
onHeightChange: PropTypes.func,
|
onHeightChange: PropTypes.func,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
currentlyViewing: PropTypes.number,
|
|
||||||
updateCurrentlyViewing: PropTypes.func,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -50,8 +48,6 @@ export default class IntersectionObserverArticle extends React.Component {
|
||||||
);
|
);
|
||||||
|
|
||||||
this.componentMounted = true;
|
this.componentMounted = true;
|
||||||
|
|
||||||
if(id === this.props.currentlyViewing) this.node.scrollIntoView();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
|
@ -64,8 +60,6 @@ export default class IntersectionObserverArticle extends React.Component {
|
||||||
handleIntersection = (entry) => {
|
handleIntersection = (entry) => {
|
||||||
this.entry = entry;
|
this.entry = entry;
|
||||||
|
|
||||||
if(entry.intersectionRatio > 0.75 && this.props.updateCurrentlyViewing) this.props.updateCurrentlyViewing(this.id);
|
|
||||||
|
|
||||||
scheduleIdleTask(this.calculateHeight);
|
scheduleIdleTask(this.calculateHeight);
|
||||||
this.setState(this.updateStateAfterIntersection);
|
this.setState(this.updateStateAfterIntersection);
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,8 +36,6 @@ export default class ScrollableList extends PureComponent {
|
||||||
emptyMessage: PropTypes.node,
|
emptyMessage: PropTypes.node,
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
bindToDocument: PropTypes.bool,
|
bindToDocument: PropTypes.bool,
|
||||||
currentlyViewing: PropTypes.number,
|
|
||||||
updateCurrentlyViewing: PropTypes.func,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -314,8 +312,6 @@ export default class ScrollableList extends PureComponent {
|
||||||
listLength={childrenCount}
|
listLength={childrenCount}
|
||||||
intersectionObserverWrapper={this.intersectionObserverWrapper}
|
intersectionObserverWrapper={this.intersectionObserverWrapper}
|
||||||
saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
|
saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
|
||||||
currentlyViewing={this.props.currentlyViewing}
|
|
||||||
updateCurrentlyViewing={this.props.updateCurrentlyViewing}
|
|
||||||
>
|
>
|
||||||
{React.cloneElement(child, {
|
{React.cloneElement(child, {
|
||||||
getScrollPosition: this.getScrollPosition,
|
getScrollPosition: this.getScrollPosition,
|
||||||
|
|
|
@ -26,8 +26,6 @@ export default class StatusList extends ImmutablePureComponent {
|
||||||
emptyMessage: PropTypes.node,
|
emptyMessage: PropTypes.node,
|
||||||
alwaysPrepend: PropTypes.bool,
|
alwaysPrepend: PropTypes.bool,
|
||||||
timelineId: PropTypes.string,
|
timelineId: PropTypes.string,
|
||||||
currentlyViewing: PropTypes.number,
|
|
||||||
updateCurrentlyViewing: PropTypes.func,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -60,12 +58,6 @@ export default class StatusList extends ImmutablePureComponent {
|
||||||
this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
|
this.props.onLoadMore(this.props.statusIds.size > 0 ? this.props.statusIds.last() : undefined);
|
||||||
}, 300, { leading: true })
|
}, 300, { leading: true })
|
||||||
|
|
||||||
updateCurrentlyViewingWithCache = (id) => {
|
|
||||||
if(this.cachedCurrentlyViewing === id) return;
|
|
||||||
this.cachedCurrentlyViewing = id;
|
|
||||||
this.props.updateCurrentlyViewing(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
_selectChild (index, align_top) {
|
_selectChild (index, align_top) {
|
||||||
const container = this.node.node;
|
const container = this.node.node;
|
||||||
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
|
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
|
||||||
|
@ -87,7 +79,6 @@ export default class StatusList extends ImmutablePureComponent {
|
||||||
render () {
|
render () {
|
||||||
const { statusIds, featuredStatusIds, shouldUpdateScroll, onLoadMore, timelineId, ...other } = this.props;
|
const { statusIds, featuredStatusIds, shouldUpdateScroll, onLoadMore, timelineId, ...other } = this.props;
|
||||||
const { isLoading, isPartial } = other;
|
const { isLoading, isPartial } = other;
|
||||||
other.updateCurrentlyViewing = this.updateCurrentlyViewingWithCache;
|
|
||||||
|
|
||||||
if (isPartial) {
|
if (isPartial) {
|
||||||
return <RegenerationIndicator />;
|
return <RegenerationIndicator />;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import StatusList from '../../../components/status_list';
|
import StatusList from '../../../components/status_list';
|
||||||
import { scrollTopTimeline, loadPending, updateCurrentlyViewing } from '../../../actions/timelines';
|
import { scrollTopTimeline, loadPending } from '../../../actions/timelines';
|
||||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
@ -39,7 +39,6 @@ const makeMapStateToProps = () => {
|
||||||
isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
|
isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
|
||||||
hasMore: state.getIn(['timelines', timelineId, 'hasMore']),
|
hasMore: state.getIn(['timelines', timelineId, 'hasMore']),
|
||||||
numPending: getPendingStatusIds(state, { type: timelineId }).size,
|
numPending: getPendingStatusIds(state, { type: timelineId }).size,
|
||||||
currentlyViewing: state.getIn(['timelines', timelineId, 'currentlyViewing'], -1),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return mapStateToProps;
|
return mapStateToProps;
|
||||||
|
@ -57,7 +56,6 @@ const mapDispatchToProps = (dispatch, { timelineId }) => ({
|
||||||
|
|
||||||
onLoadPending: () => dispatch(loadPending(timelineId)),
|
onLoadPending: () => dispatch(loadPending(timelineId)),
|
||||||
|
|
||||||
updateCurrentlyViewing: id => dispatch(updateCurrentlyViewing(timelineId, id)),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
|
export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
|
||||||
|
|
|
@ -9,7 +9,6 @@ import {
|
||||||
TIMELINE_CONNECT,
|
TIMELINE_CONNECT,
|
||||||
TIMELINE_DISCONNECT,
|
TIMELINE_DISCONNECT,
|
||||||
TIMELINE_LOAD_PENDING,
|
TIMELINE_LOAD_PENDING,
|
||||||
CURRENTLY_VIEWING,
|
|
||||||
} from '../actions/timelines';
|
} from '../actions/timelines';
|
||||||
import {
|
import {
|
||||||
ACCOUNT_BLOCK_SUCCESS,
|
ACCOUNT_BLOCK_SUCCESS,
|
||||||
|
@ -29,7 +28,6 @@ const initialTimeline = ImmutableMap({
|
||||||
hasMore: true,
|
hasMore: true,
|
||||||
pendingItems: ImmutableList(),
|
pendingItems: ImmutableList(),
|
||||||
items: ImmutableList(),
|
items: ImmutableList(),
|
||||||
currentlyViewing: -1,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => {
|
const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => {
|
||||||
|
@ -170,8 +168,6 @@ export default function timelines(state = initialState, action) {
|
||||||
initialTimeline,
|
initialTimeline,
|
||||||
map => map.set('online', false).update(action.usePendingItems ? 'pendingItems' : '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)
|
||||||
);
|
);
|
||||||
case CURRENTLY_VIEWING:
|
|
||||||
return state.update(action.timeline, initialTimeline, map => map.set('currentlyViewing', action.id));
|
|
||||||
default:
|
default:
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue