Cleanup

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

@@ -1,23 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
+import ReplyIndicatorContainer from '../containers/reply_indicator_container';
+import AutosuggestTextarea from '../../../components/autosuggest_textarea';
 import { defineMessages, injectIntl } from 'react-intl';
+import EmojiPicker from 'flavours/glitch/features/emoji_picker';
+import PollFormContainer from '../containers/poll_form_container';
+import UploadFormContainer from '../containers/upload_form_container';
+import WarningContainer from '../containers/warning_container';
+import { isMobile } from 'flavours/glitch/util/is_mobile';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-
+import { countableText } from 'flavours/glitch/util/counter';
-//  Components.
 import OptionsContainer from '../containers/options_container';
 import Publisher from './publisher';
 import TextareaIcons from './textarea_icons';
-import UploadFormContainer from '../containers/upload_form_container';
-import PollFormContainer from '../containers/poll_form_container';
-import WarningContainer from '../containers/warning_container';
-import ReplyIndicatorContainer from '../containers/reply_indicator_container';
-import EmojiPicker from 'flavours/glitch/features/emoji_picker';
-import AutosuggestTextarea from '../../../components/autosuggest_textarea';
-
-//  Utils.
-import { countableText } from 'flavours/glitch/util/counter';
-import { isMobile } from 'flavours/glitch/util/is_mobile';
 
 const messages = defineMessages({
   placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@@ -37,84 +33,50 @@ class ComposeForm extends ImmutablePureComponent {
 
   static propTypes = {
     intl: PropTypes.object.isRequired,
-
+    text: PropTypes.string,
-    //  State props.
+    suggestions: ImmutablePropTypes.list,
-    advancedOptions: ImmutablePropTypes.map,
+    spoiler: PropTypes.bool,
-    amUnlocked: PropTypes.bool,
+    privacy: PropTypes.string,
+    spoilerText: PropTypes.string,
     focusDate: PropTypes.instanceOf(Date),
     caretPosition: PropTypes.number,
+    preselectDate: PropTypes.instanceOf(Date),
     isSubmitting: PropTypes.bool,
     isChangingUpload: PropTypes.bool,
     isUploading: PropTypes.bool,
+    onChange: PropTypes.func,
+    onSubmit: PropTypes.func,
+    onClearSuggestions: PropTypes.func,
+    onFetchSuggestions: PropTypes.func,
+    onSuggestionSelected: PropTypes.func,
+    onChangeSpoilerText: PropTypes.func,
+    onPaste: PropTypes.func,
+    onPickEmoji: PropTypes.func,
+    showSearch: PropTypes.bool,
+    anyMedia: PropTypes.bool,
+
+    advancedOptions: ImmutablePropTypes.map,
     layout: PropTypes.string,
     media: ImmutablePropTypes.list,
-    preselectDate: PropTypes.instanceOf(Date),
-    privacy: PropTypes.string,
     sideArm: PropTypes.string,
     sensitive: PropTypes.bool,
-    showSearch: PropTypes.bool,
-    spoiler: PropTypes.bool,
-    spoilerText: PropTypes.string,
-    suggestionToken: PropTypes.string,
-    suggestions: ImmutablePropTypes.list,
-    text: PropTypes.string,
-    anyMedia: PropTypes.bool,
     spoilersAlwaysOn: PropTypes.bool,
     mediaDescriptionConfirmation: PropTypes.bool,
     preselectOnReply: PropTypes.bool,
-
-    //  Dispatch props.
-    onChangeSpoilerText: PropTypes.func,
     onChangeSpoilerness: PropTypes.func,
-    onChangeText: PropTypes.func,
     onChangeVisibility: PropTypes.func,
-    onClearSuggestions: PropTypes.func,
-    onFetchSuggestions: PropTypes.func,
-    onInsertEmoji: PropTypes.func,
     onMount: PropTypes.func,
-    onSelectSuggestion: PropTypes.func,
-    onSubmit: PropTypes.func,
     onUnmount: PropTypes.func,
-    onUpload: PropTypes.func,
+    onPaste: PropTypes.func,
     onMediaDescriptionConfirm: PropTypes.func,
   };
 
-  //  Changes the text value of the spoiler.
+  static defaultProps = {
-  handleChangeSpoiler = ({ target: { value } }) => {
+    showSearch: false,
-    const { onChangeSpoilerText } = this.props;
+  };
-    if (onChangeSpoilerText) {
-      onChangeSpoilerText(value);
-    }
-  }
-
-  //  Inserts an emoji at the caret.
-  handleEmoji = (data) => {
-    const { textarea: { selectionStart } } = this;
-    const { onInsertEmoji } = this.props;
-    if (onInsertEmoji) {
-      onInsertEmoji(selectionStart, data);
-    }
-  }
-
-  //  Handles the secondary submit button.
-  handleSecondarySubmit = () => {
-    const { handleSubmit } = this.handlers;
-    const {
-      onChangeVisibility,
-      sideArm,
-    } = this.props;
-    if (sideArm !== 'none' && onChangeVisibility) {
-      onChangeVisibility(sideArm);
-    }
-    handleSubmit();
-  }
 
-  //  Selects a suggestion from the autofill.
+  handleChange = (e) => {
-  handleSelect = (tokenStart, token, value) => {
+    this.props.onChange(e.target.value);
-    const { onSelectSuggestion } = this.props;
-    if (onSelectSuggestion) {
-      onSelectSuggestion(tokenStart, token, value);
-    }
   }
 
   handleKeyDown = ({ ctrlKey, keyCode, metaKey, altKey }) => {
@@ -129,18 +91,10 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
-  //  When the escape key is released, we focus the UI.
-  handleKeyUp = ({ key }) => {
-    if (key === 'Escape') {
-      document.querySelector('.ui').parentElement.focus();
-    }
-  }
-
-  //  Submits the status.
   handleSubmit = () => {
     const { textarea: { value }, uploadForm } = this;
     const {
-      onChangeText,
+      onChange,
       onSubmit,
       isSubmitting,
       isChangingUpload,
@@ -154,8 +108,8 @@ class ComposeForm extends ImmutablePureComponent {
 
     //  If something changes inside the textarea, then we update the
     //  state before submitting.
-    if (onChangeText && text !== value) {
+    if (onChange && text !== value) {
-      onChangeText(value);
+      onChange(value);
     }
 
     // Submit disabled:
@@ -178,6 +132,48 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
+  //  Changes the text value of the spoiler.
+  handleChangeSpoiler = ({ target: { value } }) => {
+    const { onChangeSpoilerText } = this.props;
+    if (onChangeSpoilerText) {
+      onChangeSpoilerText(value);
+    }
+  }
+
+  //  Inserts an emoji at the caret.
+  handleEmoji = (data) => {
+    const { textarea: { selectionStart } } = this;
+    const { onPickEmoji } = this.props;
+    if (onPickEmoji) {
+      onPickEmoji(selectionStart, data);
+    }
+  }
+
+  //  Handles the secondary submit button.
+  handleSecondarySubmit = () => {
+    const { handleSubmit } = this.handlers;
+    const {
+      onChangeVisibility,
+      sideArm,
+    } = this.props;
+    if (sideArm !== 'none' && onChangeVisibility) {
+      onChangeVisibility(sideArm);
+    }
+    handleSubmit();
+  }
+
+  //  Selects a suggestion from the autofill.
+  onSuggestionSelected = (tokenStart, token, value) => {
+    this.props.onSuggestionSelected(tokenStart, token, value);
+  }
+
+  //  When the escape key is released, we focus the UI.
+  handleKeyUp = ({ key }) => {
+    if (key === 'Escape') {
+      document.querySelector('.ui').parentElement.focus();
+    }
+  }
+
   //  Sets a reference to the textarea.
   setAutosuggestTextarea = (textareaComponent) => {
     if (textareaComponent) {
@@ -265,9 +261,6 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
-  handleChange = (e) => {
-    this.props.onChangeText(e.target.value);
-  }
 
   render () {
     const {
@@ -279,7 +272,6 @@ class ComposeForm extends ImmutablePureComponent {
     } = this;
     const {
       advancedOptions,
-      amUnlocked,
       anyMedia,
       intl,
       isSubmitting,
@@ -288,11 +280,10 @@ class ComposeForm extends ImmutablePureComponent {
       layout,
       media,
       onChangeSpoilerness,
-      onChangeText,
       onChangeVisibility,
       onClearSuggestions,
       onFetchSuggestions,
-      onUpload,
+      onPaste,
       privacy,
       sensitive,
       showSearch,
@@ -343,8 +334,8 @@ class ComposeForm extends ImmutablePureComponent {
             onKeyDown={this.handleKeyDown}
             onSuggestionsFetchRequested={onFetchSuggestions}
             onSuggestionsClearRequested={onClearSuggestions}
-            onSuggestionSelected={this.handleSelect}
+            onSuggestionSelected={this.onSuggestionSelected}
-            onPaste={onUpload}
+            onPaste={onPaste}
             autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
           />
 
@@ -361,7 +352,7 @@ class ComposeForm extends ImmutablePureComponent {
           disabled={isSubmitting}
           onChangeVisibility={onChangeVisibility}
           onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
-          onUpload={onUpload}
+          onPaste={onPaste}
           privacy={privacy}
           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

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { defineMessages } from 'react-intl';
 import ComposeForm from '../components/compose_form';
 import {
   changeCompose,
@@ -20,7 +21,6 @@ import {
 import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
 
 import { privacyPreference } from 'flavours/glitch/util/privacy_preference';
-import { me } from 'flavours/glitch/util/initial_state';
 
 const messages = defineMessages({
   missingDescriptionMessage: {  id: 'confirmations.missing_media_description.message',
@@ -28,7 +28,6 @@ const messages = defineMessages({
   missingDescriptionConfirm: {  id: 'confirmations.missing_media_description.confirm',
                                 defaultMessage: 'Send anyway' },
 });
-import { defineMessages } from 'react-intl';
 
 //  State mapping.
 function mapStateToProps (state) {
@@ -49,7 +48,6 @@ function mapStateToProps (state) {
   sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy;
   return {
     advancedOptions: state.getIn(['compose', 'advanced_options']),
-    amUnlocked: !state.getIn(['accounts', me, 'locked']),
     focusDate: state.getIn(['compose', 'focusDate']),
     caretPosition: state.getIn(['compose', 'caretPosition']),
     isSubmitting: state.getIn(['compose', 'is_submitting']),
@@ -64,7 +62,6 @@ function mapStateToProps (state) {
     showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
     spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']),
     spoilerText: state.getIn(['compose', 'spoiler_text']),
-    suggestionToken: state.getIn(['compose', 'suggestion_token']),
     suggestions: state.getIn(['compose', 'suggestions']),
     text: state.getIn(['compose', 'text']),
     anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
@@ -76,33 +73,55 @@ function mapStateToProps (state) {
 
 //  Dispatch mapping.
 const mapDispatchToProps = (dispatch, { intl }) => ({
-  onChangeSpoilerText(text) {
+
-    dispatch(changeComposeSpoilerText(text));
+  onChange(text) {
-  },
-  onChangeSpoilerness() {
-    dispatch(changeComposeSpoilerness());
-  },
-  onChangeText(text) {
     dispatch(changeCompose(text));
   },
-  onChangeVisibility(value) {
+
-    dispatch(changeComposeVisibility(value));
+  onSubmit(routerHistory) {
+    dispatch(submitCompose(routerHistory));
   },
+
   onClearSuggestions() {
     dispatch(clearComposeSuggestions());
   },
+
   onFetchSuggestions(token) {
     dispatch(fetchComposeSuggestions(token));
   },
-  onInsertEmoji(position, emoji) {
+
+  onSuggestionSelected(position, token, suggestion) {
+    dispatch(selectComposeSuggestion(position, token, suggestion));
+  },
+
+  onChangeSpoilerText(text) {
+    dispatch(changeComposeSpoilerText(text));
+  },
+
+  onPaste(files) {
+    dispatch(uploadCompose(files));
+  },
+
+  onPickEmoji(position, emoji) {
     dispatch(insertEmojiCompose(position, emoji));
   },
+
+  onChangeSpoilerness() {
+    dispatch(changeComposeSpoilerness());
+  },
+
+  onChangeVisibility(value) {
+    dispatch(changeComposeVisibility(value));
+  },
+
   onMount() {
     dispatch(mountCompose());
   },
-  onSelectSuggestion(position, token, suggestion) {
+
-    dispatch(selectComposeSuggestion(position, token, suggestion));
+  onUnmount() {
+    dispatch(unmountCompose());
   },
+
   onMediaDescriptionConfirm(routerHistory) {
     dispatch(openModal('CONFIRM', {
       message: intl.formatMessage(messages.missingDescriptionMessage),
@@ -111,15 +130,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)),
     }));
   },
-  onSubmit(routerHistory) {
+
-    dispatch(submitCompose(routerHistory));
-  },
-  onUnmount() {
-    dispatch(unmountCompose());
-  },
-  onUpload(files) {
-    dispatch(uploadCompose(files));
-  },
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);

app/javascript/flavours/glitch/features/compose/index.js

@@ -1,63 +1,46 @@
-//  Package imports.
 import React from 'react';
-import { connect } from 'react-redux';
+import ComposeFormContainer from './containers/compose_form_container';
+import NavigationContainer from './containers/navigation_container';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { connect } from 'react-redux';
 import { injectIntl, defineMessages } from 'react-intl';
 import classNames from 'classnames';
-
-//  Actions.
-import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
-
-//  Components.
-import ComposeFormContainer from './containers/compose_form_container';
-import HeaderContainer from './containers/header_container';
 import SearchContainer from './containers/search_container';
-import SearchResultsContainer from './containers/search_results_container';
+import Motion from 'flavours/glitch/util/optional_motion';
-import NavigationContainer from './containers/navigation_container';
 import spring from 'react-motion/lib/spring';
-
+import SearchResultsContainer from './containers/search_results_container';
-//  Utils.
 import { me, mascot } from 'flavours/glitch/util/initial_state';
-import Motion from 'flavours/glitch/util/optional_motion';
+import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
+import HeaderContainer from './containers/header_container';
 
-//  Messages.
 const messages = defineMessages({
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' },
 });
 
-//  State mapping.
 const mapStateToProps = (state, ownProps) => ({
   elefriend: state.getIn(['compose', 'elefriend']),
   showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
 });
 
-//  Dispatch mapping.
 const mapDispatchToProps = (dispatch, { intl }) => ({
   onClickElefriend () {
     dispatch(cycleElefriendCompose());
   },
 });
 
-//  The component.
 export default @connect(mapStateToProps, mapDispatchToProps)
 @injectIntl
 class Compose extends React.PureComponent {
   static propTypes = {
-    intl: PropTypes.object.isRequired,
-    isSearchPage: PropTypes.bool,
     multiColumn: PropTypes.bool,
     showSearch: PropTypes.bool,
-
+    isSearchPage: PropTypes.bool,
-    //  State props.
     elefriend: PropTypes.number,
-    unreadNotifications: PropTypes.number,
-
-    //  Dispatch props.
     onClickElefriend: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
-  //  Rendering.
   render () {
     const {
       elefriend,
@@ -69,7 +52,6 @@ class Compose extends React.PureComponent {
     } = this.props;
     const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
 
-    //  The result.
     return (
       <div className={computedClass} role='region' aria-label={intl.formatMessage(messages.compose)}>
         {multiColumn && <HeaderContainer />}