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/notifications/components/clear_column_button.jsx

@@ -1,15 +1,11 @@
+import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   clear: { id: 'notifications.clear', defaultMessage: 'Clear notifications' }
 });
 
-const ClearColumnButton = React.createClass({
-
-  propTypes: {
-    onClick: React.PropTypes.func.isRequired,
-    intl: React.PropTypes.object.isRequired
-  },
+class ClearColumnButton extends React.Component {
 
   render () {
     const { intl } = this.props;
@@ -20,6 +16,11 @@ const ClearColumnButton = React.createClass({
       </div>
     );
   }
-})
+}
+
+ClearColumnButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  intl: PropTypes.object.isRequired
+};
 
 export default injectIntl(ClearColumnButton);

app/assets/javascripts/components/features/notifications/components/column_settings.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 { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ColumnCollapsable from '../../../components/column_collapsable';
@@ -23,18 +23,7 @@ const rowStyle = {
 
 };
 
-const ColumnSettings = React.createClass({
-
-  propTypes: {
-    settings: ImmutablePropTypes.map.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    onSave: React.PropTypes.func.isRequired,
-    intl: React.PropTypes.shape({
-      formatMessage: React.PropTypes.func.isRequired
-    }).isRequired
-  },
-
-  mixins: [PureRenderMixin],
+class ColumnSettings extends React.PureComponent {
 
   render () {
     const { settings, intl, onChange, onSave } = this.props;
@@ -82,6 +71,15 @@ const ColumnSettings = React.createClass({
     );
   }
 
-});
+}
+
+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/assets/javascripts/components/features/notifications/components/notification.jsx

@@ -1,4 +1,3 @@
-import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusContainer from '../../../containers/status_container';
 import AccountContainer from '../../../containers/account_container';
@@ -11,13 +10,7 @@ const linkStyle = {
   fontWeight: '500'
 };
 
-const Notification = React.createClass({
-
-  propTypes: {
-    notification: ImmutablePropTypes.map.isRequired
-  },
-
-  mixins: [PureRenderMixin],
+class Notification extends React.PureComponent {
 
   renderFollow (account, link) {
     return (
@@ -33,11 +26,11 @@ const Notification = React.createClass({
         <AccountContainer id={account.get('id')} withNote={false} />
       </div>
     );
-  },
+  }
 
   renderMention (notification) {
     return <StatusContainer id={notification.get('status')} />;
-  },
+  }
 
   renderFavourite (notification, link) {
     return (
@@ -53,7 +46,7 @@ const Notification = React.createClass({
         <StatusContainer id={notification.get('status')} muted={true} />
       </div>
     );
-  },
+  }
 
   renderReblog (notification, link) {
     return (
@@ -69,7 +62,7 @@ const Notification = React.createClass({
         <StatusContainer id={notification.get('status')} muted={true} />
       </div>
     );
-  },
+  }
 
   render () { // eslint-disable-line consistent-return
     const { notification } = this.props;
@@ -90,6 +83,10 @@ const Notification = React.createClass({
     }
   }
 
-});
+}
+
+Notification.propTypes = {
+  notification: ImmutablePropTypes.map.isRequired
+};
 
 export default Notification;

app/assets/javascripts/components/features/notifications/components/setting_toggle.jsx

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Toggle from 'react-toggle';
 
@@ -23,10 +24,10 @@ const SettingToggle = ({ settings, settingKey, label, onChange, htmlFor = '' })
 
 SettingToggle.propTypes = {
   settings: ImmutablePropTypes.map.isRequired,
-  settingKey: React.PropTypes.array.isRequired,
-  label: React.PropTypes.node.isRequired,
-  onChange: React.PropTypes.func.isRequired,
-  htmlFor: React.PropTypes.string
+  settingKey: PropTypes.array.isRequired,
+  label: PropTypes.node.isRequired,
+  onChange: PropTypes.func.isRequired,
+  htmlFor: PropTypes.string
 };
 
 export default SettingToggle;

app/assets/javascripts/components/features/notifications/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 Column from '../ui/components/column';
 import { expandNotifications, clearNotifications, scrollTopNotifications } from '../../actions/notifications';
@@ -28,24 +28,15 @@ const mapStateToProps = state => ({
   isUnread: state.getIn(['notifications', 'unread']) > 0
 });
 
-const Notifications = React.createClass({
+class Notifications extends React.PureComponent {
 
-  propTypes: {
-    notifications: ImmutablePropTypes.list.isRequired,
-    dispatch: React.PropTypes.func.isRequired,
-    trackScroll: React.PropTypes.bool,
-    intl: React.PropTypes.object.isRequired,
-    isLoading: React.PropTypes.bool,
-    isUnread: React.PropTypes.bool
-  },
-
-  getDefaultProps () {
-    return {
-      trackScroll: true
-    };
-  },
-
-  mixins: [PureRenderMixin],
+  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);
+  }
 
   handleScroll (e) {
     const { scrollTop, scrollHeight, clientHeight } = e.target;
@@ -59,28 +50,28 @@ const Notifications = React.createClass({
     } else {
       this.props.dispatch(scrollTopNotifications(false));
     }
-  },
+  }
 
   componentDidUpdate (prevProps) {
     if (this.node.scrollTop > 0 && (prevProps.notifications.size < this.props.notifications.size && prevProps.notifications.first() !== this.props.notifications.first() && !!this._oldScrollPosition)) {
       this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition;
     }
-  },
+  }
 
   handleLoadMore (e) {
     e.preventDefault();
     this.props.dispatch(expandNotifications());
-  },
+  }
 
   handleClear () {
     if (window.confirm(this.props.intl.formatMessage(messages.confirm))) {
       this.props.dispatch(clearNotifications());
     }
-  },
+  }
 
   setRef (c) {
     this.node = c;
-  },
+  }
 
   render () {
     const { intl, notifications, trackScroll, isLoading, isUnread } = this.props;
@@ -137,6 +128,19 @@ const Notifications = React.createClass({
     }
   }
 
-});
+}
+
+Notifications.propTypes = {
+  notifications: ImmutablePropTypes.list.isRequired,
+  dispatch: PropTypes.func.isRequired,
+  trackScroll: PropTypes.bool,
+  intl: PropTypes.object.isRequired,
+  isLoading: PropTypes.bool,
+  isUnread: PropTypes.bool
+};
+
+Notifications.defaultProps = {
+  trackScroll: true
+};
 
 export default connect(mapStateToProps)(injectIntl(Notifications));