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 list
This commit is contained in:
		
							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_CONNECT      = 'TIMELINE_CONNECT';
 | 
			
		||||
 | 
			
		||||
export const CURRENTLY_VIEWING = 'CURRENTLY_VIEWING';
 | 
			
		||||
 | 
			
		||||
export const updateCurrentlyViewing = (timeline, id) => ({
 | 
			
		||||
  type: CURRENTLY_VIEWING,
 | 
			
		||||
  timeline,
 | 
			
		||||
  id,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
export const loadPending = timeline => ({
 | 
			
		||||
  type: TIMELINE_LOAD_PENDING,
 | 
			
		||||
  timeline,
 | 
			
		||||
 | 
			
		||||
@ -20,8 +20,6 @@ export default class IntersectionObserverArticle extends React.Component {
 | 
			
		||||
    cachedHeight: PropTypes.number,
 | 
			
		||||
    onHeightChange: PropTypes.func,
 | 
			
		||||
    children: PropTypes.node,
 | 
			
		||||
    currentlyViewing: PropTypes.number,
 | 
			
		||||
    updateCurrentlyViewing: PropTypes.func,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  state = {
 | 
			
		||||
@ -50,8 +48,6 @@ export default class IntersectionObserverArticle extends React.Component {
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
    this.componentMounted = true;
 | 
			
		||||
 | 
			
		||||
    if(id === this.props.currentlyViewing) this.node.scrollIntoView();
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  componentWillUnmount () {
 | 
			
		||||
@ -64,8 +60,6 @@ export default class IntersectionObserverArticle extends React.Component {
 | 
			
		||||
  handleIntersection = (entry) => {
 | 
			
		||||
    this.entry = entry;
 | 
			
		||||
 | 
			
		||||
    if(entry.intersectionRatio > 0.75 && this.props.updateCurrentlyViewing) this.props.updateCurrentlyViewing(this.id);
 | 
			
		||||
 | 
			
		||||
    scheduleIdleTask(this.calculateHeight);
 | 
			
		||||
    this.setState(this.updateStateAfterIntersection);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
@ -36,8 +36,6 @@ export default class ScrollableList extends PureComponent {
 | 
			
		||||
    emptyMessage: PropTypes.node,
 | 
			
		||||
    children: PropTypes.node,
 | 
			
		||||
    bindToDocument: PropTypes.bool,
 | 
			
		||||
    currentlyViewing: PropTypes.number,
 | 
			
		||||
    updateCurrentlyViewing: PropTypes.func,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  static defaultProps = {
 | 
			
		||||
@ -314,8 +312,6 @@ export default class ScrollableList extends PureComponent {
 | 
			
		||||
                listLength={childrenCount}
 | 
			
		||||
                intersectionObserverWrapper={this.intersectionObserverWrapper}
 | 
			
		||||
                saveHeightKey={trackScroll ? `${this.context.router.route.location.key}:${scrollKey}` : null}
 | 
			
		||||
                currentlyViewing={this.props.currentlyViewing}
 | 
			
		||||
                updateCurrentlyViewing={this.props.updateCurrentlyViewing}
 | 
			
		||||
              >
 | 
			
		||||
                {React.cloneElement(child, {
 | 
			
		||||
                  getScrollPosition: this.getScrollPosition,
 | 
			
		||||
 | 
			
		||||
@ -26,8 +26,6 @@ export default class StatusList extends ImmutablePureComponent {
 | 
			
		||||
    emptyMessage: PropTypes.node,
 | 
			
		||||
    alwaysPrepend: PropTypes.bool,
 | 
			
		||||
    timelineId: PropTypes.string,
 | 
			
		||||
    currentlyViewing: PropTypes.number,
 | 
			
		||||
    updateCurrentlyViewing: PropTypes.func,
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  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);
 | 
			
		||||
  }, 300, { leading: true })
 | 
			
		||||
 | 
			
		||||
  updateCurrentlyViewingWithCache = (id) => {
 | 
			
		||||
    if(this.cachedCurrentlyViewing === id) return;
 | 
			
		||||
    this.cachedCurrentlyViewing = id;
 | 
			
		||||
    this.props.updateCurrentlyViewing(id);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  _selectChild (index, align_top) {
 | 
			
		||||
    const container = this.node.node;
 | 
			
		||||
    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
 | 
			
		||||
@ -87,7 +79,6 @@ export default class StatusList extends ImmutablePureComponent {
 | 
			
		||||
  render () {
 | 
			
		||||
    const { statusIds, featuredStatusIds, shouldUpdateScroll, onLoadMore, timelineId, ...other }  = this.props;
 | 
			
		||||
    const { isLoading, isPartial } = other;
 | 
			
		||||
    other.updateCurrentlyViewing = this.updateCurrentlyViewingWithCache;
 | 
			
		||||
 | 
			
		||||
    if (isPartial) {
 | 
			
		||||
      return <RegenerationIndicator />;
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
import { connect } from 'react-redux';
 | 
			
		||||
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 { createSelector } from 'reselect';
 | 
			
		||||
import { debounce } from 'lodash';
 | 
			
		||||
@ -39,7 +39,6 @@ const makeMapStateToProps = () => {
 | 
			
		||||
    isPartial: state.getIn(['timelines', timelineId, 'isPartial'], false),
 | 
			
		||||
    hasMore:   state.getIn(['timelines', timelineId, 'hasMore']),
 | 
			
		||||
    numPending: getPendingStatusIds(state, { type: timelineId }).size,
 | 
			
		||||
    currentlyViewing: state.getIn(['timelines', timelineId, 'currentlyViewing'], -1),
 | 
			
		||||
  });
 | 
			
		||||
 | 
			
		||||
  return mapStateToProps;
 | 
			
		||||
@ -57,7 +56,6 @@ const mapDispatchToProps = (dispatch, { timelineId }) => ({
 | 
			
		||||
 | 
			
		||||
  onLoadPending: () => dispatch(loadPending(timelineId)),
 | 
			
		||||
 | 
			
		||||
  updateCurrentlyViewing: id => dispatch(updateCurrentlyViewing(timelineId, id)),
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
 | 
			
		||||
 | 
			
		||||
@ -9,7 +9,6 @@ import {
 | 
			
		||||
  TIMELINE_CONNECT,
 | 
			
		||||
  TIMELINE_DISCONNECT,
 | 
			
		||||
  TIMELINE_LOAD_PENDING,
 | 
			
		||||
  CURRENTLY_VIEWING,
 | 
			
		||||
} from '../actions/timelines';
 | 
			
		||||
import {
 | 
			
		||||
  ACCOUNT_BLOCK_SUCCESS,
 | 
			
		||||
@ -29,7 +28,6 @@ const initialTimeline = ImmutableMap({
 | 
			
		||||
  hasMore: true,
 | 
			
		||||
  pendingItems: ImmutableList(),
 | 
			
		||||
  items: ImmutableList(),
 | 
			
		||||
  currentlyViewing: -1,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => {
 | 
			
		||||
@ -170,8 +168,6 @@ export default function timelines(state = initialState, action) {
 | 
			
		||||
      initialTimeline,
 | 
			
		||||
      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:
 | 
			
		||||
    return state;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user