Use ES Class Fields & Static Properties (#3008)

Use ES Class Fields & Static Properties (currently stage 2) for improve class outlook.

Added babel-plugin-transform-class-properties as a Babel plugin.

app/javascript/mastodon/features/compose/components/autosuggest_account.js

@@ -6,6 +6,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class AutosuggestAccount extends ImmutablePureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired
+  };
+
   render () {
     const { account } = this.props;
 
@@ -19,8 +23,4 @@ class AutosuggestAccount extends ImmutablePureComponent {
 
 }
 
-AutosuggestAccount.propTypes = {
-  account: ImmutablePropTypes.map.isRequired
-};
-
 export default AutosuggestAccount;

app/javascript/mastodon/features/compose/components/character_counter.js

@@ -4,6 +4,11 @@ import { length } from 'stringz';
 
 class CharacterCounter extends React.PureComponent {
 
+  static propTypes = {
+    text: PropTypes.string.isRequired,
+    max: PropTypes.number.isRequired
+  };
+
   checkRemainingText (diff) {
     if (diff < 0) {
       return <span className='character-counter character-counter--over'>{diff}</span>;
@@ -19,9 +24,4 @@ class CharacterCounter extends React.PureComponent {
 
 }
 
-CharacterCounter.propTypes = {
-  text: PropTypes.string.isRequired,
-  max: PropTypes.number.isRequired
-}
-
 export default CharacterCounter;

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -27,48 +27,63 @@ const messages = defineMessages({
 
 class ComposeForm extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.onSuggestionsClearRequested = this.onSuggestionsClearRequested.bind(this);
-    this.onSuggestionsFetchRequested = debounce(this.onSuggestionsFetchRequested.bind(this), 500);
-    this.onSuggestionSelected = this.onSuggestionSelected.bind(this);
-    this.handleChangeSpoilerText = this.handleChangeSpoilerText.bind(this);
-    this.setAutosuggestTextarea = this.setAutosuggestTextarea.bind(this);
-    this.handleEmojiPick = this.handleEmojiPick.bind(this);
-  }
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    text: PropTypes.string.isRequired,
+    suggestion_token: PropTypes.string,
+    suggestions: ImmutablePropTypes.list,
+    spoiler: PropTypes.bool,
+    privacy: PropTypes.string,
+    spoiler_text: PropTypes.string,
+    focusDate: PropTypes.instanceOf(Date),
+    preselectDate: PropTypes.instanceOf(Date),
+    is_submitting: PropTypes.bool,
+    is_uploading: PropTypes.bool,
+    me: PropTypes.number,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onClearSuggestions: PropTypes.func.isRequired,
+    onFetchSuggestions: PropTypes.func.isRequired,
+    onSuggestionSelected: PropTypes.func.isRequired,
+    onChangeSpoilerText: PropTypes.func.isRequired,
+    onPaste: PropTypes.func.isRequired,
+    onPickEmoji: PropTypes.func.isRequired,
+    showSearch: PropTypes.bool,
+  };
 
-  handleChange (e) {
+  static defaultProps = {
+    showSearch: false
+  };
+
+  handleChange = (e) => {
     this.props.onChange(e.target.value);
   }
 
-  handleKeyDown (e) {
+  handleKeyDown = (e) => {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
       this.handleSubmit();
     }
   }
 
-  handleSubmit () {
+  handleSubmit = () => {
     this.autosuggestTextarea.reset();
     this.props.onSubmit();
   }
 
-  onSuggestionsClearRequested () {
+  onSuggestionsClearRequested = () => {
     this.props.onClearSuggestions();
   }
 
-  onSuggestionsFetchRequested (token) {
+  onSuggestionsFetchRequested = (token) => {
     this.props.onFetchSuggestions(token);
   }
 
-  onSuggestionSelected (tokenStart, token, value) {
+  onSuggestionSelected = (tokenStart, token, value) => {
     this._restoreCaret = null;
     this.props.onSuggestionSelected(tokenStart, token, value);
   }
 
-  handleChangeSpoilerText (e) {
+  handleChangeSpoilerText = (e) => {
     this.props.onChangeSpoilerText(e.target.value);
   }
 
@@ -107,11 +122,11 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
-  setAutosuggestTextarea (c) {
+  setAutosuggestTextarea = (c) => {
     this.autosuggestTextarea = c;
   }
 
-  handleEmojiPick (data) {
+  handleEmojiPick = (data) => {
     const position     = this.autosuggestTextarea.textarea.selectionStart;
     this._restoreCaret = position + data.shortname.length + 1;
     this.props.onPickEmoji(position, data);
@@ -185,32 +200,4 @@ class ComposeForm extends ImmutablePureComponent {
 
 }
 
-ComposeForm.propTypes = {
-  intl: PropTypes.object.isRequired,
-  text: PropTypes.string.isRequired,
-  suggestion_token: PropTypes.string,
-  suggestions: ImmutablePropTypes.list,
-  spoiler: PropTypes.bool,
-  privacy: PropTypes.string,
-  spoiler_text: PropTypes.string,
-  focusDate: PropTypes.instanceOf(Date),
-  preselectDate: PropTypes.instanceOf(Date),
-  is_submitting: PropTypes.bool,
-  is_uploading: PropTypes.bool,
-  me: PropTypes.number,
-  onChange: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onClearSuggestions: PropTypes.func.isRequired,
-  onFetchSuggestions: PropTypes.func.isRequired,
-  onSuggestionSelected: PropTypes.func.isRequired,
-  onChangeSpoilerText: PropTypes.func.isRequired,
-  onPaste: PropTypes.func.isRequired,
-  onPickEmoji: PropTypes.func.isRequired,
-  showSearch: PropTypes.bool,
-};
-
-ComposeForm.defaultProps = {
-  showSearch: false
-};
-
 export default injectIntl(ComposeForm);

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

@@ -40,28 +40,26 @@ let EmojiPicker; // load asynchronously
 
 class EmojiPickerDropdown extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.setRef = this.setRef.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.onHideDropdown = this.onHideDropdown.bind(this);
-    this.onShowDropdown = this.onShowDropdown.bind(this);
-    this.state = {
-      active: false,
-      loading: false
-    };
-  }
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onPickEmoji: PropTypes.func.isRequired
+  };
 
-  setRef (c) {
+  state = {
+    active: false,
+    loading: false
+  };
+
+  setRef = (c) => {
     this.dropdown = c;
   }
 
-  handleChange (data) {
+  handleChange = (data) => {
     this.dropdown.hide();
     this.props.onPickEmoji(data);
   }
 
-  onShowDropdown () {
+  onShowDropdown = () => {
     this.setState({active: true});
     if (!EmojiPicker) {
       this.setState({loading: true});
@@ -75,7 +73,7 @@ class EmojiPickerDropdown extends React.PureComponent {
     }
   }
 
-  onHideDropdown () {
+  onHideDropdown = () => {
     this.setState({active: false});
   }
 
@@ -138,9 +136,4 @@ class EmojiPickerDropdown extends React.PureComponent {
 
 }
 
-EmojiPickerDropdown.propTypes = {
-  intl: PropTypes.object.isRequired,
-  onPickEmoji: PropTypes.func.isRequired
-};
-
 export default injectIntl(EmojiPickerDropdown);

app/javascript/mastodon/features/compose/components/navigation_bar.js

@@ -10,6 +10,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class NavigationBar extends ImmutablePureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired
+  };
+
   render () {
     return (
       <div className='navigation-bar'>
@@ -30,8 +34,4 @@ class NavigationBar extends ImmutablePureComponent {
 
 }
 
-NavigationBar.propTypes = {
-  account: ImmutablePropTypes.map.isRequired
-};
-
 export default NavigationBar;

app/javascript/mastodon/features/compose/components/privacy_dropdown.js

@@ -22,28 +22,27 @@ const iconStyle = {
 
 class PrivacyDropdown extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      open: false
-    };
-    this.handleToggle = this.handleToggle.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.onGlobalClick = this.onGlobalClick.bind(this);
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleToggle () {
+  state = {
+    open: false
+  };
+
+  handleToggle = () => {
     this.setState({ open: !this.state.open });
   }
 
-  handleClick (value, e) {
+  handleClick = (value, e) => {
     e.preventDefault();
     this.setState({ open: false });
     this.props.onChange(value);
   }
 
-  onGlobalClick (e) {
+  onGlobalClick = (e) => {
     if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) {
       this.setState({ open: false });
     }
@@ -59,7 +58,7 @@ class PrivacyDropdown extends React.PureComponent {
     window.removeEventListener('touchstart', this.onGlobalClick);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -96,10 +95,4 @@ class PrivacyDropdown extends React.PureComponent {
 
 }
 
-PrivacyDropdown.propTypes = {
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(PrivacyDropdown);

app/javascript/mastodon/features/compose/components/reply_indicator.js

@@ -14,17 +14,21 @@ const messages = defineMessages({
 
 class ReplyIndicator extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleAccountClick = this.handleAccountClick.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
 
-  handleClick () {
+  static propTypes = {
+    status: ImmutablePropTypes.map,
+    onCancel: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
+  handleClick = () => {
     this.props.onCancel();
   }
 
-  handleAccountClick (e) {
+  handleAccountClick = (e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
@@ -58,14 +62,4 @@ class ReplyIndicator extends ImmutablePureComponent {
 
 }
 
-ReplyIndicator.contextTypes = {
-  router: PropTypes.object
-};
-
-ReplyIndicator.propTypes = {
-  status: ImmutablePropTypes.map,
-  onCancel: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(ReplyIndicator);

app/javascript/mastodon/features/compose/components/search.js

@@ -8,19 +8,21 @@ const messages = defineMessages({
 
 class Search extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleClear = this.handleClear.bind(this);
-  }
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    submitted: PropTypes.bool,
+    onChange: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    onClear: PropTypes.func.isRequired,
+    onShow: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleChange (e) {
+  handleChange = (e) => {
     this.props.onChange(e.target.value);
   }
 
-  handleClear (e) {
+  handleClear = (e) => {
     e.preventDefault();
 
     if (this.props.value.length > 0 || this.props.submitted) {
@@ -28,7 +30,7 @@ class Search extends React.PureComponent {
     }
   }
 
-  handleKeyDown (e) {
+  handleKeyDown = (e) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       this.props.onSubmit();
@@ -39,7 +41,7 @@ class Search extends React.PureComponent {
 
   }
 
-  handleFocus () {
+  handleFocus = () => {
     this.props.onShow();
   }
 
@@ -69,14 +71,4 @@ class Search extends React.PureComponent {
 
 }
 
-Search.propTypes = {
-  value: PropTypes.string.isRequired,
-  submitted: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
-  onShow: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(Search);

app/javascript/mastodon/features/compose/components/search_results.js

@@ -8,6 +8,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class SearchResults extends ImmutablePureComponent {
 
+  static propTypes = {
+    results: ImmutablePropTypes.map.isRequired
+  };
+
   render () {
     const { results } = this.props;
 
@@ -60,8 +64,4 @@ class SearchResults extends ImmutablePureComponent {
 
 }
 
-SearchResults.propTypes = {
-  results: ImmutablePropTypes.map.isRequired
-};
-
 export default SearchResults;

app/javascript/mastodon/features/compose/components/text_icon_button.js

@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
 
 class TextIconButton extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
+  static propTypes = {
+    label: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    active: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    ariaControls: PropTypes.string
+  };
 
-  handleClick (e) {
+  handleClick = (e) => {
     e.preventDefault();
     this.props.onClick();
   }
@@ -25,12 +28,4 @@ class TextIconButton extends React.PureComponent {
 
 }
 
-TextIconButton.propTypes = {
-  label: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  active: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
-  ariaControls: PropTypes.string
-};
-
 export default TextIconButton;

app/javascript/mastodon/features/compose/components/upload_button.js

@@ -23,24 +23,26 @@ const iconStyle = {
 
 class UploadButton extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    disabled: PropTypes.bool,
+    onSelectFile: PropTypes.func.isRequired,
+    style: PropTypes.object,
+    resetFileKey: PropTypes.number,
+    acceptContentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleChange (e) {
+  handleChange = (e) => {
     if (e.target.files.length > 0) {
       this.props.onSelectFile(e.target.files);
     }
   }
 
-  handleClick () {
+  handleClick = () => {
     this.fileElement.click();
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.fileElement = c;
   }
 
@@ -67,13 +69,4 @@ class UploadButton extends React.PureComponent {
 
 }
 
-UploadButton.propTypes = {
-  disabled: PropTypes.bool,
-  onSelectFile: PropTypes.func.isRequired,
-  style: PropTypes.object,
-  resetFileKey: PropTypes.number,
-  acceptContentTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default connect(makeMapStateToProps)(injectIntl(UploadButton));

app/javascript/mastodon/features/compose/components/upload_form.js

@@ -12,6 +12,12 @@ const messages = defineMessages({
 
 class UploadForm extends React.PureComponent {
 
+  static propTypes = {
+    media: ImmutablePropTypes.list.isRequired,
+    onRemoveFile: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { intl, media } = this.props;
 
@@ -37,10 +43,4 @@ class UploadForm extends React.PureComponent {
 
 }
 
-UploadForm.propTypes = {
-  media: ImmutablePropTypes.list.isRequired,
-  onRemoveFile: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(UploadForm);

app/javascript/mastodon/features/compose/components/upload_progress.js

@@ -5,6 +5,11 @@ import { FormattedMessage } from 'react-intl';
 
 class UploadProgress extends React.PureComponent {
 
+  static propTypes = {
+    active: PropTypes.bool,
+    progress: PropTypes.number
+  };
+
   render () {
     const { active, progress } = this.props;
 
@@ -35,9 +40,4 @@ class UploadProgress extends React.PureComponent {
 
 }
 
-UploadProgress.propTypes = {
-  active: PropTypes.bool,
-  progress: PropTypes.number
-};
-
 export default UploadProgress;

app/javascript/mastodon/features/compose/components/warning.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 
 class Warning extends React.PureComponent {
 
-  constructor (props) {
-    super(props);
-  }
+  static propTypes = {
+    message: PropTypes.node.isRequired
+  };
 
   render () {
     const { message } = this.props;
@@ -19,8 +19,4 @@ class Warning extends React.PureComponent {
 
 }
 
-Warning.propTypes = {
-  message: PropTypes.node.isRequired
-};
-
 export default Warning;

app/javascript/mastodon/features/compose/containers/sensitive_button_container.js

@@ -25,6 +25,13 @@ const mapDispatchToProps = dispatch => ({
 
 class SensitiveButton extends React.PureComponent {
 
+  static propTypes = {
+    visible: PropTypes.bool,
+    active: PropTypes.bool,
+    onClick: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { visible, active, onClick, intl } = this.props;
 
@@ -41,11 +48,4 @@ class SensitiveButton extends React.PureComponent {
 
 }
 
-SensitiveButton.propTypes = {
-  visible: PropTypes.bool,
-  active: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(SensitiveButton));

app/javascript/mastodon/features/compose/index.js

@@ -25,6 +25,13 @@ const mapStateToProps = state => ({
 
 class Compose extends React.PureComponent {
 
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    withHeader: PropTypes.bool,
+    showSearch: PropTypes.bool,
+    intl: PropTypes.object.isRequired
+  };
+
   componentDidMount () {
     this.props.dispatch(mountCompose());
   }
@@ -76,11 +83,4 @@ class Compose extends React.PureComponent {
 
 }
 
-Compose.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  withHeader: PropTypes.bool,
-  showSearch: PropTypes.bool,
-  intl: PropTypes.object.isRequired
-};
-
 export default connect(mapStateToProps)(injectIntl(Compose));