diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index a9be9c751..76a5117bc 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/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 { - 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} /> diff --git a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js b/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js index 4716d9435..f4161aa8f 100644 --- a/app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js +++ b/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)); }, diff --git a/app/javascript/flavours/glitch/features/compose/containers/options_container.js b/app/javascript/flavours/glitch/features/compose/containers/options_container.js new file mode 100644 index 000000000..e846cfbd5 --- /dev/null +++ b/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);