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.

20 files changed, 308 insertions, 412 deletions

diff --git a/app/javascript/mastodon/components/account.js b/app/javascript/mastodon/components/account.js
index 9016bedb6..5850a8791 100644
--- a/app/javascript/mastodon/components/account.js
+++ b/app/javascript/mastodon/components/account.js
@@ -18,6 +18,15 @@ const messages = defineMessages({
 
 class Account extends ImmutablePureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired,
+    me: PropTypes.number.isRequired,
+    onFollow: PropTypes.func.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    onMute: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   constructor (props, context) {
     super(props, context);
     this.handleFollow = this.handleFollow.bind(this);
@@ -81,13 +90,4 @@ class Account extends ImmutablePureComponent {
 
 }
 
-Account.propTypes = {
-  account: ImmutablePropTypes.map.isRequired,
-  me: PropTypes.number.isRequired,
-  onFollow: PropTypes.func.isRequired,
-  onBlock: PropTypes.func.isRequired,
-  onMute: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-}
-
 export default injectIntl(Account);
diff --git a/app/javascript/mastodon/components/attachment_list.js b/app/javascript/mastodon/components/attachment_list.js
index 6df578b77..f6449e2c0 100644
--- a/app/javascript/mastodon/components/attachment_list.js
+++ b/app/javascript/mastodon/components/attachment_list.js
@@ -5,6 +5,10 @@ const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
 
 class AttachmentList extends React.PureComponent {
 
+  static propTypes = {
+    media: ImmutablePropTypes.list.isRequired
+  };
+
   render () {
     const { media } = this.props;
 
@@ -24,10 +28,7 @@ class AttachmentList extends React.PureComponent {
       </div>
     );
   }
-}
 
-AttachmentList.propTypes = {
-  media: ImmutablePropTypes.list.isRequired
-};
+}
 
 export default AttachmentList;
diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js
index 4d8f2882c..61e101f29 100644
--- a/app/javascript/mastodon/components/autosuggest_textarea.js
+++ b/app/javascript/mastodon/components/autosuggest_textarea.js
@@ -32,6 +32,25 @@ const textAtCursorMatchesToken = (str, caretPosition) => {
 
 class AutosuggestTextarea extends ImmutablePureComponent {
 
+  static propTypes = {
+    value: PropTypes.string,
+    suggestions: ImmutablePropTypes.list,
+    disabled: PropTypes.bool,
+    placeholder: PropTypes.string,
+    onSuggestionSelected: PropTypes.func.isRequired,
+    onSuggestionsClearRequested: PropTypes.func.isRequired,
+    onSuggestionsFetchRequested: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onKeyUp: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onPaste: PropTypes.func.isRequired,
+    autoFocus: PropTypes.bool
+  };
+
+  static defaultProps = {
+    autoFucus: true
+  };
+
   constructor (props, context) {
     super(props, context);
     this.state = {
@@ -194,25 +213,6 @@ class AutosuggestTextarea extends ImmutablePureComponent {
     );
   }
 
-};
-
-AutosuggestTextarea.propTypes = {
-  value: PropTypes.string,
-  suggestions: ImmutablePropTypes.list,
-  disabled: PropTypes.bool,
-  placeholder: PropTypes.string,
-  onSuggestionSelected: PropTypes.func.isRequired,
-  onSuggestionsClearRequested: PropTypes.func.isRequired,
-  onSuggestionsFetchRequested: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onKeyUp: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onPaste: PropTypes.func.isRequired,
-  autoFocus: PropTypes.bool
-};
-
-AutosuggestTextarea.defaultProps = {
-  autoFucus: true,
-};
+}
 
 export default AutosuggestTextarea;
diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js
index 76c561c91..90c84f32a 100644
--- a/app/javascript/mastodon/components/avatar.js
+++ b/app/javascript/mastodon/components/avatar.js
@@ -3,23 +3,31 @@ import PropTypes from 'prop-types';
 
 class Avatar extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-
-    this.state = {
-      hovering: false
-    };
-
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
-  }
-
-  handleMouseEnter () {
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+    staticSrc: PropTypes.string,
+    size: PropTypes.number.isRequired,
+    style: PropTypes.object,
+    animate: PropTypes.bool,
+    inline: PropTypes.bool
+  };
+
+  static defaultProps = {
+    animate: false,
+    size: 20,
+    inline: false
+  };
+
+  state = {
+    hovering: true
+  };
+
+  handleMouseEnter = () => {
     if (this.props.animate) return;
     this.setState({ hovering: true });
   }
 
-  handleMouseLeave () {
+  handleMouseLeave = () => {
     if (this.props.animate) return;
     this.setState({ hovering: false });
   }
@@ -59,19 +67,4 @@ class Avatar extends React.PureComponent {
 
 }
 
-Avatar.propTypes = {
-  src: PropTypes.string.isRequired,
-  staticSrc: PropTypes.string,
-  size: PropTypes.number.isRequired,
-  style: PropTypes.object,
-  animate: PropTypes.bool,
-  inline: PropTypes.bool
-};
-
-Avatar.defaultProps = {
-  animate: false,
-  size: 20,
-  inline: false
-};
-
 export default Avatar;
diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js
index afa0c6667..b76750513 100644
--- a/app/javascript/mastodon/components/avatar_overlay.js
+++ b/app/javascript/mastodon/components/avatar_overlay.js
@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class AvatarOverlay extends React.PureComponent {
+  static propTypes = {
+    staticSrc: PropTypes.string.isRequired,
+    overlaySrc: PropTypes.string.isRequired
+  };
+
   render() {
     const {staticSrc, overlaySrc} = this.props;
 
@@ -20,11 +25,7 @@ class AvatarOverlay extends React.PureComponent {
       </div>
     );
   }
-}
 
-AvatarOverlay.propTypes = {
-  staticSrc: PropTypes.string.isRequired,
-  overlaySrc: PropTypes.string.isRequired,
-};
+}
 
 export default AvatarOverlay;
diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js
index 1063e0289..40a17f92e 100644
--- a/app/javascript/mastodon/components/button.js
+++ b/app/javascript/mastodon/components/button.js
@@ -3,12 +3,22 @@ import PropTypes from 'prop-types';
 
 class Button extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick (e) {
+  static propTypes = {
+    text: PropTypes.node,
+    onClick: PropTypes.func,
+    disabled: PropTypes.bool,
+    block: PropTypes.bool,
+    secondary: PropTypes.bool,
+    size: PropTypes.number,
+    style: PropTypes.object,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    size: 36
+  };
+
+  handleClick = (e) => {
     if (!this.props.disabled) {
       this.props.onClick();
     }
@@ -32,19 +42,4 @@ class Button extends React.PureComponent {
 
 }
 
-Button.propTypes = {
-  text: PropTypes.node,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  block: PropTypes.bool,
-  secondary: PropTypes.bool,
-  size: PropTypes.number,
-  style: PropTypes.object,
-  children: PropTypes.node
-};
-
-Button.defaultProps = {
-  size: 36
-};
-
 export default Button;
diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js
index bedc417fd..a4971f5f8 100644
--- a/app/javascript/mastodon/components/column_back_button.js
+++ b/app/javascript/mastodon/components/column_back_button.js
@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 
 class ColumnBackButton extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
 
-  handleClick () {
+  handleClick = () => {
     if (window.history && window.history.length === 1) this.context.router.push("/");
     else this.context.router.goBack();
   }
@@ -23,10 +22,6 @@ class ColumnBackButton extends React.PureComponent {
     );
   }
 
-};
-
-ColumnBackButton.contextTypes = {
-  router: PropTypes.object
-};
+}
 
 export default ColumnBackButton;
diff --git a/app/javascript/mastodon/components/column_back_button_slim.js b/app/javascript/mastodon/components/column_back_button_slim.js
index 9aa7e92c2..6966a138d 100644
--- a/app/javascript/mastodon/components/column_back_button_slim.js
+++ b/app/javascript/mastodon/components/column_back_button_slim.js
@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 
 class ColumnBackButtonSlim extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
+  static contextTypes = {
+    router: PropTypes.object
+  };
 
-  handleClick () {
+  handleClick = () => {
     this.context.router.push('/');
   }
 
@@ -25,8 +24,4 @@ class ColumnBackButtonSlim extends React.PureComponent {
   }
 }
 
-ColumnBackButtonSlim.contextTypes = {
-  router: PropTypes.object
-};
-
 export default ColumnBackButtonSlim;
diff --git a/app/javascript/mastodon/components/column_collapsable.js b/app/javascript/mastodon/components/column_collapsable.js
index 797946859..3154c977f 100644
--- a/app/javascript/mastodon/components/column_collapsable.js
+++ b/app/javascript/mastodon/components/column_collapsable.js
@@ -4,16 +4,19 @@ import PropTypes from 'prop-types';
 
 class ColumnCollapsable extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      collapsed: true
-    };
-
-    this.handleToggleCollapsed = this.handleToggleCollapsed.bind(this);
-  }
-
-  handleToggleCollapsed () {
+  static propTypes = {
+    icon: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    fullHeight: PropTypes.number.isRequired,
+    children: PropTypes.node,
+    onCollapse: PropTypes.func
+  };
+
+  state = {
+    collapsed: true
+  };
+
+  handleToggleCollapsed = () => {
     const currentState = this.state.collapsed;
 
     this.setState({ collapsed: !currentState });
@@ -46,12 +49,4 @@ class ColumnCollapsable extends React.PureComponent {
   }
 }
 
-ColumnCollapsable.propTypes = {
-  icon: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  fullHeight: PropTypes.number.isRequired,
-  children: PropTypes.node,
-  onCollapse: PropTypes.func
-};
-
 export default ColumnCollapsable;
diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js
index 6bdd06db7..e122debf4 100644
--- a/app/javascript/mastodon/components/display_name.js
+++ b/app/javascript/mastodon/components/display_name.js
@@ -5,6 +5,10 @@ import emojify from '../emoji';
 
 class DisplayName extends React.PureComponent {
 
+  static propTypes = {
+    account: ImmutablePropTypes.map.isRequired
+  };
+
   render () {
     const displayName     = this.props.account.get('display_name').length === 0 ? this.props.account.get('username') : this.props.account.get('display_name');
     const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) };
@@ -16,10 +20,6 @@ class DisplayName extends React.PureComponent {
     );
   }
 
