Optimize how statuses are re-rendered and relative time intervals

1 files changed, 44 insertions, 6 deletions

diff --git a/app/assets/javascripts/components/containers/status_container.jsx b/app/assets/javascripts/components/containers/status_container.jsx
index 5e0b489b3..2bcb7026c 100644
--- a/app/assets/javascripts/components/containers/status_container.jsx
+++ b/app/assets/javascripts/components/containers/status_container.jsx
@@ -13,13 +13,47 @@ import {
 }                        from '../actions/interactions';
 import { deleteStatus }  from '../actions/statuses';
 import { openMedia }     from '../actions/modal';
+import { createSelector } from 'reselect'
 
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
+const mapStateToProps = (state, props) => ({
+  statusBase: state.getIn(['statuses', props.id]),
+  me: state.getIn(['meta', 'me'])
+});
+
+const makeMapStateToPropsInner = () => {
+  const getStatus = (() => {
+    return createSelector(
+      [
+        (_, base)     => base,
+        (state, base) => (base ? state.getIn(['accounts', base.get('account')]) : null),
+        (state, base) => (base ? state.getIn(['statuses', base.get('reblog')], null) : null)
+      ],
+
+      (base, account, reblog) => (base ? base.set('account', account).set('reblog', reblog) : null)
+    );
+  })();
+
+  const mapStateToProps = (state, { statusBase }) => ({
+    status: getStatus(state, statusBase)
+  });
+
+  return mapStateToProps;
+};
+
+const makeMapStateToPropsLast = () => {
+  const getStatus = (() => {
+    return createSelector(
+      [
+        (_, status)     => status,
+        (state, status) => (status ? state.getIn(['accounts', status.getIn(['reblog', 'account'])], null) : null)
+      ],
+
+      (status, reblogAccount) => (status && status.get('reblog') ? status.setIn(['reblog', 'account'], reblogAccount) : status)
+    );
+  })();
 
-  const mapStateToProps = (state, props) => ({
-    status: getStatus(state, props.id),
-    me: state.getIn(['meta', 'me'])
+  const mapStateToProps = (state, { status }) => ({
+    status: getStatus(state, status)
   });
 
   return mapStateToProps;
@@ -61,4 +95,8 @@ const mapDispatchToProps = (dispatch) => ({
 
 });
 
-export default connect(makeMapStateToProps, mapDispatchToProps)(Status);
+export default connect(mapStateToProps, mapDispatchToProps)(
+  connect(makeMapStateToPropsInner)(
+    connect(makeMapStateToPropsLast)(Status)
+  )
+);