* Revert "persist last-intersected status update and restore when ScrollableList is restored" This reverts commitmaster^207e26142ef
. 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 commitc93df2159f
. 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
@@ -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; | ||||
} | } | ||||