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