Fix privacy dropdown in boost modal on mobile (#1967)

Fixes #1965

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

@@ -356,10 +356,8 @@ class ComposeForm extends ImmutablePureComponent {
           <OptionsContainer
             advancedOptions={advancedOptions}
             disabled={isSubmitting}
-            onChangeVisibility={onChangeVisibility}
             onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
             onUpload={onPaste}
-            privacy={privacy}
             isEditing={isEditing}
             sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
             spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}

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

@@ -9,13 +9,13 @@ import IconButton from 'flavours/glitch/components/icon_button';
 import DropdownMenu from './dropdown_menu';
 
 //  Utils.
-import { isUserTouching } from 'flavours/glitch/is_mobile';
 import { assignHandlers } from 'flavours/glitch/utils/react_helpers';
 
 //  The component.
 export default class ComposerOptionsDropdown extends React.PureComponent {
 
   static propTypes = {
+    isUserTouching: PropTypes.func,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
     items: PropTypes.arrayOf(PropTypes.shape({
@@ -49,7 +49,7 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
     const { onModalOpen } = this.props;
     const { open } = this.state;
 
-    if (isUserTouching()) {
+    if (this.props.isUserTouching && this.props.isUserTouching()) {
       if (this.state.open) {
         this.props.onModalClose();
       } else {

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

@@ -10,8 +10,8 @@ import { connect } from 'react-redux';
 //  Components.
 import IconButton from 'flavours/glitch/components/icon_button';
 import TextIconButton from './text_icon_button';
-import Dropdown from './dropdown';
-import PrivacyDropdown from './privacy_dropdown';
+import DropdownContainer from '../containers/dropdown_container';
+import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import LanguageDropdown from '../containers/language_dropdown_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -126,15 +126,11 @@ class ComposerOptions extends ImmutablePureComponent {
     hasPoll: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     onChangeAdvancedOption: PropTypes.func,
-    onChangeVisibility: PropTypes.func,
     onChangeContentType: PropTypes.func,
     onTogglePoll: PropTypes.func,
     onDoodleOpen: PropTypes.func,
-    onModalClose: PropTypes.func,
-    onModalOpen: PropTypes.func,
     onToggleSpoiler: PropTypes.func,
     onUpload: PropTypes.func,
-    privacy: PropTypes.string,
     contentType: PropTypes.string,
     resetFileKey: PropTypes.number,
     spoiler: PropTypes.bool,
@@ -195,12 +191,8 @@ class ComposerOptions extends ImmutablePureComponent {
       hasPoll,
       onChangeAdvancedOption,
       onChangeContentType,
-      onChangeVisibility,
       onTogglePoll,
-      onModalClose,
-      onModalOpen,
       onToggleSpoiler,
-      privacy,
       resetFileKey,
       spoiler,
       showContentTypeChoice,
@@ -239,7 +231,7 @@ class ComposerOptions extends ImmutablePureComponent {
           multiple
           style={{ display: 'none' }}
         />
-        <Dropdown
+        <DropdownContainer
           disabled={disabled || !allowMedia}
           icon='paperclip'
           items={[
@@ -255,8 +247,6 @@ class ComposerOptions extends ImmutablePureComponent {
             },
           ]}
           onChange={this.handleClickAttach}
-          onModalClose={onModalClose}
-          onModalOpen={onModalOpen}
           title={formatMessage(messages.attach)}
         />
         {!!pollLimits && (
@@ -275,15 +265,9 @@ class ComposerOptions extends ImmutablePureComponent {
           />
         )}
         <hr />
-        <PrivacyDropdown
-          disabled={disabled || isEditing}
-          onChange={onChangeVisibility}
-          onModalClose={onModalClose}
-          onModalOpen={onModalOpen}
-          value={privacy}
-        />
+        <PrivacyDropdownContainer disabled={disabled || isEditing} />
         {showContentTypeChoice && (
-          <Dropdown
+          <DropdownContainer
             disabled={disabled}
             icon={(contentTypeItems[contentType.split('/')[1]] || {}).icon}
             items={[
@@ -292,8 +276,6 @@ class ComposerOptions extends ImmutablePureComponent {
               contentTypeItems.markdown,
             ]}
             onChange={onChangeContentType}
-            onModalClose={onModalClose}
-            onModalOpen={onModalOpen}
             title={formatMessage(messages.content_type)}
             value={contentType}
           />
@@ -308,7 +290,7 @@ class ComposerOptions extends ImmutablePureComponent {
           />
         )}
         <LanguageDropdown />
-        <Dropdown
+        <DropdownContainer
           disabled={disabled || isEditing}
           icon='ellipsis-h'
           items={advancedOptions ? [
@@ -325,8 +307,6 @@ class ComposerOptions extends ImmutablePureComponent {
           ] : null}
           onChange={onChangeAdvancedOption}
           renderItemContents={this.renderToggleItemContents}
-          onModalClose={onModalClose}
-          onModalOpen={onModalOpen}
           title={formatMessage(messages.advanced_options_icon_title)}
           closeOnChange={false}
         />

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

@@ -32,7 +32,7 @@ class PrivacyDropdown extends React.PureComponent {
   };
 
   render () {
-    const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, intl: { formatMessage } } = this.props;
+    const { value, onChange, onModalOpen, onModalClose, disabled, noDirect, container, isUserTouching, intl: { formatMessage } } = this.props;
 
     //  We predefine our privacy items so that we can easily pick the
     //  dropdown icon later.
@@ -75,6 +75,7 @@ class PrivacyDropdown extends React.PureComponent {
         icon={(privacyItems[value] || {}).icon}
         items={items}
         onChange={onChange}
+        isUserTouching={isUserTouching}
         onModalClose={onModalClose}
         onModalOpen={onModalOpen}
         title={formatMessage(messages.change_privacy)}

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

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { isUserTouching } from 'flavours/glitch/is_mobile';
+import { openModal, closeModal } from 'flavours/glitch/actions/modal';
+import Dropdown from '../components/dropdown';
+
+const mapDispatchToProps = dispatch => ({
+  isUserTouching,
+  onModalOpen: props => dispatch(openModal('ACTIONS', props)),
+  onModalClose: () => dispatch(closeModal()),
+});
+
+export default connect(null, mapDispatchToProps)(Dropdown);

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

@@ -6,7 +6,7 @@ import {
   addPoll,
   removePoll,
 } from 'flavours/glitch/actions/compose';
-import { closeModal, openModal } from 'flavours/glitch/actions/modal';
+import { openModal } from 'flavours/glitch/actions/modal';
 
 function mapStateToProps (state) {
   const spoilersAlwaysOn = state.getIn(['local_settings', 'always_show_spoilers_field']);
@@ -48,14 +48,6 @@ const mapDispatchToProps = (dispatch) => ({
   onDoodleOpen() {
     dispatch(openModal('DOODLE', { noEsc: true }));
   },
-
-  onModalClose() {
-    dispatch(closeModal());
-  },
-
-  onModalOpen(props) {
-    dispatch(openModal('ACTIONS', props));
-  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(Options);

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

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import PrivacyDropdown from '../components/privacy_dropdown';
+import { changeComposeVisibility } from 'flavours/glitch/actions/compose';
+import { openModal, closeModal } from 'flavours/glitch/actions/modal';
+import { isUserTouching } from 'flavours/glitch/is_mobile';
+
+const mapStateToProps = state => ({
+  value: state.getIn(['compose', 'privacy']),
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onChange (value) {
+    dispatch(changeComposeVisibility(value));
+  },
+
+  isUserTouching,
+  onModalOpen: props => dispatch(openModal('ACTIONS', props)),
+  onModalClose: () => dispatch(closeModal()),
+
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PrivacyDropdown);