From 31f7c3fc5d9bf24fc79f3246a0de2cc907ecb34d Mon Sep 17 00:00:00 2001 From: Matt Panaro Date: Sat, 28 Dec 2019 23:39:48 -0500 Subject: Summary: fix slowness due to layout thrashing when reloading a large … (#12661) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Summary: fix slowness due to layout thrashing when reloading a large set of status updates in order to limit the maximum size of a status in a list view (e.g. the home timeline), so as to avoid having to scroll all the way through an abnormally large status update (see https://github.com/tootsuite/mastodon/pull/8205), the following steps are taken: •the element containing the status is rendered in the browser •its height is calculated, to determine if it exceeds the maximum height threshold. Unfortunately for performance, these steps are carried out in the componentDidMount(/Update) method, which also performs style modifications on the element. The combination of height request and style modification during javascript evaluation in the browser leads to layout-thrashing, where the elements are repeatedly re-laid-out (see https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing & https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers). The solution implemented here is to memoize the collapsed state in Redux the first time the status is seen (e.g. when fetched as part of a small batch, to populate the home timeline) , so that on subsequent re-renders, the value can be queried, rather than recalculated. This strategy is derived from https://github.com/tootsuite/mastodon/pull/4439 & https://github.com/tootsuite/mastodon/pull/4909, and should resolve https://github.com/tootsuite/mastodon/issues/12455. Andrew Lin (https://github.com/onethreeseven) is thanked for his assistance in root cause analysis and solution brainstorming * remove getSnapshotBeforeUpdate from status * remove componentWillUnmount from status * persist last-intersected status update and restore when ScrollableList is restored e.g. when navigating from home-timeline to a status conversational thread and ({ + type: CURRENTLY_VIEWING, + timeline, + id, +}); + export const loadPending = timeline => ({ type: TIMELINE_LOAD_PENDING, timeline, diff --git a/app/javascript/mastodon/components/intersection_observer_article.js b/app/javascript/mastodon/components/intersection_observer_article.js index e453730ba..d475e5d1c 100644 --- a/app/javascript/mastodon/components/intersection_observer_article.js +++ b/app/javascript/mastodon/components/intersection_observer_article.js @@ -20,6 +20,8 @@ export default class IntersectionObserverArticle extends React.Component { cachedHeight: PropTypes.number, onHeightChange: PropTypes.func, children: PropTypes.node, + currentlyViewing: PropTypes.number, + updateCurrentlyViewing: PropTypes.func, }; state = { @@ -48,6 +50,8 @@ export default class IntersectionObserverArticle extends React.Component { ); this.componentMounted = true; + + if(id === this.props.currentlyViewing) this.node.scrollIntoView(); } componentWillUnmount () { @@ -60,6 +64,8 @@ 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); } diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index 421756803..6338ccd5c 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -36,6 +36,8 @@ export default class ScrollableList extends PureComponent { emptyMessage: PropTypes.node, children: PropTypes.node, bindToDocument: PropTypes.bool, + currentlyViewing: PropTypes.number, + updateCurrentlyViewing: PropTypes.func, }; static defaultProps = { @@ -309,6 +311,8 @@ 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, diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index e120278a0..12fc4a9a6 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -76,6 +76,7 @@ class Status extends ImmutablePureComponent { onEmbed: PropTypes.func, onHeightChange: PropTypes.func, onToggleHidden: PropTypes.func, + onToggleCollapsed: PropTypes.func, muted: PropTypes.bool, hidden: PropTypes.bool, unread: PropTypes.bool, @@ -107,14 +108,6 @@ class Status extends ImmutablePureComponent { this.didShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card'); } - getSnapshotBeforeUpdate () { - if (this.props.getScrollPosition) { - return this.props.getScrollPosition(); - } else { - return null; - } - } - static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) { return { @@ -141,17 +134,6 @@ class Status extends ImmutablePureComponent { } } - componentWillUnmount() { - if (this.node && this.props.getScrollPosition) { - const position = this.props.getScrollPosition(); - if (position !== null && this.node.offsetTop < position.top) { - requestAnimationFrame(() => { - this.props.updateScrollBottom(position.height - position.top); - }); - } - } - } - handleToggleMediaVisibility = () => { this.setState({ showMedia: !this.state.showMedia }); } @@ -196,7 +178,11 @@ class Status extends ImmutablePureComponent { handleExpandedToggle = () => { this.props.onToggleHidden(this._properStatus()); - }; + } + + handleCollapsedToggle = isCollapsed => { + this.props.onToggleCollapsed(this._properStatus(), isCollapsed); + } renderLoadingMediaGallery () { return
; @@ -466,7 +452,7 @@ class Status extends ImmutablePureComponent {
- + {media} diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index d13091325..5d921fd41 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -23,11 +23,11 @@ export default class StatusContent extends React.PureComponent { onExpandedToggle: PropTypes.func, onClick: PropTypes.func, collapsable: PropTypes.bool, + onCollapsedToggle: PropTypes.func, }; state = { hidden: true, - collapsed: null, // `collapsed: null` indicates that an element doesn't need collapsing, while `true` or `false` indicates that it does (and is/isn't). }; _updateStatusLinks () { @@ -62,14 +62,16 @@ export default class StatusContent extends React.PureComponent { link.setAttribute('rel', 'noopener noreferrer'); } - if ( - this.props.collapsable - && this.props.onClick - && this.state.collapsed === null - && node.clientHeight > MAX_HEIGHT - && this.props.status.get('spoiler_text').length === 0 - ) { - this.setState({ collapsed: true }); + if (this.props.status.get('collapsed', null) === null) { + let collapsed = + this.props.collapsable + && this.props.onClick + && node.clientHeight > MAX_HEIGHT + && this.props.status.get('spoiler_text').length === 0; + + if(this.props.onCollapsedToggle) this.props.onCollapsedToggle(collapsed); + + this.props.status.set('collapsed', collapsed); } } @@ -178,6 +180,7 @@ export default class StatusContent extends React.PureComponent { } const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden; + const renderReadMore = this.props.onClick && status.get('collapsed'); const content = { __html: status.get('contentHtml') }; const spoilerContent = { __html: status.get('spoilerHtml') }; @@ -185,7 +188,7 @@ export default class StatusContent extends React.PureComponent { const classNames = classnames('status__content', { 'status__content--with-action': this.props.onClick && this.context.router, 'status__content--with-spoiler': status.get('spoiler_text').length > 0, - 'status__content--collapsed': this.state.collapsed === true, + 'status__content--collapsed': renderReadMore, }); if (isRtl(status.get('search_index'))) { @@ -237,7 +240,7 @@ export default class StatusContent extends React.PureComponent { , ]; - if (this.state.collapsed) { + if (renderReadMore) { output.push(readMoreButton); } diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index e1b370c91..82e069601 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -26,6 +26,8 @@ export default class StatusList extends ImmutablePureComponent { emptyMessage: PropTypes.node, alwaysPrepend: PropTypes.bool, timelineId: PropTypes.string, + currentlyViewing: PropTypes.number, + updateCurrentlyViewing: PropTypes.func, }; static defaultProps = { @@ -58,6 +60,12 @@ 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`); @@ -79,6 +87,7 @@ 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 ; diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js index 35c16a20c..2ba3a3123 100644 --- a/app/javascript/mastodon/containers/status_container.js +++ b/app/javascript/mastodon/containers/status_container.js @@ -23,6 +23,7 @@ import { deleteStatus, hideStatus, revealStatus, + toggleStatusCollapse, } from '../actions/statuses'; import { unmuteAccount, @@ -190,6 +191,10 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ } }, + onToggleCollapsed (status, isCollapsed) { + dispatch(toggleStatusCollapse(status.get('id'), isCollapsed)); + }, + onBlockDomain (domain) { dispatch(openModal('CONFIRM', { message: {domain} }} />, diff --git a/app/javascript/mastodon/features/ui/containers/status_list_container.js b/app/javascript/mastodon/features/ui/containers/status_list_container.js index 9f6cbf988..33af628ca 100644 --- a/app/javascript/mastodon/features/ui/containers/status_list_container.js +++ b/app/javascript/mastodon/features/ui/containers/status_list_container.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import StatusList from '../../../components/status_list'; -import { scrollTopTimeline, loadPending } from '../../../actions/timelines'; +import { scrollTopTimeline, loadPending, updateCurrentlyViewing } from '../../../actions/timelines'; import { Map as ImmutableMap, List as ImmutableList } from 'immutable'; import { createSelector } from 'reselect'; import { debounce } from 'lodash'; @@ -39,6 +39,7 @@ 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; @@ -56,6 +57,7 @@ const mapDispatchToProps = (dispatch, { timelineId }) => ({ onLoadPending: () => dispatch(loadPending(timelineId)), + updateCurrentlyViewing: id => dispatch(updateCurrentlyViewing(timelineId, id)), }); export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList); diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js index 772f98bcb..398a48cff 100644 --- a/app/javascript/mastodon/reducers/statuses.js +++ b/app/javascript/mastodon/reducers/statuses.js @@ -12,6 +12,7 @@ import { STATUS_UNMUTE_SUCCESS, STATUS_REVEAL, STATUS_HIDE, + STATUS_COLLAPSE, } from '../actions/statuses'; import { TIMELINE_DELETE } from '../actions/timelines'; import { STATUS_IMPORT, STATUSES_IMPORT } from '../actions/importer'; @@ -73,6 +74,8 @@ export default function statuses(state = initialState, action) { } }); }); + case STATUS_COLLAPSE: + return state.setIn([action.id, 'collapsed'], action.isCollapsed); case TIMELINE_DELETE: return deleteStatus(state, action.id, action.references); default: diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 0d7222e10..970db425e 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -9,6 +9,7 @@ import { TIMELINE_CONNECT, TIMELINE_DISCONNECT, TIMELINE_LOAD_PENDING, + CURRENTLY_VIEWING, } from '../actions/timelines'; import { ACCOUNT_BLOCK_SUCCESS, @@ -28,6 +29,7 @@ const initialTimeline = ImmutableMap({ hasMore: true, pendingItems: ImmutableList(), items: ImmutableList(), + currentlyViewing: -1, }); const expandNormalizedTimeline = (state, timeline, statuses, next, isPartial, isLoadingRecent, usePendingItems) => { @@ -168,6 +170,8 @@ 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; } -- cgit From 0e8c0287d01d270238aeb7f25c6337b2bcb8afba Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Mon, 30 Dec 2019 00:59:25 +0900 Subject: Fix shortNumberFormat to within 3 chars without units (#12706) --- app/javascript/mastodon/utils/numbers.js | 8 ++++++-- app/javascript/styles/mastodon/components.scss | 4 ++-- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/utils/numbers.js b/app/javascript/mastodon/utils/numbers.js index f7e4ceb93..af18dcfdd 100644 --- a/app/javascript/mastodon/utils/numbers.js +++ b/app/javascript/mastodon/utils/numbers.js @@ -4,9 +4,13 @@ import { FormattedNumber } from 'react-intl'; export const shortNumberFormat = number => { if (number < 1000) { return ; - } else if (number < 1000000) { + } else if (number < 10000) { return K; - } else { + } else if (number < 1000000) { + return K; + } else if (number < 10000000) { return M; + } else { + return M; } }; diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 4c7ce9ba7..7121030d2 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -6399,13 +6399,13 @@ noscript { &__links { font-size: 14px; color: $darker-text-color; + padding: 10px 0; a { display: inline-block; color: $darker-text-color; text-decoration: none; - padding: 10px; - padding-top: 20px; + padding: 5px 10px; font-weight: 500; strong { -- cgit From ca78b1473ec6ea10ea0b42916dc1240371437027 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 30 Dec 2019 03:55:11 +0100 Subject: Fix undefined error regression in status component in web UI (#12712) Regression from #12661 --- app/javascript/mastodon/components/status.js | 20 -------------------- 1 file changed, 20 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index 12fc4a9a6..0dc00cb98 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -103,11 +103,6 @@ class Status extends ImmutablePureComponent { statusId: undefined, }; - // Track height changes we know about to compensate scrolling - componentDidMount () { - this.didShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card'); - } - static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) { return { @@ -119,21 +114,6 @@ class Status extends ImmutablePureComponent { } } - // Compensate height changes - componentDidUpdate (prevProps, prevState, snapshot) { - const doShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card'); - - if (doShowCard && !this.didShowCard) { - this.didShowCard = true; - - if (snapshot !== null && this.props.updateScrollBottom) { - if (this.node && this.node.offsetTop < snapshot.top) { - this.props.updateScrollBottom(snapshot.height - snapshot.top); - } - } - } - } - handleToggleMediaVisibility = () => { this.setState({ showMedia: !this.state.showMedia }); } -- cgit From 2a5da8c9613b0ef6659edc60831b4fe8e84f3fc8 Mon Sep 17 00:00:00 2001 From: Matt Panaro Date: Tue, 31 Dec 2019 15:39:25 -0500 Subject: refactor IntersectionObserver to observe viewport in single-column mode (#12735) --- app/javascript/mastodon/components/scrollable_list.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index 6338ccd5c..e4adabb36 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -210,10 +210,13 @@ export default class ScrollableList extends PureComponent { } attachIntersectionObserver () { - this.intersectionObserverWrapper.connect({ + let nodeOptions = { root: this.node, rootMargin: '300% 0px', - }); + }; + + this.intersectionObserverWrapper + .connect(this.props.bindToDocument ? {} : nodeOptions); } detachIntersectionObserver () { -- cgit From 9cbbc50fcdfe2ec852107b1757d92d54b862a91a Mon Sep 17 00:00:00 2001 From: Matt Panaro Date: Thu, 2 Jan 2020 16:46:42 -0500 Subject: 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 --- app/javascript/mastodon/actions/timelines.js | 8 -------- .../mastodon/components/intersection_observer_article.js | 6 ------ app/javascript/mastodon/components/scrollable_list.js | 4 ---- app/javascript/mastodon/components/status_list.js | 9 --------- .../mastodon/features/ui/containers/status_list_container.js | 4 +--- app/javascript/mastodon/reducers/timelines.js | 4 ---- 6 files changed, 1 insertion(+), 34 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js index 1a634b55d..bc2ac5e82 100644 --- a/app/javascript/mastodon/actions/timelines.js +++ b/app/javascript/mastodon/actions/timelines.js @@ -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, diff --git a/app/javascript/mastodon/components/intersection_observer_article.js b/app/javascript/mastodon/components/intersection_observer_article.js index d475e5d1c..e453730ba 100644 --- a/app/javascript/mastodon/components/intersection_observer_article.js +++ b/app/javascript/mastodon/components/intersection_observer_article.js @@ -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); } diff --git a/app/javascript/mastodon/components/scrollable_list.js b/app/javascript/mastodon/components/scrollable_list.js index e4adabb36..47a87b149 100644 --- a/app/javascript/mastodon/components/scrollable_list.js +++ b/app/javascript/mastodon/components/scrollable_list.js @@ -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, diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index 82e069601..e1b370c91 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -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 ; diff --git a/app/javascript/mastodon/features/ui/containers/status_list_container.js b/app/javascript/mastodon/features/ui/containers/status_list_container.js index 33af628ca..9f6cbf988 100644 --- a/app/javascript/mastodon/features/ui/containers/status_list_container.js +++ b/app/javascript/mastodon/features/ui/containers/status_list_container.js @@ -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); diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js index 970db425e..0d7222e10 100644 --- a/app/javascript/mastodon/reducers/timelines.js +++ b/app/javascript/mastodon/reducers/timelines.js @@ -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; } -- cgit