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;

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