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