Add OptionsContainer

app/javascript/flavours/glitch/features/compose/components/compose_form.js

@@ -5,7 +5,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
-import Options from './options';
+import OptionsContainer from '../containers/options_container';
 import ComposerPublisher from '../../composer/publisher';
 import TextareaIcons from './textarea_icons';
 import UploadFormContainer from '../containers/upload_form_container';
@@ -39,7 +39,6 @@ class ComposeForm extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
 
     //  State props.
-    acceptContentTypes: PropTypes.string,
     advancedOptions: ImmutablePropTypes.map,
     amUnlocked: PropTypes.bool,
     focusDate: PropTypes.instanceOf(Date),
@@ -51,7 +50,6 @@ class ComposeForm extends ImmutablePureComponent {
     media: ImmutablePropTypes.list,
     preselectDate: PropTypes.instanceOf(Date),
     privacy: PropTypes.string,
-    resetFileKey: PropTypes.number,
     sideArm: PropTypes.string,
     sensitive: PropTypes.bool,
     showSearch: PropTypes.bool,
@@ -66,19 +64,14 @@ class ComposeForm extends ImmutablePureComponent {
     preselectOnReply: PropTypes.bool,
 
     //  Dispatch props.
-    onChangeAdvancedOption: PropTypes.func,
-    onChangeSensitivity: PropTypes.func,
     onChangeSpoilerText: PropTypes.func,
     onChangeSpoilerness: PropTypes.func,
     onChangeText: PropTypes.func,
     onChangeVisibility: PropTypes.func,
     onClearSuggestions: PropTypes.func,
-    onCloseModal: PropTypes.func,
     onFetchSuggestions: PropTypes.func,
     onInsertEmoji: PropTypes.func,
     onMount: PropTypes.func,
-    onOpenActionsModal: PropTypes.func,
-    onOpenDoodleModal: PropTypes.func,
     onSelectSuggestion: PropTypes.func,
     onSubmit: PropTypes.func,
     onUnmount: PropTypes.func,
@@ -285,7 +278,6 @@ class ComposeForm extends ImmutablePureComponent {
       handleRefTextarea,
     } = this;
     const {
-      acceptContentTypes,
       advancedOptions,
       amUnlocked,
       anyMedia,
@@ -295,21 +287,13 @@ class ComposeForm extends ImmutablePureComponent {
       isUploading,
       layout,
       media,
-      poll,
-      onChangeAdvancedOption,
-      onChangeSensitivity,
       onChangeSpoilerness,
       onChangeText,
       onChangeVisibility,
-      onTogglePoll,
       onClearSuggestions,
-      onCloseModal,
       onFetchSuggestions,
-      onOpenActionsModal,
-      onOpenDoodleModal,
       onUpload,
       privacy,
-      resetFileKey,
       sensitive,
       showSearch,
       sideArm,
@@ -372,27 +356,13 @@ class ComposeForm extends ImmutablePureComponent {
           <PollFormContainer />
         </div>
 
-        <Options
-          acceptContentTypes={acceptContentTypes}
+        <OptionsContainer
           advancedOptions={advancedOptions}
           disabled={isSubmitting}
-          allowMedia={!poll && (media ? media.size < 4 && !media.some(
-              item => item.get('type') === 'video'
-            ) : true)}
-          hasMedia={media && !!media.size}
-          allowPoll={!(media && !!media.size)}
-          hasPoll={!!poll}
-          onChangeAdvancedOption={onChangeAdvancedOption}
-          onChangeSensitivity={onChangeSensitivity}
           onChangeVisibility={onChangeVisibility}
-          onTogglePoll={onTogglePoll}
-          onDoodleOpen={onOpenDoodleModal}
-          onModalClose={onCloseModal}
-          onModalOpen={onOpenActionsModal}
           onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
           onUpload={onUpload}
           privacy={privacy}
-          resetFileKey={resetFileKey}
           sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
           spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
         />

app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js

@@ -2,8 +2,6 @@ import { connect } from 'react-redux';
 import ComposeForm from '../components/compose_form';
 import {
   changeCompose,
-  changeComposeAdvancedOption,
-  changeComposeSensitivity,
   changeComposeSpoilerText,
   changeComposeSpoilerness,
   changeComposeVisibility,
@@ -17,11 +15,9 @@ import {
   uploadCompose,
 } from 'flavours/glitch/actions/compose';
 import {
-  closeModal,
   openModal,
 } from 'flavours/glitch/actions/modal';
 import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
-import { addPoll, removePoll } from 'flavours/glitch/actions/compose';
 
 import { privacyPreference } from 'flavours/glitch/util/privacy_preference';
 import { me } from 'flavours/glitch/util/initial_state';
@@ -52,7 +48,6 @@ function mapStateToProps (state) {
   }
   sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy;
   return {
-    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','),
     advancedOptions: state.getIn(['compose', 'advanced_options']),
     amUnlocked: !state.getIn(['accounts', me, 'locked']),
     focusDate: state.getIn(['compose', 'focusDate']),
@@ -64,7 +59,6 @@ function mapStateToProps (state) {
     media: state.getIn(['compose', 'media_attachments']),
     preselectDate: state.getIn(['compose', 'preselectDate']),
     privacy: state.getIn(['compose', 'privacy']),
-    resetFileKey: state.getIn(['compose', 'resetFileKey']),
     sideArm: sideArmPrivacy,
     sensitive: state.getIn(['compose', 'sensitive']),
     showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
@@ -74,7 +68,6 @@ function mapStateToProps (state) {
     suggestions: state.getIn(['compose', 'suggestions']),
     text: state.getIn(['compose', 'text']),
     anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
-    poll: state.getIn(['compose', 'poll']),
     spoilersAlwaysOn: spoilersAlwaysOn,
     mediaDescriptionConfirmation: state.getIn(['local_settings', 'confirm_missing_media_description']),
     preselectOnReply: state.getIn(['local_settings', 'preselect_on_reply']),
@@ -83,12 +76,6 @@ function mapStateToProps (state) {
 
 //  Dispatch mapping.
 const mapDispatchToProps = (dispatch, { intl }) => ({
-  onChangeAdvancedOption(option, value) {
-    dispatch(changeComposeAdvancedOption(option, value));
-  },
-  onChangeSensitivity() {
-    dispatch(changeComposeSensitivity());
-  },
   onChangeSpoilerText(text) {
     dispatch(changeComposeSpoilerText(text));
   },
@@ -101,21 +88,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   onChangeVisibility(value) {
     dispatch(changeComposeVisibility(value));
   },
-  onTogglePoll() {
-    dispatch((_, getState) => {
-      if (getState().getIn(['compose', 'poll'])) {
-        dispatch(removePoll());
-      } else {
-        dispatch(addPoll());
-      }
-    });
-  },
   onClearSuggestions() {
     dispatch(clearComposeSuggestions());
   },
-  onCloseModal() {
-    dispatch(closeModal());
-  },
   onFetchSuggestions(token) {
     dispatch(fetchComposeSuggestions(token));
   },
@@ -125,12 +100,6 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   onMount() {
     dispatch(mountCompose());
   },
-  onOpenActionsModal(props) {
-    dispatch(openModal('ACTIONS', props));
-  },
-  onOpenDoodleModal() {
-    dispatch(openModal('DOODLE', { noEsc: true }));
-  },
   onSelectSuggestion(position, token, suggestion) {
     dispatch(selectComposeSuggestion(position, token, suggestion));
   },

app/javascript/flavours/glitch/features/compose/containers/options_container.js

@@ -0,0 +1,57 @@
+import { connect } from 'react-redux';
+import Options from '../components/options';
+import {
+  changeComposeAdvancedOption,
+  changeComposeSensitivity,
+} from 'flavours/glitch/actions/compose';
+import { addPoll, removePoll } from 'flavours/glitch/actions/compose';
+import { closeModal, openModal } from 'flavours/glitch/actions/modal';
+
+function mapStateToProps (state) {
+  const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']);
+  const poll = state.getIn(['compose', 'poll']);
+  const media = state.getIn(['compose', 'media_attachments']);
+  return {
+    acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']).toArray().join(','),
+    resetFileKey: state.getIn(['compose', 'resetFileKey']),
+    hasPoll: !!poll,
+    allowMedia: !poll && (media ? media.size < 4 && !media.some(item => item.get('type') === 'video') : true),
+    hasMedia: media && !!media.size,
+    allowPoll: !(media && !!media.size),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+
+  onChangeAdvancedOption(option, value) {
+    dispatch(changeComposeAdvancedOption(option, value));
+  },
+
+  onChangeSensitivity() {
+    dispatch(changeComposeSensitivity());
+  },
+
+  onTogglePoll() {
+    dispatch((_, getState) => {
+      if (getState().getIn(['compose', 'poll'])) {
+        dispatch(removePoll());
+      } else {
+        dispatch(addPoll());
+      }
+    });
+  },
+
+  onDoodleOpen() {
+    dispatch(openModal('DOODLE', { noEsc: true }));
+  },
+
+  onModalClose() {
+    dispatch(closeModal());
+  },
+
+  onModalOpen(props) {
+    dispatch(openModal('ACTIONS', props));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Options);