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