-};
-
-DisplayName.propTypes = {
-  account: ImmutablePropTypes.map.isRequired
 }
 
 export default DisplayName;
diff --git a/app/javascript/mastodon/components/dropdown_menu.js b/app/javascript/mastodon/components/dropdown_menu.js
index aed0757b1..99432463c 100644
--- a/app/javascript/mastodon/components/dropdown_menu.js
+++ b/app/javascript/mastodon/components/dropdown_menu.js
@@ -4,20 +4,27 @@ import PropTypes from 'prop-types';
 
 class DropdownMenu extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      direction: 'left'
-    };
-    this.setRef = this.setRef.bind(this);
-    this.renderItem = this.renderItem.bind(this);
-  }
+  static propTypes = {
+    icon: PropTypes.string.isRequired,
+    items: PropTypes.array.isRequired,
+    size: PropTypes.number.isRequired,
+    direction: PropTypes.string,
+    ariaLabel: PropTypes.string
+  };
+
+  static defaultProps = {
+    ariaLabel: "Menu"
+  };
+
+  state = {
+    direction: 'left'
+  };
 
-  setRef (c) {
+  setRef = (c) => {
     this.dropdown = c;
   }
 
-  handleClick (i, e) {
+  handleClick = (i, e) => {
     const { action } = this.props.items[i];
 
     if (typeof action === 'function') {
@@ -27,7 +34,7 @@ class DropdownMenu extends React.PureComponent {
     }
   }
 
-  renderItem (item, i) {
+  renderItem = (item, i) => {
     if (item === null) {
       return <li key={ 'sep' + i } className='dropdown__sep' />;
     }
@@ -64,16 +71,4 @@ class DropdownMenu extends React.PureComponent {
 
 }
 
-DropdownMenu.propTypes = {
-  icon: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
-  size: PropTypes.number.isRequired,
-  direction: PropTypes.string,
-  ariaLabel: PropTypes.string
-};
-
-DropdownMenu.defaultProps = {
-  ariaLabel: "Menu"
-};
-
 export default DropdownMenu;
diff --git a/app/javascript/mastodon/components/extended_video_player.js b/app/javascript/mastodon/components/extended_video_player.js
index 34ede66fd..a07d27186 100644
--- a/app/javascript/mastodon/components/extended_video_player.js
+++ b/app/javascript/mastodon/components/extended_video_player.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 
 class ExtendedVideoPlayer extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleLoadedData = this.handleLoadedData.bind(this);
-    this.setRef = this.setRef.bind(this);
-  }
-
-  handleLoadedData () {
+  static propTypes = {
+    src: PropTypes.string.isRequired,
+    time: PropTypes.number,
+    controls: PropTypes.bool.isRequired,
+    muted: PropTypes.bool.isRequired
+  };
+
+  handleLoadedData = () => {
     if (this.props.time) {
       this.video.currentTime = this.props.time;
     }
@@ -23,7 +24,7 @@ class ExtendedVideoPlayer extends React.PureComponent {
     this.video.removeEventListener('loadeddata', this.handleLoadedData);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.video = c;
   }
 
@@ -44,11 +45,4 @@ class ExtendedVideoPlayer extends React.PureComponent {
 
 }
 
-ExtendedVideoPlayer.propTypes = {
-  src: PropTypes.string.isRequired,
-  time: PropTypes.number,
-  controls: PropTypes.bool.isRequired,
-  muted: PropTypes.bool.isRequired
-};
-
 export default ExtendedVideoPlayer;
diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js
index 87324b6c8..b229e5748 100644
--- a/app/javascript/mastodon/components/icon_button.js
+++ b/app/javascript/mastodon/components/icon_button.js
@@ -4,12 +4,30 @@ import PropTypes from 'prop-types';
 
 class IconButton extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick (e) {
+  static propTypes = {
+    className: PropTypes.string,
+    title: PropTypes.string.isRequired,
+    icon: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+    size: PropTypes.number,
+    active: PropTypes.bool,
+    style: PropTypes.object,
+    activeStyle: PropTypes.object,
+    disabled: PropTypes.bool,
+    inverted: PropTypes.bool,
+    animate: PropTypes.bool,
+    overlay: PropTypes.bool
+  };
+
+  static defaultProps = {
+    size: 18,
+    active: false,
+    disabled: false,
+    animate: false,
+    overlay: false
+  };
+
+  handleClick = (e) =>  {
     e.preventDefault();
 
     if (!this.props.disabled) {
@@ -70,27 +88,4 @@ class IconButton extends React.PureComponent {
 
 }
 
-IconButton.propTypes = {
-  className: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  size: PropTypes.number,
-  active: PropTypes.bool,
-  style: PropTypes.object,
-  activeStyle: PropTypes.object,
-  disabled: PropTypes.bool,
-  inverted: PropTypes.bool,
-  animate: PropTypes.bool,
-  overlay: PropTypes.bool
-};
-
-IconButton.defaultProps = {
-  size: 18,
-  active: false,
-  disabled: false,
-  animate: false,
-  overlay: false
-};
-
 export default IconButton;
diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index dc08c457d..92b1825bf 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -10,12 +10,16 @@ const messages = defineMessages({
 });
 
 class Item extends React.PureComponent {
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
 
-  handleClick (e) {
+  static propTypes = {
+    attachment: ImmutablePropTypes.map.isRequired,
+    index: PropTypes.number.isRequired,
+    size: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired
+  };
+
+  handleClick = (e) => {
     const { index, onClick } = this.props;
 
     if (e.button === 0) {
@@ -119,30 +123,26 @@ class Item extends React.PureComponent {
 
 }
 
-Item.propTypes = {
-  attachment: ImmutablePropTypes.map.isRequired,
-  index: PropTypes.number.isRequired,
-  size: PropTypes.number.isRequired,
-  onClick: PropTypes.func.isRequired,
-  autoPlayGif: PropTypes.bool.isRequired
-};
-
 class MediaGallery extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      visible: !props.sensitive
-    };
-    this.handleOpen = this.handleOpen.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
+  static propTypes = {
+    sensitive: PropTypes.bool,
+    media: ImmutablePropTypes.list.isRequired,
+    height: PropTypes.number.isRequired,
+    onOpenMedia: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    autoPlayGif: PropTypes.bool.isRequired
+  };
+
+  state = {
+    visible: !props.sensitive
+  };
 
-  handleOpen (e) {
+  handleOpen = (e) => {
     this.setState({ visible: !this.state.visible });
   }
 
-  handleClick (index) {
+  handleClick = (index) => {
     this.props.onOpenMedia(this.props.media, index);
   }
 
@@ -184,13 +184,4 @@ class MediaGallery extends React.PureComponent {
 
 }
 
-MediaGallery.propTypes = {
-  sensitive: PropTypes.bool,
-  media: ImmutablePropTypes.list.isRequired,
-  height: PropTypes.number.isRequired,
-  onOpenMedia: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  autoPlayGif: PropTypes.bool.isRequired
-};
-
 export default injectIntl(MediaGallery);
diff --git a/app/javascript/mastodon/components/permalink.js b/app/javascript/mastodon/components/permalink.js
index 26444f27c..531ece33f 100644
--- a/app/javascript/mastodon/components/permalink.js
+++ b/app/javascript/mastodon/components/permalink.js
@@ -3,12 +3,18 @@ import PropTypes from 'prop-types';
 
 class Permalink extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick (e) {
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    className: PropTypes.string,
+    href: PropTypes.string.isRequired,
+    to: PropTypes.string.isRequired,
+    children: PropTypes.node
+  };
+
+  handleClick = (e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.context.router.push(this.props.to);
@@ -27,15 +33,4 @@ class Permalink extends React.PureComponent {
 
 }
 
-Permalink.contextTypes = {
-  router: PropTypes.object
-};
-
-Permalink.propTypes = {
-  className: PropTypes.string,
-  href: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired,
-  children: PropTypes.node
-};
-
 export default Permalink;
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 4c4fb7e75..e82f1d7aa 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -17,18 +17,33 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class Status extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleAccountClick = this.handleAccountClick.bind(this);
-  }
-
-  handleClick () {
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map,
+    account: ImmutablePropTypes.map,
+    wrapped: PropTypes.bool,
+    onReply: PropTypes.func,
+    onFavourite: PropTypes.func,
+    onReblog: PropTypes.func,
+    onDelete: PropTypes.func,
+    onOpenMedia: PropTypes.func,
+    onOpenVideo: PropTypes.func,
+    onBlock: PropTypes.func,
+    me: PropTypes.number,
+    boostModal: PropTypes.bool,
+    autoPlayGif: PropTypes.bool,
+    muted: PropTypes.bool
+  };
+
+  handleClick = () => {
     const { status } = this.props;
     this.context.router.push(`/statuses/${status.getIn(['reblog', 'id'], status.get('id'))}`);
   }
 
-  handleAccountClick (id, e) {
+  handleAccountClick = (id, e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.context.router.push(`/accounts/${id}`);
@@ -108,25 +123,4 @@ class Status extends ImmutablePureComponent {
 
 }
 
-Status.contextTypes = {
-  router: PropTypes.object
-};
-
-Status.propTypes = {
-  status: ImmutablePropTypes.map,
-  account: ImmutablePropTypes.map,
-  wrapped: PropTypes.bool,
-  onReply: PropTypes.func,
-  onFavourite: PropTypes.func,
-  onReblog: PropTypes.func,
-  onDelete: PropTypes.func,
-  onOpenMedia: PropTypes.func,
-  onOpenVideo: PropTypes.func,
-  onBlock: PropTypes.func,
-  me: PropTypes.number,
-  boostModal: PropTypes.bool,
-  autoPlayGif: PropTypes.bool,
-  muted: PropTypes.bool
-};
-
 export default Status;
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 1c2445232..b3d5e442c 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -21,52 +21,57 @@ const messages = defineMessages({
 
 class StatusActionBar extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleReplyClick = this.handleReplyClick.bind(this);
-    this.handleFavouriteClick = this.handleFavouriteClick.bind(this);
-    this.handleReblogClick = this.handleReblogClick.bind(this);
-    this.handleDeleteClick = this.handleDeleteClick.bind(this);
-    this.handleMentionClick = this.handleMentionClick.bind(this);
-    this.handleMuteClick = this.handleMuteClick.bind(this);
-    this.handleBlockClick = this.handleBlockClick.bind(this);
-    this.handleOpen = this.handleOpen.bind(this);
-    this.handleReport = this.handleReport.bind(this);
-  }
-
-  handleReplyClick () {
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onReply: PropTypes.func,
+    onFavourite: PropTypes.func,
+    onReblog: PropTypes.func,
+    onDelete: PropTypes.func,
+    onMention: PropTypes.func,
+    onMute: PropTypes.func,
+    onBlock: PropTypes.func,
+    onReport: PropTypes.func,
+    me: PropTypes.number.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
+  handleReplyClick = () => {
     this.props.onReply(this.props.status, this.context.router);
   }
 
-  handleFavouriteClick () {
+  handleFavouriteClick = () => {
     this.props.onFavourite(this.props.status);
   }
 
-  handleReblogClick (e) {
+  handleReblogClick = (e) => {
     this.props.onReblog(this.props.status, e);
   }
 
-  handleDeleteClick () {
+  handleDeleteClick = () => {
     this.props.onDelete(this.props.status);
   }
 
-  handleMentionClick () {
+  handleMentionClick = () => {
     this.props.onMention(this.props.status.get('account'), this.context.router);
   }
 
-  handleMuteClick () {
+  handleMuteClick = () => {
     this.props.onMute(this.props.status.get('account'));
   }
 
-  handleBlockClick () {
+  handleBlockClick = () => {
     this.props.onBlock(this.props.status.get('account'));
   }
 
-  handleOpen () {
+  handleOpen = () => {
     this.context.router.push(`/statuses/${this.props.status.get('id')}`);
   }
 
-  handleReport () {
+  handleReport = () => {
     this.props.onReport(this.props.status);
     this.context.router.push('/report');
   }
@@ -122,22 +127,4 @@ class StatusActionBar extends React.PureComponent {
 
 }
 
-StatusActionBar.contextTypes = {
-  router: PropTypes.object
-};
-
-StatusActionBar.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  onReply: PropTypes.func,
-  onFavourite: PropTypes.func,
-  onReblog: PropTypes.func,
-  onDelete: PropTypes.func,
-  onMention: PropTypes.func,
-  onMute: PropTypes.func,
-  onBlock: PropTypes.func,
-  onReport: PropTypes.func,
-  me: PropTypes.number.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(StatusActionBar);
diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js
index e613f829f..f7d6b750f 100644
--- a/app/javascript/mastodon/components/status_content.js
+++ b/app/javascript/mastodon/components/status_content.js
@@ -9,19 +9,17 @@ import Permalink from './permalink';
 
 class StatusContent extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-
-    this.state = {
-      hidden: true
-    };
-
-    this.onMentionClick = this.onMentionClick.bind(this);
-    this.onHashtagClick = this.onHashtagClick.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this)
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.handleSpoilerClick = this.handleSpoilerClick.bind(this);
-    this.setRef = this.setRef.bind(this);
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onClick: PropTypes.func
+  };
+
+  state = {
+    hidden: true
   };
 
   componentDidMount () {
@@ -46,14 +44,14 @@ class StatusContent extends React.PureComponent {
     }
   }
 
-  onMentionClick (mention, e) {
+  onMentionClick = (mention, e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.context.router.push(`/accounts/${mention.get('id')}`);
     }
   }
 
-  onHashtagClick (hashtag, e) {
+  onHashtagClick = (hashtag, e) => {
     hashtag = hashtag.replace(/^#/, '').toLowerCase();
 
     if (e.button === 0) {
@@ -62,11 +60,11 @@ class StatusContent extends React.PureComponent {
     }
   }
 
-  handleMouseDown (e) {
+  handleMouseDown = (e) => {
     this.startXY = [e.clientX, e.clientY];
   }
 
-  handleMouseUp (e) {
+  handleMouseUp = (e) => {
     const [ startX, startY ] = this.startXY;
     const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
 
@@ -81,12 +79,12 @@ class StatusContent extends React.PureComponent {
     this.startXY = null;
   }
 
-  handleSpoilerClick (e) {
+  handleSpoilerClick = (e) => {
     e.preventDefault();
     this.setState({ hidden: !this.state.hidden });
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -158,13 +156,4 @@ class StatusContent extends React.PureComponent {
 
 }
 
-StatusContent.contextTypes = {
-  router: PropTypes.object
-};
-
-StatusContent.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  onClick: PropTypes.func
-};
-
 export default StatusContent;
diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js
index 9abf1fbfe..0413e9d5f 100644
--- a/app/javascript/mastodon/components/status_list.js
+++ b/app/javascript/mastodon/components/status_list.js
@@ -9,14 +9,25 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 class StatusList extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleScroll = this.handleScroll.bind(this);
-    this.setRef = this.setRef.bind(this);
-    this.handleLoadMore = this.handleLoadMore.bind(this);
-  }
-
-  handleScroll (e) {
+  static propTypes = {
+    scrollKey: PropTypes.string.isRequired,
+    statusIds: ImmutablePropTypes.list.isRequired,
+    onScrollToBottom: PropTypes.func,
+    onScrollToTop: PropTypes.func,
+    onScroll: PropTypes.func,
+    shouldUpdateScroll: PropTypes.func,
+    isLoading: PropTypes.bool,
+    isUnread: PropTypes.bool,
+    hasMore: PropTypes.bool,
+    prepend: PropTypes.node,
+    emptyMessage: PropTypes.node
+  };
+
+  static defaultProps = {
+    trackScroll: true
+  };
+
+  handleScroll = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
     const offset = scrollHeight - scrollTop - clientHeight;
     this._oldScrollPosition = scrollHeight - scrollTop;
@@ -52,11 +63,11 @@ class StatusList extends ImmutablePureComponent {
     this.node.removeEventListener('scroll', this.handleScroll);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
-  handleLoadMore (e) {
+  handleLoadMore = (e) => {
     e.preventDefault();
     this.props.onScrollToBottom();
   }
@@ -109,22 +120,4 @@ class StatusList extends ImmutablePureComponent {
 
 }
 
-StatusList.propTypes = {
-  scrollKey: PropTypes.string.isRequired,
-  statusIds: ImmutablePropTypes.list.isRequired,
-  onScrollToBottom: PropTypes.func,
-  onScrollToTop: PropTypes.func,
-  onScroll: PropTypes.func,
-  shouldUpdateScroll: PropTypes.func,
-  isLoading: PropTypes.bool,
-  isUnread: PropTypes.bool,
-  hasMore: PropTypes.bool,
-  prepend: PropTypes.node,
-  emptyMessage: PropTypes.node
-};
-
-StatusList.defaultProps = {
-  trackScroll: true
-};
-
 export default StatusList;
diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js
index dd3ea0ed4..ba6d97c84 100644
--- a/app/javascript/mastodon/components/video_player.js
+++ b/app/javascript/mastodon/components/video_player.js
@@ -13,31 +13,34 @@ const messages = defineMessages({
 
 class VideoPlayer extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      visible: !this.props.sensitive,
-      preview: true,
-      muted: true,
-      hasAudio: true,
-      videoError: false
-    };
-
-    this.handleClick = this.handleClick.bind(this);
-    this.handleVideoClick = this.handleVideoClick.bind(this);
-    this.handleOpen = this.handleOpen.bind(this);
-    this.handleVisibility = this.handleVisibility.bind(this);
-    this.handleExpand = this.handleExpand.bind(this);
-    this.setRef = this.setRef.bind(this);
-    this.handleLoadedData = this.handleLoadedData.bind(this);
-    this.handleVideoError = this.handleVideoError.bind(this);
-  }
-
-  handleClick () {
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    sensitive: PropTypes.bool,
+    intl: PropTypes.object.isRequired,
+    autoplay: PropTypes.bool,
+    onOpenVideo: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    width: 239,
+    height: 110
+  };
+
+  state = {
+    visible: !this.props.sensitive,
+    preview: true,
+    muted: true,
+    hasAudio: true,
+    videoError: false
+  };
+
+  handleClick = () => {
     this.setState({ muted: !this.state.muted });
   }
 
-  handleVideoClick (e) {
+  handleVideoClick = (e) => {
     e.stopPropagation();
 
     const node = this.video;
@@ -49,33 +52,33 @@ class VideoPlayer extends React.PureComponent {
     }
   }
 
-  handleOpen () {
+  handleOpen = () => {
     this.setState({ preview: !this.state.preview });
   }
 
-  handleVisibility () {
+  handleVisibility = () => {
     this.setState({
       visible: !this.state.visible,
       preview: true
     });
   }
 
-  handleExpand () {
+  handleExpand = () => {
     this.video.pause();
     this.props.onOpenVideo(this.props.media, this.video.currentTime);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.video = c;
   }
 
-  handleLoadedData () {
+  handleLoadedData = () => {
     if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
       this.setState({ hasAudio: false });
     }
   }
 
-  handleVideoError () {
+  handleVideoError = () => {
     this.setState({ videoError: true });
   }
 
@@ -191,19 +194,4 @@ class VideoPlayer extends React.PureComponent {
 
 }
 
-VideoPlayer.propTypes = {
-  media: ImmutablePropTypes.map.isRequired,
-  width: PropTypes.number,
-  height: PropTypes.number,
-  sensitive: PropTypes.bool,
-  intl: PropTypes.object.isRequired,
-  autoplay: PropTypes.bool,
-  onOpenVideo: PropTypes.func.isRequired
-};
-
-VideoPlayer.defaultProps = {
-  width: 239,
-  height: 110
-};
-
 export default injectIntl(VideoPlayer);