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

Memoize ancestorIds and descendantIds in detailed status view

See merge request soapbox-pub/soapbox-fe!656

app/soapbox/features/status/index.js

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