Improve performance of compose form

app/assets/javascripts/components/features/compose/containers/compose_form_container.jsx

@@ -3,7 +3,6 @@ import ComposeForm from '../components/compose_form';
 import {
   changeCompose,
   submitCompose,
-  cancelReplyCompose,
   clearComposeSuggestions,
   fetchComposeSuggestions,
   selectComposeSuggestion,
@@ -13,83 +12,69 @@ import {
   changeComposeVisibility,
   changeComposeListability
 } from '../../../actions/compose';
-import { makeGetStatus } from '../../../selectors';
 
-const makeMapStateToProps = () => {
-  const getStatus = makeGetStatus();
+const mapStateToProps = (state, props) => {
+  const mentionedUsernamesWithDomains = state.getIn(['compose', 'text']).match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig);
 
-  const mapStateToProps = function (state, props) {
-    const mentionedUsernamesWithDomains = state.getIn(['compose', 'text']).match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig);
-
-    return {
-      text: state.getIn(['compose', 'text']),
-      suggestion_token: state.getIn(['compose', 'suggestion_token']),
-      suggestions: state.getIn(['compose', 'suggestions']),
-      sensitive: state.getIn(['compose', 'sensitive']),
-      spoiler: state.getIn(['compose', 'spoiler']),
-      spoiler_text: state.getIn(['compose', 'spoiler_text']),
-      unlisted: state.getIn(['compose', 'unlisted'], ),
-      private: state.getIn(['compose', 'private']),
-      fileDropDate: state.getIn(['compose', 'fileDropDate']),
-      is_submitting: state.getIn(['compose', 'is_submitting']),
-      is_uploading: state.getIn(['compose', 'is_uploading']),
-      in_reply_to: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
-      media_count: state.getIn(['compose', 'media_attachments']).size,
-      me: state.getIn(['compose', 'me']),
-      needsPrivacyWarning: state.getIn(['compose', 'private']) && mentionedUsernamesWithDomains !== null,
-      mentionedDomains: mentionedUsernamesWithDomains !== null ? [...new Set(mentionedUsernamesWithDomains.map(item => item.split('@')[2]))] : []
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = function (dispatch) {
   return {
-    onChange (text) {
-      dispatch(changeCompose(text));
-    },
-
-    onSubmit () {
-      dispatch(submitCompose());
-    },
-
-    onCancelReply () {
-      dispatch(cancelReplyCompose());
-    },
-
-    onClearSuggestions () {
-      dispatch(clearComposeSuggestions());
-    },
-
-    onFetchSuggestions (token) {
-      dispatch(fetchComposeSuggestions(token));
-    },
-
-    onSuggestionSelected (position, token, accountId) {
-      dispatch(selectComposeSuggestion(position, token, accountId));
-    },
-
-    onChangeSensitivity (checked) {
-      dispatch(changeComposeSensitivity(checked));
-    },
-
-    onChangeSpoilerness (checked) {
-      dispatch(changeComposeSpoilerness(checked));
-    },
-
-    onChangeSpoilerText (checked) {
-      dispatch(changeComposeSpoilerText(checked));
-    },
-
-    onChangeVisibility (checked) {
-      dispatch(changeComposeVisibility(checked));
-    },
-
-    onChangeListability (checked) {
-      dispatch(changeComposeListability(checked));
-    }
-  }
+    text: state.getIn(['compose', 'text']),
+    suggestion_token: state.getIn(['compose', 'suggestion_token']),
+    suggestions: state.getIn(['compose', 'suggestions']),
+    sensitive: state.getIn(['compose', 'sensitive']),
+    spoiler: state.getIn(['compose', 'spoiler']),
+    spoiler_text: state.getIn(['compose', 'spoiler_text']),
+    unlisted: state.getIn(['compose', 'unlisted'], ),
+    private: state.getIn(['compose', 'private']),
+    fileDropDate: state.getIn(['compose', 'fileDropDate']),
+    focusDate: state.getIn(['compose', 'focusDate']),
+    preselectDate: state.getIn(['compose', 'preselectDate']),
+    is_submitting: state.getIn(['compose', 'is_submitting']),
+    is_uploading: state.getIn(['compose', 'is_uploading']),
+    media_count: state.getIn(['compose', 'media_attachments']).size,
+    me: state.getIn(['compose', 'me']),
+    needsPrivacyWarning: state.getIn(['compose', 'private']) && mentionedUsernamesWithDomains !== null,
+    mentionedDomains: mentionedUsernamesWithDomains !== null ? [...new Set(mentionedUsernamesWithDomains.map(item => item.split('@')[2]))] : []
+  };
 };
 
-export default connect(makeMapStateToProps, mapDispatchToProps)(ComposeForm);
+const mapDispatchToProps = (dispatch) => ({
+
+  onChange (text) {
+    dispatch(changeCompose(text));
+  },
+
+  onSubmit () {
+    dispatch(submitCompose());
+  },
+
+  onClearSuggestions () {
+    dispatch(clearComposeSuggestions());
+  },
+
+  onFetchSuggestions (token) {
+    dispatch(fetchComposeSuggestions(token));
+  },
+
+  onSuggestionSelected (position, token, accountId) {
+    dispatch(selectComposeSuggestion(position, token, accountId));
+  },
+
+  onChangeSensitivity (checked) {
+    dispatch(changeComposeSensitivity(checked));
+  },
+
+  onChangeSpoilerness (checked) {
+    dispatch(changeComposeSpoilerness(checked));
+  },
+
+  onChangeSpoilerText (checked) {
+    dispatch(changeComposeSpoilerText(checked));
+  },
+
+  onChangeVisibility (checked) {
+    dispatch(changeComposeVisibility(checked));
+  },
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);

app/assets/javascripts/components/features/compose/containers/reply_indicator_container.jsx

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import { cancelReplyCompose } from '../../../actions/compose';
+import { makeGetStatus } from '../../../selectors';
+import ReplyIndicator from '../components/reply_indicator';
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = (state, props) => ({
+    status: getStatus(state, state.getIn(['compose', 'in_reply_to'])),
+  });
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = dispatch => ({
+
+  onCancel () {
+    dispatch(cancelReplyCompose());
+  }
+
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(ReplyIndicator);

app/assets/javascripts/components/features/compose/containers/unlisted_toggle_container.jsx

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux';
+import UnlistedToggle from '../components/unlisted_toggle';
+import { makeGetStatus } from '../../../selectors';
+import { changeComposeListability } from '../../../actions/compose';
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = state => {
+    const status = getStatus(state, state.getIn(['compose', 'in_reply_to']));
+    const me     = state.getIn(['compose', 'me']);
+
+    return {
+      isPrivate: state.getIn(['compose', 'private']),
+      isUnlisted: state.getIn(['compose', 'unlisted']),
+      isReplyToOther: status ? status.getIn(['account', 'id']) !== me : false
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = dispatch => ({
+
+  onChangeListability (e) {
+    dispatch(changeComposeListability(e.target.checked));
+  }
+
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(UnlistedToggle);