bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'fixes/improve-detailed-status-perfs' into 'develop'

Browse source 
Memoize ancestorIds and descendantIds in detailed status view

See merge request soapbox-pub/soapbox-fe!656
This commit is contained in:
Alex Gleason 2021-08-03 14:55:36 +00:00
commit 249c76ffaa
1 changed files with 44 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
app/soapbox/features/status/index.js
View file

@ -41,6 +41,7 @@ import StatusContainer from '../../containers/status_container';
import { openModal } from '../../actions/modal'; import { openModal } from '../../actions/modal';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { createSelector } from 'reselect';
import { HotKeys } from 'react-hotkeys'; import { HotKeys } from 'react-hotkeys';
import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen'; import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
import { textForScreenReader, defaultMediaVisibility } from '../../components/status'; import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
@ -66,43 +67,54 @@ const messages = defineMessages({
const makeMapStateToProps = () => { const makeMapStateToProps = () => {
const getStatus = makeGetStatus(); const getStatus = makeGetStatus();
const mapStateToProps = (state, props) => { const getAncestorsIds = createSelector([
const status = getStatus(state, { (_, { id }) => id,
id: props.params.statusId, state => state.getIn(['contexts', 'inReplyTos']),
username: props.params.username, ], (statusId, inReplyTos) => {
}); let ancestorsIds = Immutable.OrderedSet();
let id = statusId;
while (id) {
ancestorsIds = Immutable.OrderedSet([id]).union(ancestorsIds);
id = inReplyTos.get(id);
}
return ancestorsIds;
});
const getDescendantsIds = createSelector([
(_, { id }) => id,
state => state.getIn(['contexts', 'replies']),
], (statusId, contextReplies) => {
let descendantsIds = Immutable.OrderedSet();
const ids = [statusId];
while (ids.length > 0) {
let id = ids.shift();
const replies = contextReplies.get(id);
if (statusId !== id) {
descendantsIds = descendantsIds.union([id]);
}
if (replies) {
replies.reverse().forEach(reply => {
ids.unshift(reply);
});
}
}
return descendantsIds;
});
const mapStateToProps = (state, props) => {
const status = getStatus(state, { id: props.params.statusId });
let ancestorsIds = Immutable.List(); let ancestorsIds = Immutable.List();
let descendantsIds = Immutable.List(); let descendantsIds = Immutable.List();
if (status) { if (status) {
ancestorsIds = ancestorsIds.withMutations(mutable => { ancestorsIds = getAncestorsIds(state, { id: state.getIn(['contexts', 'inReplyTos', status.get('id')]) });
let id = state.getIn(['contexts', 'inReplyTos', status.get('id')]); descendantsIds = getDescendantsIds(state, { id: status.get('id') });
while (id) {
mutable.unshift(id);
id = state.getIn(['contexts', 'inReplyTos', id]);
}
});
descendantsIds = descendantsIds.withMutations(mutable => {
const ids = [status.get('id')];
while (ids.length > 0) {
let id = ids.shift();
const replies = state.getIn(['contexts', 'replies', id]);
if (status.get('id') !== id) {
mutable.push(id);
}
if (replies) {
replies.reverse().forEach(reply => {
ids.unshift(reply);
});
}
}
});
} }
const soapbox = getSoapboxConfig(state); const soapbox = getSoapboxConfig(state);