Improve compose form performance, upgrade JS dependencies. LightingBox

now allows to cycle through multiple images

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

@@ -1,26 +1,29 @@
 import { connect } from 'react-redux';
 import ComposeForm from '../components/compose_form';
+import { createSelector } from 'reselect';
 import {
   changeCompose,
   submitCompose,
   clearComposeSuggestions,
   fetchComposeSuggestions,
   selectComposeSuggestion,
-  changeComposeSensitivity,
-  changeComposeSpoilerness,
   changeComposeSpoilerText,
-  changeComposeVisibility,
-  changeComposeListability
 } from '../../../actions/compose';
 
+const getMentionedUsernames = createSelector(state => state.getIn(['compose', 'text']), text => text.match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig));
+
+const getMentionedDomains = createSelector(getMentionedUsernames, mentionedUsernamesWithDomains => {
+  return mentionedUsernamesWithDomains !== null ? [...new Set(mentionedUsernamesWithDomains.map(item => item.split('@')[2]))] : [];
+});
+
 const mapStateToProps = (state, props) => {
-  const mentionedUsernamesWithDomains = state.getIn(['compose', 'text']).match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig);
+  const mentionedUsernames = getMentionedUsernames(state);
+  const mentionedUsernamesWithDomains = getMentionedDomains(state);
 
   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'], ),
@@ -30,10 +33,9 @@ const mapStateToProps = (state, props) => {
     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]))] : []
+    needsPrivacyWarning: state.getIn(['compose', 'private']) && mentionedUsernames !== null,
+    mentionedDomains: mentionedUsernamesWithDomains
   };
 };
 
@@ -59,22 +61,10 @@ const mapDispatchToProps = (dispatch) => ({
     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/private_toggle_container.jsx

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import PrivateToggle from '../components/private_toggle';
+import { changeComposeVisibility } from '../../../actions/compose';
+
+const mapStateToProps = state => ({
+  isPrivate: state.getIn(['compose', 'private'])
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (e) {
+    dispatch(changeComposeVisibility(e.target.checked));
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PrivateToggle);

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

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import SensitiveToggle from '../components/sensitive_toggle';
+import { changeComposeSensitivity } from '../../../actions/compose';
+
+const mapStateToProps = state => ({
+  hasMedia: state.getIn(['compose', 'media_attachments']).size > 0,
+  isSensitive: state.getIn(['compose', 'sensitive'])
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (e) {
+    dispatch(changeComposeSensitivity(e.target.checked));
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SensitiveToggle);

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

@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import SpoilerToggle from '../components/spoiler_toggle';
+import { changeComposeSpoilerness } from '../../../actions/compose';
+
+const mapStateToProps = state => ({
+  isSpoiler: state.getIn(['compose', 'spoiler'])
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (e) {
+    dispatch(changeComposeSpoilerness(e.target.checked));
+  }
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(SpoilerToggle);