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/ui/components/boost_modal.js

@@ -16,18 +16,29 @@ const messages = defineMessages({
 
 class BoostModal extends ImmutablePureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object
+  };
+
+  static propTypes = {
+    status: ImmutablePropTypes.map.isRequired,
+    onReblog: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   constructor (props, context) {
     super(props, context);
     this.handleReblog = this.handleReblog.bind(this);
     this.handleAccountClick = this.handleAccountClick.bind(this);
   }
 
-  handleReblog() {
+  handleReblog = () => {
     this.props.onReblog(this.props.status);
     this.props.onClose();
   }
 
-  handleAccountClick (e) {
+  handleAccountClick = (e) => {
     if (e.button === 0) {
       e.preventDefault();
       this.props.onClose();
@@ -70,15 +81,4 @@ class BoostModal extends ImmutablePureComponent {
 
 }
 
-BoostModal.contextTypes = {
-  router: PropTypes.object
-};
-
-BoostModal.propTypes = {
-  status: ImmutablePropTypes.map.isRequired,
-  onReblog: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(BoostModal);

app/javascript/mastodon/features/ui/components/column.js

@@ -32,14 +32,15 @@ const scrollTop = (node) => {
 
 class Column extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleHeaderClick = this.handleHeaderClick.bind(this);
-    this.handleWheel = this.handleWheel.bind(this);
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    heading: PropTypes.string,
+    icon: PropTypes.string,
+    children: PropTypes.node,
+    active: PropTypes.bool,
+    hideHeadingOnMobile: PropTypes.bool
+  };
 
-  handleHeaderClick () {
+  handleHeaderClick = () => {
     const scrollable = this.node.querySelector('.scrollable');
     if (!scrollable) {
       return;
@@ -47,13 +48,13 @@ class Column extends React.PureComponent {
     this._interruptScrollAnimation = scrollTop(scrollable);
   }
 
-  handleWheel () {
+  handleWheel = () => {
     if (typeof this._interruptScrollAnimation !== 'undefined') {
       this._interruptScrollAnimation();
     }
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -82,12 +83,4 @@ class Column extends React.PureComponent {
 
 }
 
-Column.propTypes = {
-  heading: PropTypes.string,
-  icon: PropTypes.string,
-  children: PropTypes.node,
-  active: PropTypes.bool,
-  hideHeadingOnMobile: PropTypes.bool
-};
-
 export default Column;

app/javascript/mastodon/features/ui/components/column_header.js

@@ -3,12 +3,16 @@ import PropTypes from 'prop-types'
 
 class ColumnHeader extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-  }
+  static propTypes = {
+    icon: PropTypes.string,
+    type: PropTypes.string,
+    active: PropTypes.bool,
+    onClick: PropTypes.func,
+    hideOnMobile: PropTypes.bool,
+    columnHeaderId: PropTypes.string
+  };
 
-  handleClick () {
+  handleClick = () => {
     this.props.onClick();
   }
 
@@ -31,13 +35,4 @@ class ColumnHeader extends React.PureComponent {
 
 }
 
-ColumnHeader.propTypes = {
-  icon: PropTypes.string,
-  type: PropTypes.string,
-  active: PropTypes.bool,
-  onClick: PropTypes.func,
-  hideOnMobile: PropTypes.bool,
-  columnHeaderId: PropTypes.string
-};
-
 export default ColumnHeader;

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 
 class ColumnsArea extends React.PureComponent {
 
+  static propTypes = {
+    children: PropTypes.node
+  };
+
   render () {
     return (
       <div className='columns-area'>
@@ -13,8 +17,4 @@ class ColumnsArea extends React.PureComponent {
 
 }
 
-ColumnsArea.propTypes = {
-  children: PropTypes.node
-};
-
 export default ColumnsArea;

app/javascript/mastodon/features/ui/components/confirmation_modal.js

@@ -5,18 +5,20 @@ import Button from '../../../components/button';
 
 class ConfirmationModal extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-  }
+  static propTypes = {
+    message: PropTypes.node.isRequired,
+    confirm: PropTypes.string.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleClick () {
+  handleClick = () => {
     this.props.onClose();
     this.props.onConfirm();
   }
 
-  handleCancel (e) {
+  handleCancel = (e) => {
     e.preventDefault();
     this.props.onClose();
   }
@@ -40,12 +42,4 @@ class ConfirmationModal extends React.PureComponent {
 
 }
 
-ConfirmationModal.propTypes = {
-  message: PropTypes.node.isRequired,
-  confirm: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onConfirm: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(ConfirmationModal);

app/javascript/mastodon/features/ui/components/media_modal.js

@@ -14,25 +14,26 @@ const messages = defineMessages({
 
 class MediaModal extends ImmutablePureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      index: null
-    };
-    this.handleNextClick = this.handleNextClick.bind(this);
-    this.handlePrevClick = this.handlePrevClick.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
+  static propTypes = {
+    media: ImmutablePropTypes.list.isRequired,
+    index: PropTypes.number.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
 
-  handleNextClick () {
+  state = {
+    index: null
+  };
+
+  handleNextClick = () => {
     this.setState({ index: (this.getIndex() + 1) % this.props.media.size});
   }
 
-  handlePrevClick () {
+  handlePrevClick = () => {
     this.setState({ index: (this.getIndex() - 1) % this.props.media.size});
   }
 
-  handleKeyUp (e) {
+  handleKeyUp = (e) => {
     switch(e.key) {
     case 'ArrowLeft':
       this.handlePrevClick();
@@ -93,11 +94,4 @@ class MediaModal extends ImmutablePureComponent {
 
 }
 
-MediaModal.propTypes = {
-  media: ImmutablePropTypes.list.isRequired,
-  index: PropTypes.number.isRequired,
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(MediaModal);

app/javascript/mastodon/features/ui/components/modal_root.js

@@ -17,12 +17,13 @@ const MODAL_COMPONENTS = {
 
 class ModalRoot extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
+  static propTypes = {
+    type: PropTypes.string,
+    props: PropTypes.object,
+    onClose: PropTypes.func.isRequired
+  };
 
-  handleKeyUp (e) {
+  handleKeyUp = (e) => {
     if ((e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27)
          && !!this.props.type) {
       this.props.onClose();
@@ -84,10 +85,4 @@ class ModalRoot extends React.PureComponent {
 
 }
 
-ModalRoot.propTypes = {
-  type: PropTypes.string,
-  props: PropTypes.object,
-  onClose: PropTypes.func.isRequired
-};
-
 export default ModalRoot;

app/javascript/mastodon/features/ui/components/onboarding_modal.js

@@ -165,27 +165,29 @@ const mapStateToProps = state => ({
 
 class OnboardingModal extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      currentIndex: 0
-    };
-    this.handleSkip = this.handleSkip.bind(this);
-    this.handleDot = this.handleDot.bind(this);
-    this.handleNext = this.handleNext.bind(this);
-  }
+  static propTypes = {
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+    me: ImmutablePropTypes.map.isRequired,
+    domain: PropTypes.string.isRequired,
+    admin: ImmutablePropTypes.map
+  };
 
-  handleSkip (e) {
+  state = {
+    currentIndex: 0
+  };
+
+  handleSkip = (e) => {
     e.preventDefault();
     this.props.onClose();
   }
 
-  handleDot (i, e) {
+  handleDot = (i, e) => {
     e.preventDefault();
     this.setState({ currentIndex: i });
   }
 
-  handleNext (maxNum, e) {
+  handleNext = (maxNum, e) => {
     e.preventDefault();
 
     if (this.state.currentIndex < maxNum - 1) {
@@ -253,12 +255,4 @@ class OnboardingModal extends React.PureComponent {
 
 }
 
-OnboardingModal.propTypes = {
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired,
-  me: ImmutablePropTypes.map.isRequired,
-  domain: PropTypes.string.isRequired,
-  admin: ImmutablePropTypes.map
-}
-
 export default connect(mapStateToProps)(injectIntl(OnboardingModal));

app/javascript/mastodon/features/ui/components/upload_area.js

@@ -5,13 +5,12 @@ import { FormattedMessage } from 'react-intl';
 
 class UploadArea extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
+  static propTypes = {
+    active: PropTypes.bool,
+    onClose: PropTypes.func
+  };
 
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-  }
-
-  handleKeyUp (e) {
+  handleKeyUp = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -52,9 +51,4 @@ class UploadArea extends React.PureComponent {
 
 }
 
-UploadArea.propTypes = {
-  active: PropTypes.bool,
-  onClose: PropTypes.func
-};
-
 export default UploadArea;

app/javascript/mastodon/features/ui/components/video_modal.js

@@ -13,6 +13,13 @@ const messages = defineMessages({
 
 class VideoModal extends ImmutablePureComponent {
 
+  static propTypes = {
+    media: ImmutablePropTypes.map.isRequired,
+    time: PropTypes.number,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
+  };
+
   render () {
     const { media, intl, time, onClose } = this.props;
 
@@ -30,11 +37,4 @@ class VideoModal extends ImmutablePureComponent {
 
 }
 
-VideoModal.propTypes = {
-  media: ImmutablePropTypes.map.isRequired,
-  time: PropTypes.number,
-  onClose: PropTypes.func.isRequired,
-  intl: PropTypes.object.isRequired
-};
-
 export default injectIntl(VideoModal);

app/javascript/mastodon/features/ui/index.js

@@ -20,27 +20,21 @@ const noOp = () => false;
 
 class UI extends React.PureComponent {
 
-  constructor (props, context) {
-    super(props, context);
-    this.state = {
-      width: window.innerWidth,
-      draggingOver: false
-    };
-    this.handleResize = debounce(this.handleResize.bind(this), 500);
-    this.handleDragEnter = this.handleDragEnter.bind(this);
-    this.handleDragOver = this.handleDragOver.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
-    this.handleDragLeave = this.handleDragLeave.bind(this);
-    this.handleDragEnd = this.handleDragLeave.bind(this)
-    this.closeUploadModal = this.closeUploadModal.bind(this)
-    this.setRef = this.setRef.bind(this);
-  }
+  static propTypes = {
+    dispatch: PropTypes.func.isRequired,
+    children: PropTypes.node
+  };
 
-  handleResize () {
+  state = {
+    width: window.innerWidth,
+    draggingOver: false
+  };
+
+  handleResize = () => {
     this.setState({ width: window.innerWidth });
   }
 
-  handleDragEnter (e) {
+  handleDragEnter = (e) => {
     e.preventDefault();
 
     if (!this.dragTargets) {
@@ -56,7 +50,7 @@ class UI extends React.PureComponent {
     }
   }
 
-  handleDragOver (e) {
+  handleDragOver = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -69,7 +63,7 @@ class UI extends React.PureComponent {
     return false;
   }
 
-  handleDrop (e) {
+  handleDrop = (e) => {
     e.preventDefault();
 
     this.setState({ draggingOver: false });
@@ -79,7 +73,7 @@ class UI extends React.PureComponent {
     }
   }
 
-  handleDragLeave (e) {
+  handleDragLeave = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -92,7 +86,7 @@ class UI extends React.PureComponent {
     this.setState({ draggingOver: false });
   }
 
-  closeUploadModal() {
+  closeUploadModal = () => {
     this.setState({ draggingOver: false });
   }
 
@@ -117,7 +111,7 @@ class UI extends React.PureComponent {
     document.removeEventListener('dragend', this.handleDragEnd);
   }
 
-  setRef (c) {
+  setRef = (c) => {
     this.node = c;
   }
 
@@ -160,9 +154,4 @@ class UI extends React.PureComponent {
 
 }
 
-UI.propTypes = {
-  dispatch: PropTypes.func.isRequired,
-  children: PropTypes.node
-};
-
 export default connect()(UI);