Remove deprecated features at React v15.5 (#1905)

* Remove deprecated features at React v15.5

- [x] React.PropTypes
- [x] react-addons-pure-render-mixin
- [x] react-addons-test-utils

* Uncommented out & Add browserify_rails options

* re-add react-addons-shallow

* Fix syntax error from resolve conflicts

* follow up 59a77923b3

app/assets/javascripts/components/features/status/components/action_bar.jsx

@@ -1,4 +1,4 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PropTypes from 'prop-types';
 import IconButton from '../../../components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenu from '../../../components/dropdown_menu';
@@ -13,50 +13,42 @@ const messages = defineMessages({
   report: { id: 'status.report', defaultMessage: 'Report @{name}' }
 });
 
-const ActionBar = React.createClass({
+class ActionBar extends React.PureComponent {
 
-  contextTypes: {
-    router: React.PropTypes.object
-  },
-
-  propTypes: {
-    status: ImmutablePropTypes.map.isRequired,
-    onReply: React.PropTypes.func.isRequired,
-    onReblog: React.PropTypes.func.isRequired,
-    onFavourite: React.PropTypes.func.isRequired,
-    onDelete: React.PropTypes.func.isRequired,
-    onMention: React.PropTypes.func.isRequired,
-    onReport: React.PropTypes.func,
-    me: React.PropTypes.number.isRequired,
-    intl: React.PropTypes.object.isRequired
-  },
-
-  mixins: [PureRenderMixin],
+  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);
+  }
 
   handleReplyClick () {
     this.props.onReply(this.props.status);
-  },
+  }
 
   handleReblogClick (e) {
     this.props.onReblog(this.props.status, e);
-  },
+  }
 
   handleFavouriteClick () {
     this.props.onFavourite(this.props.status);
-  },
+  }
 
   handleDeleteClick () {
     this.props.onDelete(this.props.status);
-  },
+  }
 
   handleMentionClick () {
     this.props.onMention(this.props.status.get('account'), this.context.router);
-  },
+  }
 
   handleReport () {
     this.props.onReport(this.props.status);
     this.context.router.push('/report');
-  },
+  }
 
   render () {
     const { status, me, intl } = this.props;
@@ -85,6 +77,22 @@ const ActionBar = React.createClass({
     );
   }
 
-});
+}
+
+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/assets/javascripts/components/features/status/components/card.jsx

@@ -1,4 +1,3 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const contentStyle = {
@@ -28,12 +27,7 @@ const getHostname = url => {
   return parser.hostname;
 };
 
-const Card = React.createClass({
-  propTypes: {
-    card: ImmutablePropTypes.map
-  },
-
-  mixins: [PureRenderMixin],
+class Card extends React.PureComponent {
 
   render () {
     const { card } = this.props;
@@ -64,6 +58,10 @@ const Card = React.createClass({
       </a>
     );
   }
-});
+}
+
+Card.propTypes = {
+  card: ImmutablePropTypes.map
+};
 
 export default Card;

app/assets/javascripts/components/features/status/components/detailed_status.jsx

@@ -1,4 +1,4 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
@@ -10,20 +10,12 @@ import { Link } from 'react-router';
 import { FormattedDate, FormattedNumber } from 'react-intl';
 import CardContainer from '../containers/card_container';
 
-const DetailedStatus = React.createClass({
+class DetailedStatus extends React.PureComponent {
 
-  contextTypes: {
-    router: React.PropTypes.object
-  },
-
-  propTypes: {
-    status: ImmutablePropTypes.map.isRequired,
-    onOpenMedia: React.PropTypes.func.isRequired,
-    onOpenVideo: React.PropTypes.func.isRequired,
-    autoPlayGif: React.PropTypes.bool,
-  },
-
-  mixins: [PureRenderMixin],
+  constructor (props, context) {
+    super(props, context);
+    this.handleAccountClick = this.handleAccountClick.bind(this);
+  }
 
   handleAccountClick (e) {
     if (e.button === 0) {
@@ -32,7 +24,7 @@ const DetailedStatus = React.createClass({
     }
 
     e.stopPropagation();
-  },
+  }
 
   render () {
     const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
@@ -74,6 +66,17 @@ const DetailedStatus = React.createClass({
     );
   }
 
-});
+}
+
+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/assets/javascripts/components/features/status/index.jsx

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { fetchStatus } from '../../actions/statuses';
 import Immutable from 'immutable';
@@ -46,33 +46,30 @@ const makeMapStateToProps = () => {
   return mapStateToProps;
 };
 
-const Status = React.createClass({
-  contextTypes: {
-    router: React.PropTypes.object
-  },
+class Status extends React.PureComponent {
 
-  propTypes: {
-    params: React.PropTypes.object.isRequired,
-    dispatch: React.PropTypes.func.isRequired,
-    status: ImmutablePropTypes.map,
-    ancestorsIds: ImmutablePropTypes.list,
-    descendantsIds: ImmutablePropTypes.list,
-    me: React.PropTypes.number,
-    boostModal: React.PropTypes.bool,
-    autoPlayGif: React.PropTypes.bool
-  },
-
-  mixins: [PureRenderMixin],
+  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);
+  }
 
   componentWillMount () {
     this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
-  },
+  }
 
   componentWillReceiveProps (nextProps) {
     if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) {
       this.props.dispatch(fetchStatus(Number(nextProps.params.statusId)));
     }
-  },
+  }
 
   handleFavouriteClick (status) {
     if (status.get('favourited')) {
@@ -80,15 +77,15 @@ const Status = React.createClass({
     } else {
       this.props.dispatch(favourite(status));
     }
-  },
+  }
 
   handleReplyClick (status) {
     this.props.dispatch(replyCompose(status, this.context.router));
-  },
+  }
 
   handleModalReblog (status) {
     this.props.dispatch(reblog(status));
-  },
+  }
 
   handleReblogClick (status, e) {
     if (status.get('reblogged')) {
@@ -100,31 +97,31 @@ const Status = React.createClass({
         this.props.dispatch(openModal('BOOST', { status, onReblog: this.handleModalReblog }));
       }
     }
-  },
+  }
 
   handleDeleteClick (status) {
     this.props.dispatch(deleteStatus(status.get('id')));
-  },
+  }
 
   handleMentionClick (account, router) {
     this.props.dispatch(mentionCompose(account, router));
-  },
+  }
 
   handleOpenMedia (media, index) {
     this.props.dispatch(openModal('MEDIA', { media, index }));
-  },
+  }
 
   handleOpenVideo (media, time) {
     this.props.dispatch(openModal('VIDEO', { media, time }));
-  },
+  }
 
   handleReport (status) {
     this.props.dispatch(initReport(status.get('account'), status));
-  },
+  }
 
   renderChildren (list) {
     return list.map(id => <StatusContainer key={id} id={id} />);
-  },
+  }
 
   render () {
     let ancestors, descendants;
@@ -167,6 +164,21 @@ const Status = React.createClass({
     );
   }
 
-});
+}
+
+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
+};
 
 export default connect(makeMapStateToProps)(Status);