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/account/components/action_bar.js

@@ -20,6 +20,17 @@ const messages = defineMessages({
 
 class ActionBar extends React.PureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    me: PropTypes.number.isRequired,
+    onFollow: PropTypes.func,
+    onBlock: PropTypes.func.isRequired,
+    onMention: PropTypes.func.isRequired,
+    onReport: PropTypes.func.isRequired,
+    onMute: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { account, me, intl } = this.props;
 
@@ -79,15 +90,4 @@ class ActionBar extends React.PureComponent {
 
 }
 
-ActionBar.propTypes = {
-  account: ImmutablePropTypes.map.isRequired,
-  me: PropTypes.number.isRequired,
-  onFollow: PropTypes.func,
-  onBlock: PropTypes.func.isRequired,
-  onMention: PropTypes.func.isRequired,
-  onReport: PropTypes.func.isRequired,
-  onMute: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(ActionBar);

app/javascript/mastodon/features/account/components/header.js

@@ -25,23 +25,21 @@ const makeMapStateToProps = () => {
 
 class Avatar extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired
+  };
 
-    this.state = {
-      isHovered: false
-    };
+  state = {
+    isHovered: false
+  };
 
-    this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleMouseOut = this.handleMouseOut.bind(this);
-  }
-
-  handleMouseOver () {
+  handleMouseOver = () => {
     if (this.state.isHovered) return;
     this.setState({ isHovered: true });
   }
 
-  handleMouseOut () {
+  handleMouseOut = () => {
     if (!this.state.isHovered) return;
     this.setState({ isHovered: false });
   }
@@ -71,13 +69,16 @@ class Avatar extends ImmutablePureComponent {
 
 }
 
-Avatar.propTypes = {
-  account: ImmutablePropTypes.map.isRequired,
-  autoPlayGif: PropTypes.bool.isRequired
-};
-
 class Header extends ImmutablePureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    me: PropTypes.number.isRequired,
+    onFollow: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired
+  };
+
   render () {
     const { account, me, intl } = this.props;
 
@@ -139,12 +140,4 @@ class Header extends ImmutablePureComponent {
 
 }
 
-Header.propTypes = {
-  account: ImmutablePropTypes.map,
-  me: PropTypes.number.isRequired,
-  onFollow: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  autoPlayGif: PropTypes.bool.isRequired
-};
-
 export default connect(makeMapStateToProps)(injectIntl(Header));

app/javascript/mastodon/features/account_timeline/components/header.js

@@ -8,33 +8,38 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class Header extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleFollow = this.handleFollow.bind(this);
-    this.handleBlock = this.handleBlock.bind(this);
-    this.handleMention = this.handleMention.bind(this);
-    this.handleReport = this.handleReport.bind(this);
-    this.handleMute = this.handleMute.bind(this);
-  }
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    me: PropTypes.number.isRequired,
+    onFollow: PropTypes.func.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    onMention: PropTypes.func.isRequired,
+    onReport: PropTypes.func.isRequired,
+    onMute: PropTypes.func.isRequired
+  };
 
-  handleFollow () {
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  handleFollow = () => {
     this.props.onFollow(this.props.account);
   }
 
-  handleBlock () {
+  handleBlock = () => {
     this.props.onBlock(this.props.account);
   }
 
-  handleMention () {
+  handleMention = () => {
     this.props.onMention(this.props.account, this.context.router);
   }
 
-  handleReport () {
+  handleReport = () => {
     this.props.onReport(this.props.account);
     this.context.router.push('/report');
   }
 
-  handleMute() {
+  handleMute = () => {
     this.props.onMute(this.props.account);
   }
 
@@ -64,20 +69,7 @@ class Header extends ImmutablePureComponent {
       </div>
     );
   }
+
 }
 
-Header.propTypes = {
-  account: ImmutablePropTypes.map,
-  me: PropTypes.number.isRequired,
-  onFollow: PropTypes.func.isRequired,
-  onBlock: PropTypes.func.isRequired,
-  onMention: PropTypes.func.isRequired,
-  onReport: PropTypes.func.isRequired,
-  onMute: PropTypes.func.isRequired
-};
-
-Header.contextTypes = {
-  router: PropTypes.object
-};
-
 export default Header;

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

@@ -24,24 +24,28 @@ const mapStateToProps = (state, props) => ({
 
 class AccountTimeline extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScrollToBottom = this.handleScrollToBottom.bind(this);
-  }
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    statusIds: ImmutablePropTypes.list,
+    isLoading: PropTypes.bool,
+    hasMore: PropTypes.bool,
+    me: PropTypes.number.isRequired
+  };
 
   componentWillMount () {
     this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
     this.props.dispatch(fetchAccountTimeline(Number(this.props.params.accountId)));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps (nextProps) {
     if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
       this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
       this.props.dispatch(fetchAccountTimeline(Number(nextProps.params.accountId)));
     }
   }
 
-  handleScrollToBottom () {
+  handleScrollToBottom = () => {
     if (!this.props.isLoading && this.props.hasMore) {
       this.props.dispatch(expandAccountTimeline(Number(this.props.params.accountId)));
     }
@@ -77,13 +81,4 @@ class AccountTimeline extends ImmutablePureComponent {
 
 }
 
-AccountTimeline.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  statusIds: ImmutablePropTypes.list,
-  isLoading: PropTypes.bool,
-  hasMore: PropTypes.bool,
-  me: PropTypes.number.isRequired
-};
-
 export default connect(mapStateToProps)(AccountTimeline);

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

@@ -21,6 +21,13 @@ const mapStateToProps = state => ({
 
 class Blocks extends ImmutablePureComponent {
 
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list,
+    intl: PropTypes.object.isRequired
+  };
+
   constructor (props, context) {
     super(props, context);
     this.handleScroll = this.handleScroll.bind(this);
@@ -64,11 +71,4 @@ class Blocks extends ImmutablePureComponent {
   }
 }
 
-Blocks.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  accountIds: ImmutablePropTypes.list,
-  intl: PropTypes.object.isRequired
-};
-
 export default connect(mapStateToProps)(injectIntl(Blocks));

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

@@ -28,6 +28,14 @@ let subscription;
 
 class CommunityTimeline extends React.PureComponent {
 
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    streamingAPIBaseURL: PropTypes.string.isRequired,
+    accessToken: PropTypes.string.isRequired,
+    hasUnread: PropTypes.bool
+  };
+
   componentDidMount () {
     const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
 
@@ -85,12 +93,4 @@ class CommunityTimeline extends React.PureComponent {
 
 }
 
-CommunityTimeline.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  streamingAPIBaseURL: PropTypes.string.isRequired,
-  accessToken: PropTypes.string.isRequired,
-  hasUnread: PropTypes.bool
-};
-
 export default connect(mapStateToProps)(injectIntl(CommunityTimeline));

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));

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

@@ -22,16 +22,19 @@ const mapStateToProps = state => ({
 
 class Favourites extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScrollToBottom = this.handleScrollToBottom.bind(this);
-  }
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    statusIds: ImmutablePropTypes.list.isRequired,
+    loaded: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    me: PropTypes.number.isRequired
+  };
 
   componentWillMount () {
     this.props.dispatch(fetchFavouritedStatuses());
   }
 
-  handleScrollToBottom () {
+  handleScrollToBottom = () => {
     this.props.dispatch(expandFavouritedStatuses());
   }
 
@@ -56,12 +59,4 @@ class Favourites extends ImmutablePureComponent {
 
 }
 
-Favourites.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  statusIds: ImmutablePropTypes.list.isRequired,
-  loaded: PropTypes.bool,
-  intl: PropTypes.object.isRequired,
-  me: PropTypes.number.isRequired
-};
-
 export default connect(mapStateToProps)(injectIntl(Favourites));

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

@@ -16,6 +16,12 @@ const mapStateToProps = (state, props) => ({
 
 class Favourites extends ImmutablePureComponent {
 
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list
+  };
+
   componentWillMount () {
     this.props.dispatch(fetchFavourites(Number(this.props.params.statusId)));
   }
@@ -52,10 +58,4 @@ class Favourites extends ImmutablePureComponent {
 
 }
 
-Favourites.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  accountIds: ImmutablePropTypes.list
-};
-
 export default connect(mapStateToProps)(Favourites);

app/javascript/mastodon/features/follow_requests/components/account_authorize.js

@@ -16,6 +16,13 @@ const messages = defineMessages({
 
 class AccountAuthorize extends ImmutablePureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    onAuthorize: PropTypes.func.isRequired,
+    onReject: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { intl, account, onAuthorize, onReject } = this.props;
     const content = { __html: emojify(account.get('note')) };
@@ -41,11 +48,4 @@ class AccountAuthorize extends ImmutablePureComponent {
 
 }
 
-AccountAuthorize.propTypes = {
-  account: ImmutablePropTypes.map.isRequired,
-  onAuthorize: PropTypes.func.isRequired,
-  onReject: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(AccountAuthorize);

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

@@ -21,16 +21,18 @@ const mapStateToProps = state => ({
 
 class FollowRequests extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScroll = this.handleScroll.bind(this);
-  }
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list,
+    intl: PropTypes.object.isRequired
+  };
 
   componentWillMount () {
     this.props.dispatch(fetchFollowRequests());
   }
 
-  handleScroll (e) {
+  handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
 
     if (scrollTop === scrollHeight - clientHeight) {
@@ -62,13 +64,7 @@ class FollowRequests extends ImmutablePureComponent {
       </Column>
     );
   }
+
 }
 
-FollowRequests.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  accountIds: ImmutablePropTypes.list,
-  intl: PropTypes.object.isRequired
-};
-
 export default connect(mapStateToProps)(injectIntl(FollowRequests));

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

@@ -22,25 +22,25 @@ const mapStateToProps = (state, props) => ({
 
 class Followers extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-  }
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list
+  };
 
   componentWillMount () {
     this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
     this.props.dispatch(fetchFollowers(Number(this.props.params.accountId)));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps (nextProps) {
     if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
       this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
       this.props.dispatch(fetchFollowers(Number(nextProps.params.accountId)));
     }
   }
 
-  handleScroll (e) {
+  handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
 
     if (scrollTop === scrollHeight - clientHeight) {
@@ -48,7 +48,7 @@ class Followers extends ImmutablePureComponent {
     }
   }
 
-  handleLoadMore (e) {
+  handleLoadMore = (e) => {
     e.preventDefault();
     this.props.dispatch(expandFollowers(Number(this.props.params.accountId)));
   }
@@ -83,10 +83,4 @@ class Followers extends ImmutablePureComponent {
 
 }
 
-Followers.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  accountIds: ImmutablePropTypes.list
-};
-
 export default connect(mapStateToProps)(Followers);

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

@@ -22,25 +22,25 @@ const mapStateToProps = (state, props) => ({
 
 class Following extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-  }
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list
+  };
 
   componentWillMount () {
     this.props.dispatch(fetchAccount(Number(this.props.params.accountId)));
     this.props.dispatch(fetchFollowing(Number(this.props.params.accountId)));
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps (nextProps) {
     if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) {
       this.props.dispatch(fetchAccount(Number(nextProps.params.accountId)));
       this.props.dispatch(fetchFollowing(Number(nextProps.params.accountId)));
     }
   }
 
-  handleScroll (e) {
+  handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
 
     if (scrollTop === scrollHeight - clientHeight) {
@@ -48,7 +48,7 @@ class Following extends ImmutablePureComponent {
     }
   }
 
-  handleLoadMore (e) {
+  handleLoadMore = (e) => {
     e.preventDefault();
     this.props.dispatch(expandFollowing(Number(this.props.params.accountId)));
   }
@@ -83,10 +83,4 @@ class Following extends ImmutablePureComponent {
 
 }
 
-Following.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  accountIds: ImmutablePropTypes.list
-};
-
 export default connect(mapStateToProps)(Following);

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

@@ -30,6 +30,11 @@ const mapStateToProps = state => ({
 
 class GettingStarted extends ImmutablePureComponent {
 
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    me: ImmutablePropTypes.map.isRequired
+  };
+
   render () {
     const { intl, me } = this.props;
 
@@ -66,9 +71,4 @@ class GettingStarted extends ImmutablePureComponent {
   }
 }
 
-GettingStarted.propTypes = {
-  intl: PropTypes.object.isRequired,
-  me: ImmutablePropTypes.map.isRequired
-};
-
 export default connect(mapStateToProps)(injectIntl(GettingStarted));

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

@@ -20,6 +20,14 @@ const mapStateToProps = state => ({
 
 class HashtagTimeline extends React.PureComponent {
 
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    streamingAPIBaseURL: PropTypes.string.isRequired,
+    accessToken: PropTypes.string.isRequired,
+    hasUnread: PropTypes.bool
+  };
+
   _subscribe (dispatch, id) {
     const { streamingAPIBaseURL, accessToken } = this.props;
 
@@ -79,12 +87,4 @@ class HashtagTimeline extends React.PureComponent {
 
 }
 
-HashtagTimeline.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  streamingAPIBaseURL: PropTypes.string.isRequired,
-  accessToken: PropTypes.string.isRequired,
-  hasUnread: PropTypes.bool
-};
-
 export default connect(mapStateToProps)(HashtagTimeline);

app/javascript/mastodon/features/home_timeline/components/column_settings.js

@@ -13,6 +13,13 @@ const messages = defineMessages({
 
 class ColumnSettings extends React.PureComponent {
 
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { settings, onChange, onSave, intl } = this.props;
 
@@ -41,11 +48,4 @@ class ColumnSettings extends React.PureComponent {
 
 }
 
-ColumnSettings.propTypes = {
-  settings: ImmutablePropTypes.map.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-}
-
 export default injectIntl(ColumnSettings);

app/javascript/mastodon/features/home_timeline/components/setting_text.js

@@ -4,12 +4,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 class SettingText extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleChange = this.handleChange.bind(this);
-  }
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    settingKey: PropTypes.array.isRequired,
+    label: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired
+  };
 
-  handleChange (e) {
+  handleChange = (e) => {
     this.props.onChange(this.props.settingKey, e.target.value)
   }
 
@@ -28,11 +30,4 @@ class SettingText extends React.PureComponent {
 
 }
 
-SettingText.propTypes = {
-  settings: ImmutablePropTypes.map.isRequired,
-  settingKey: PropTypes.array.isRequired,
-  label: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-
 export default SettingText;

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

@@ -18,6 +18,12 @@ const mapStateToProps = state => ({
 
 class HomeTimeline extends React.PureComponent {
 
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    hasUnread: PropTypes.bool,
+    hasFollows: PropTypes.bool
+  };
+
   render () {
     const { intl, hasUnread, hasFollows } = this.props;
 
@@ -45,10 +51,4 @@ class HomeTimeline extends React.PureComponent {
 
 }
 
-HomeTimeline.propTypes = {
-  intl: PropTypes.object.isRequired,
-  hasUnread: PropTypes.bool,
-  hasFollows: PropTypes.bool
-};
-
 export default connect(mapStateToProps)(injectIntl(HomeTimeline));

app/javascript/mastodon/features/notifications/components/clear_column_button.js

@@ -8,6 +8,11 @@ const messages = defineMessages({
 
 class ClearColumnButton extends React.Component {
 
+  static propTypes = {
+    onClick: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { intl } = this.props;
 
@@ -19,9 +24,4 @@ class ClearColumnButton extends React.Component {
   }
 }
 
-ClearColumnButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(ClearColumnButton);

app/javascript/mastodon/features/notifications/components/column_settings.js

@@ -11,6 +11,15 @@ const messages = defineMessages({
 
 class ColumnSettings extends React.PureComponent {
 
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    intl: PropTypes.shape({
+      formatMessage: PropTypes.func.isRequired
+    }).isRequired
+  };
+
   render () {
     const { settings, intl, onChange, onSave } = this.props;
 
@@ -59,13 +68,4 @@ class ColumnSettings extends React.PureComponent {
 
 }
 
-ColumnSettings.propTypes = {
-  settings: ImmutablePropTypes.map.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onSave: PropTypes.func.isRequired,
-  intl: PropTypes.shape({
-    formatMessage: PropTypes.func.isRequired
-  }).isRequired
-};
-
 export default injectIntl(ColumnSettings);

app/javascript/mastodon/features/notifications/components/notification.js

@@ -11,6 +11,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class Notification extends ImmutablePureComponent {
 
+  static propTypes = {
+    notification: ImmutablePropTypes.map.isRequired
+  };
+
   renderFollow (account, link) {
     return (
       <div className='notification notification-follow'>
@@ -82,8 +86,4 @@ class Notification extends ImmutablePureComponent {
 
 }
 
-Notification.propTypes = {
-  notification: ImmutablePropTypes.map.isRequired
-};
-
 export default Notification;

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

@@ -33,15 +33,20 @@ const mapStateToProps = state => ({
 
 class Notifications extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-    this.handleClear = this.handleClear.bind(this);
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    notifications: ImmutablePropTypes.list.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    shouldUpdateScroll: PropTypes.func,
+    intl: PropTypes.object.isRequired,
+    isLoading: PropTypes.bool,
+    isUnread: PropTypes.bool
+  };
 
-  handleScroll (e) {
+  static defaultProps = {
+    trackScroll: true
+  };
+
+  handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
     const offset = scrollHeight - scrollTop - clientHeight;
     this._oldScrollPosition = scrollHeight - scrollTop;
@@ -61,12 +66,12 @@ class Notifications extends React.PureComponent {
     }
   }
 
-  handleLoadMore (e) {
+  handleLoadMore = (e) => {
     e.preventDefault();
     this.props.dispatch(expandNotifications());
   }
 
-  handleClear () {
+  handleClear = () => {
     const { dispatch, intl } = this.props;
 
     dispatch(openModal('CONFIRM', {
@@ -76,7 +81,7 @@ class Notifications extends React.PureComponent {
     }));
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -127,17 +132,4 @@ class Notifications extends React.PureComponent {
 
 }
 
-Notifications.propTypes = {
-  notifications: ImmutablePropTypes.list.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  shouldUpdateScroll: PropTypes.func,
-  intl: PropTypes.object.isRequired,
-  isLoading: PropTypes.bool,
-  isUnread: PropTypes.bool
-};
-
-Notifications.defaultProps = {
-  trackScroll: true
-};
-
 export default connect(mapStateToProps)(injectIntl(Notifications));

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

@@ -28,6 +28,14 @@ let subscription;
 
 class PublicTimeline extends React.PureComponent {
 
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    streamingAPIBaseURL: PropTypes.string.isRequired,
+    accessToken: PropTypes.string.isRequired,
+    hasUnread: PropTypes.bool
+  };
+
   componentDidMount () {
     const { dispatch, streamingAPIBaseURL, accessToken } = this.props;
 
@@ -85,12 +93,4 @@ class PublicTimeline extends React.PureComponent {
 
 }
 
-PublicTimeline.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  streamingAPIBaseURL: PropTypes.string.isRequired,
-  accessToken: PropTypes.string.isRequired,
-  hasUnread: PropTypes.bool
-};
-
 export default connect(mapStateToProps)(injectIntl(PublicTimeline));

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

@@ -16,6 +16,12 @@ const mapStateToProps = (state, props) => ({
 
 class Reblogs extends ImmutablePureComponent {
 
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    accountIds: ImmutablePropTypes.list
+  };
+
   componentWillMount () {
     this.props.dispatch(fetchReblogs(Number(this.props.params.statusId)));
   }
@@ -52,10 +58,4 @@ class Reblogs extends ImmutablePureComponent {
 
 }
 
-Reblogs.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  accountIds: ImmutablePropTypes.list
-};
-
 export default connect(mapStateToProps)(Reblogs);

app/javascript/mastodon/features/report/components/status_check_box.js

@@ -6,6 +6,13 @@ import Toggle from 'react-toggle';
 
 class StatusCheckBox extends React.PureComponent {
 
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    checked: PropTypes.bool,
+    onToggle: PropTypes.func.isRequired,
+    disabled: PropTypes.bool
+  };
+
   render () {
     const { status, checked, onToggle, disabled } = this.props;
     const content = { __html: emojify(status.get('content')) };
@@ -30,11 +37,4 @@ class StatusCheckBox extends React.PureComponent {
 
 }
 
-StatusCheckBox.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  checked: PropTypes.bool,
-  onToggle: PropTypes.func.isRequired,
-  disabled: PropTypes.bool
-};
-
 export default StatusCheckBox;

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

@@ -37,11 +37,18 @@ const makeMapStateToProps = () => {
 
 class Report extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleCommentChange = this.handleCommentChange.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool,
+    account: ImmutablePropTypes.map,
+    statusIds: ImmutablePropTypes.orderedSet.isRequired,
+    comment: PropTypes.string.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
   componentWillMount () {
     if (!this.props.account) {
@@ -63,11 +70,11 @@ class Report extends React.PureComponent {
     }
   }
 
-  handleCommentChange (e) {
+  handleCommentChange = (e) => {
     this.props.dispatch(changeReportComment(e.target.value));
   }
 
-  handleSubmit () {
+  handleSubmit = () => {
     this.props.dispatch(submitReport());
     this.context.router.replace('/');
   }
@@ -115,17 +122,4 @@ class Report extends React.PureComponent {
 
 }
 
-Report.contextTypes = {
-  router: PropTypes.object
-};
-
-Report.propTypes = {
-  isSubmitting: PropTypes.bool,
-  account: ImmutablePropTypes.map,
-  statusIds: ImmutablePropTypes.orderedSet.isRequired,
-  comment: PropTypes.string.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default connect(makeMapStateToProps)(injectIntl(Report));

app/javascript/mastodon/features/status/components/action_bar.js

@@ -17,37 +17,43 @@ const messages = defineMessages({
 
 class ActionBar extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleReplyClick = this.handleReplyClick.bind(this);
-    this.handleReblogClick = this.handleReblogClick.bind(this);
-    this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
-    this.handleDeleteClick = this.handleDeleteClick.bind(this);
-    this.handleMentionClick = this.handleMentionClick.bind(this);
-    this.handleReport = this.handleReport.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
 
-  handleReplyClick () {
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onReply: PropTypes.func.isRequired,
+    onReblog: PropTypes.func.isRequired,
+    onFavourite: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onMention: PropTypes.func.isRequired,
+    onReport: PropTypes.func,
+    me: PropTypes.number.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
+  handleReplyClick = () => {
     this.props.onReply(this.props.status);
   }
 
-  handleReblogClick (e) {
+  handleReblogClick = (e) => {
     this.props.onReblog(this.props.status, e);
   }
 
-  handleFavouriteClick () {
+  handleFavouriteClick = () => {
     this.props.onFavourite(this.props.status);
   }
 
-  handleDeleteClick () {
+  handleDeleteClick = () => {
     this.props.onDelete(this.props.status);
   }
 
-  handleMentionClick () {
+  handleMentionClick = () => {
     this.props.onMention(this.props.status.get('account'), this.context.router);
   }
 
-  handleReport () {
+  handleReport = () => {
     this.props.onReport(this.props.status);
     this.context.router.push('/report');
   }
@@ -86,20 +92,4 @@ class ActionBar extends React.PureComponent {
 
 }
 
-ActionBar.contextTypes = {
-  router: PropTypes.object
-};
-
-ActionBar.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  onReply: PropTypes.func.isRequired,
-  onReblog: PropTypes.func.isRequired,
-  onFavourite: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-  onMention: PropTypes.func.isRequired,
-  onReport: PropTypes.func,
-  me: PropTypes.number.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(ActionBar);

app/javascript/mastodon/features/status/components/card.js

@@ -19,6 +19,10 @@ const getHostname = url => {
 
 class Card extends React.PureComponent {
 
+  static propTypes = {
+    card: ImmutablePropTypes.map
+  };
+
   renderLink () {
     const { card } = this.props;
 
@@ -93,8 +97,4 @@ class Card extends React.PureComponent {
   }
 }
 
-Card.propTypes = {
-  card: ImmutablePropTypes.map
-};
-
 export default Card;

app/javascript/mastodon/features/status/components/detailed_status.js

@@ -14,12 +14,18 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class DetailedStatus extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleAccountClick = this.handleAccountClick.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
 
-  handleAccountClick (e) {
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onOpenMedia: PropTypes.func.isRequired,
+    onOpenVideo: PropTypes.func.isRequired,
+    autoPlayGif: PropTypes.bool,
+  };
+
+  handleAccountClick = (e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
@@ -82,15 +88,4 @@ class DetailedStatus extends ImmutablePureComponent {
 
 }
 
-DetailedStatus.contextTypes = {
-  router: PropTypes.object
-};
-
-DetailedStatus.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  onOpenMedia: PropTypes.func.isRequired,
-  onOpenVideo: PropTypes.func.isRequired,
-  autoPlayGif: PropTypes.bool,
-};
-
 export default DetailedStatus;

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

@@ -56,18 +56,21 @@ const makeMapStateToProps = () => {
 
 class Status extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
-    this.handleReplyClick = this.handleReplyClick.bind(this);
-    this.handleModalReblog = this.handleModalReblog.bind(this);
-    this.handleReblogClick = this.handleReblogClick.bind(this);
-    this.handleDeleteClick = this.handleDeleteClick.bind(this);
-    this.handleMentionClick = this.handleMentionClick.bind(this);
-    this.handleOpenMedia = this.handleOpenMedia.bind(this);
-    this.handleOpenVideo = this.handleOpenVideo.bind(this);
-    this.handleReport = this.handleReport.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    params: PropTypes.object.isRequired,
+    dispatch: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map,
+    ancestorsIds: ImmutablePropTypes.list,
+    descendantsIds: ImmutablePropTypes.list,
+    me: PropTypes.number,
+    boostModal: PropTypes.bool,
+    autoPlayGif: PropTypes.bool,
+    intl: PropTypes.object.isRequired
+  };
 
   componentWillMount () {
     this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
@@ -79,7 +82,7 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  handleFavouriteClick (status) {
+  handleFavouriteClick = (status) => {
     if (status.get('favourited')) {
       this.props.dispatch(unfavourite(status));
     } else {
@@ -87,15 +90,15 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  handleReplyClick (status) {
+  handleReplyClick = (status) => {
     this.props.dispatch(replyCompose(status, this.context.router));
   }
 
-  handleModalReblog (status) {
+  handleModalReblog = (status) => {
     this.props.dispatch(reblog(status));
   }
 
-  handleReblogClick (status, e) {
+  handleReblogClick = (status, e) => {
     if (status.get('reblogged')) {
       this.props.dispatch(unreblog(status));
     } else {
@@ -107,7 +110,7 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  handleDeleteClick (status) {
+  handleDeleteClick = (status) => {
     const { dispatch, intl } = this.props;
 
     dispatch(openModal('CONFIRM', {
@@ -117,19 +120,19 @@ class Status extends ImmutablePureComponent {
     }));
   }
 
-  handleMentionClick (account, router) {
+  handleMentionClick = (account, router) => {
     this.props.dispatch(mentionCompose(account, router));
   }
 
-  handleOpenMedia (media, index) {
+  handleOpenMedia = (media, index) => {
     this.props.dispatch(openModal('MEDIA', { media, index }));
   }
 
-  handleOpenVideo (media, time) {
+  handleOpenVideo = (media, time) => {
     this.props.dispatch(openModal('VIDEO', { media, time }));
   }
 
-  handleReport (status) {
+  handleReport = (status) => {
     this.props.dispatch(initReport(status.get('account'), status));
   }
 
@@ -180,20 +183,4 @@ class Status extends ImmutablePureComponent {
 
 }
 
-Status.contextTypes = {
-  router: PropTypes.object
-};
-
-Status.propTypes = {
-  params: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
-  status: ImmutablePropTypes.map,
-  ancestorsIds: ImmutablePropTypes.list,
-  descendantsIds: ImmutablePropTypes.list,
-  me: PropTypes.number,
-  boostModal: PropTypes.bool,
-  autoPlayGif: PropTypes.bool,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(connect(makeMapStateToProps)(Status));

app/javascript/mastodon/features/ui/components/boost_modal.js

@@ -16,18 +16,29 @@ const messages = defineMessages({
 
 class BoostModal extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onReblog: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   constructor (props, context) {
     super(props, context);
     this.handleReblog = this.handleReblog.bind(this);
     this.handleAccountClick = this.handleAccountClick.bind(this);
   }
 
-  handleReblog() {
+  handleReblog = () => {
     this.props.onReblog(this.props.status);
     this.props.onClose();
   }
 
-  handleAccountClick (e) {
+  handleAccountClick = (e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.props.onClose();
@@ -70,15 +81,4 @@ class BoostModal extends ImmutablePureComponent {
 
 }
 
-BoostModal.contextTypes = {
-  router: PropTypes.object
-};
-
-BoostModal.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  onReblog: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(BoostModal);

app/javascript/mastodon/features/ui/components/column.js

@@ -32,14 +32,15 @@ const scrollTop = (node) => {
 
 class Column extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleHeaderClick = this.handleHeaderClick.bind(this);
-    this.handleWheel = this.handleWheel.bind(this);
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    heading: PropTypes.string,
+    icon: PropTypes.string,
+    children: PropTypes.node,
+    active: PropTypes.bool,
+    hideHeadingOnMobile: PropTypes.bool
+  };
 
-  handleHeaderClick () {
+  handleHeaderClick = () => {
     const scrollable = this.node.querySelector('.scrollable');
     if (!scrollable) {
       return;
@@ -47,13 +48,13 @@ class Column extends React.PureComponent {
     this._interruptScrollAnimation = scrollTop(scrollable);
   }
 
-  handleWheel () {
+  handleWheel = () => {
     if (typeof this._interruptScrollAnimation !== 'undefined') {
       this._interruptScrollAnimation();
     }
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -82,12 +83,4 @@ class Column extends React.PureComponent {
 
 }
 
-Column.propTypes = {
-  heading: PropTypes.string,
-  icon: PropTypes.string,
-  children: PropTypes.node,
-  active: PropTypes.bool,
-  hideHeadingOnMobile: PropTypes.bool
-};
-
 export default Column;

app/javascript/mastodon/features/ui/components/column_header.js

@@ -3,12 +3,16 @@ import PropTypes from 'prop-types'
 
 class ColumnHeader extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
+  static propTypes = {
+    icon: PropTypes.string,
+    type: PropTypes.string,
+    active: PropTypes.bool,
+    onClick: PropTypes.func,
+    hideOnMobile: PropTypes.bool,
+    columnHeaderId: PropTypes.string
+  };
 
-  handleClick () {
+  handleClick = () => {
     this.props.onClick();
   }
 
@@ -31,13 +35,4 @@ class ColumnHeader extends React.PureComponent {
 
 }
 
-ColumnHeader.propTypes = {
-  icon: PropTypes.string,
-  type: PropTypes.string,
-  active: PropTypes.bool,
-  onClick: PropTypes.func,
-  hideOnMobile: PropTypes.bool,
-  columnHeaderId: PropTypes.string
-};
-
 export default ColumnHeader;

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 
 class ColumnsArea extends React.PureComponent {
 
+  static propTypes = {
+    children: PropTypes.node
+  };
+
   render () {
     return (
       <div className='columns-area'>
@@ -13,8 +17,4 @@ class ColumnsArea extends React.PureComponent {
 
 }
 
-ColumnsArea.propTypes = {
-  children: PropTypes.node
-};
-
 export default ColumnsArea;

app/javascript/mastodon/features/ui/components/confirmation_modal.js

@@ -5,18 +5,20 @@ import Button from '../../../components/button';
 
 class ConfirmationModal extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
+  static propTypes = {
+    message: PropTypes.node.isRequired,
+    confirm: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleClick () {
+  handleClick = () => {
     this.props.onClose();
     this.props.onConfirm();
   }
 
-  handleCancel (e) {
+  handleCancel = (e) => {
     e.preventDefault();
     this.props.onClose();
   }
@@ -40,12 +42,4 @@ class ConfirmationModal extends React.PureComponent {
 
 }
 
-ConfirmationModal.propTypes = {
-  message: PropTypes.node.isRequired,
-  confirm: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(ConfirmationModal);

app/javascript/mastodon/features/ui/components/media_modal.js

@@ -14,25 +14,26 @@ const messages = defineMessages({
 
 class MediaModal extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      index: null
-    };
-    this.handleNextClick = this.handleNextClick.bind(this);
-    this.handlePrevClick = this.handlePrevClick.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
+  static propTypes = {
+    media: ImmutablePropTypes.list.isRequired,
+    index: PropTypes.number.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleNextClick () {
+  state = {
+    index: null
+  };
+
+  handleNextClick = () => {
     this.setState({ index: (this.getIndex() + 1) % this.props.media.size});
   }
 
-  handlePrevClick () {
+  handlePrevClick = () => {
     this.setState({ index: (this.getIndex() - 1) % this.props.media.size});
   }
 
-  handleKeyUp (e) {
+  handleKeyUp = (e) => {
     switch(e.key) {
     case 'ArrowLeft':
       this.handlePrevClick();
@@ -93,11 +94,4 @@ class MediaModal extends ImmutablePureComponent {
 
 }
 
-MediaModal.propTypes = {
-  media: ImmutablePropTypes.list.isRequired,
-  index: PropTypes.number.isRequired,
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(MediaModal);

app/javascript/mastodon/features/ui/components/modal_root.js

@@ -17,12 +17,13 @@ const MODAL_COMPONENTS = {
 
 class ModalRoot extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
+  static propTypes = {
+    type: PropTypes.string,
+    props: PropTypes.object,
+    onClose: PropTypes.func.isRequired
+  };
 
-  handleKeyUp (e) {
+  handleKeyUp = (e) => {
     if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
          && !!this.props.type) {
       this.props.onClose();
@@ -84,10 +85,4 @@ class ModalRoot extends React.PureComponent {
 
 }
 
-ModalRoot.propTypes = {
-  type: PropTypes.string,
-  props: PropTypes.object,
-  onClose: PropTypes.func.isRequired
-};
-
 export default ModalRoot;

app/javascript/mastodon/features/ui/components/onboarding_modal.js

@@ -165,27 +165,29 @@ const mapStateToProps = state => ({
 
 class OnboardingModal extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      currentIndex: 0
-    };
-    this.handleSkip = this.handleSkip.bind(this);
-    this.handleDot = this.handleDot.bind(this);
-    this.handleNext = this.handleNext.bind(this);
-  }
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    me: ImmutablePropTypes.map.isRequired,
+    domain: PropTypes.string.isRequired,
+    admin: ImmutablePropTypes.map
+  };
 
-  handleSkip (e) {
+  state = {
+    currentIndex: 0
+  };
+
+  handleSkip = (e) => {
     e.preventDefault();
     this.props.onClose();
   }
 
-  handleDot (i, e) {
+  handleDot = (i, e) => {
     e.preventDefault();
     this.setState({ currentIndex: i });
   }
 
-  handleNext (maxNum, e) {
+  handleNext = (maxNum, e) => {
     e.preventDefault();
 
     if (this.state.currentIndex < maxNum - 1) {
@@ -253,12 +255,4 @@ class OnboardingModal extends React.PureComponent {
 
 }
 
-OnboardingModal.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  me: ImmutablePropTypes.map.isRequired,
-  domain: PropTypes.string.isRequired,
-  admin: ImmutablePropTypes.map
-}
-
 export default connect(mapStateToProps)(injectIntl(OnboardingModal));

app/javascript/mastodon/features/ui/components/upload_area.js

@@ -5,13 +5,12 @@ import { FormattedMessage } from 'react-intl';
 
 class UploadArea extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
+  static propTypes = {
+    active: PropTypes.bool,
+    onClose: PropTypes.func
+  };
 
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
-
-  handleKeyUp (e) {
+  handleKeyUp = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -52,9 +51,4 @@ class UploadArea extends React.PureComponent {
 
 }
 
-UploadArea.propTypes = {
-  active: PropTypes.bool,
-  onClose: PropTypes.func
-};
-
 export default UploadArea;

app/javascript/mastodon/features/ui/components/video_modal.js

@@ -13,6 +13,13 @@ const messages = defineMessages({
 
 class VideoModal extends ImmutablePureComponent {
 
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    time: PropTypes.number,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { media, intl, time, onClose } = this.props;
 
@@ -30,11 +37,4 @@ class VideoModal extends ImmutablePureComponent {
 
 }
 
-VideoModal.propTypes = {
-  media: ImmutablePropTypes.map.isRequired,
-  time: PropTypes.number,
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(VideoModal);

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

@@ -20,27 +20,21 @@ const noOp = () => false;
 
 class UI extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      width: window.innerWidth,
-      draggingOver: false
-    };
-    this.handleResize = debounce(this.handleResize.bind(this), 500);
-    this.handleDragEnter = this.handleDragEnter.bind(this);
-    this.handleDragOver = this.handleDragOver.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
-    this.handleDragLeave = this.handleDragLeave.bind(this);
-    this.handleDragEnd = this.handleDragLeave.bind(this)
-    this.closeUploadModal = this.closeUploadModal.bind(this)
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    children: PropTypes.node
+  };
 
-  handleResize () {
+  state = {
+    width: window.innerWidth,
+    draggingOver: false
+  };
+
+  handleResize = () => {
     this.setState({ width: window.innerWidth });
   }
 
-  handleDragEnter (e) {
+  handleDragEnter = (e) => {
     e.preventDefault();
 
     if (!this.dragTargets) {
@@ -56,7 +50,7 @@ class UI extends React.PureComponent {
     }
   }
 
-  handleDragOver (e) {
+  handleDragOver = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -69,7 +63,7 @@ class UI extends React.PureComponent {
     return false;
   }
 
-  handleDrop (e) {
+  handleDrop = (e) => {
     e.preventDefault();
 
     this.setState({ draggingOver: false });
@@ -79,7 +73,7 @@ class UI extends React.PureComponent {
     }
   }
 
-  handleDragLeave (e) {
+  handleDragLeave = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -92,7 +86,7 @@ class UI extends React.PureComponent {
     this.setState({ draggingOver: false });
   }
 
-  closeUploadModal() {
+  closeUploadModal = () => {
     this.setState({ draggingOver: false });
   }
 
@@ -117,7 +111,7 @@ class UI extends React.PureComponent {
     document.removeEventListener('dragend', this.handleDragEnd);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -160,9 +154,4 @@ class UI extends React.PureComponent {
 
 }
 
-UI.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  children: PropTypes.node
-};
-
 export default connect()(UI);