Upgrade react to 15.5 and deal with deprecations

package.json

@@ -33,12 +33,13 @@
     "object-assign": "^4.0.1",
     "object-values": "^1.0.0",
     "object.map": "^1.0.0",
-    "react": "^15.4.0",
+    "prop-types": "^15.5.1",
+    "react": "^15.5.0",
     "react-abstract-autocomplete": "^1.0.0",
-    "react-addons-css-transition-group": "^15.0.2",
+    "react-addons-css-transition-group": "^15.5.1",
     "react-dnd": "^2.0.2",
     "react-dnd-html5-backend": "^2.0.0",
-    "react-dom": "^15.4.0",
+    "react-dom": "^15.5.0",
     "react-hot-loader": "^3.0.0-beta.6",
     "react-i18next": "^2.0.1",
     "react-list": "^0.8.0",

src/Uwave.js

@@ -3,8 +3,8 @@
 import 'es6-promise';
 import 'whatwg-fetch';
 
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import React from 'react';
+import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { AppContainer as HotContainer } from 'react-hot-loader';
 import injectTapEventPlugin from 'react-tap-event-plugin';
@@ -111,6 +111,6 @@ export default class Uwave {
     }
 
     this.renderTarget = target;
-    ReactDOM.render(this.getComponent(), target);
+    render(this.getComponent(), target);
   }
 }

src/components/About/index.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Overlay from '../Overlay';
 import OverlayHeader from '../Overlay/Header';
 
@@ -19,8 +20,8 @@ const About = ({
 );
 
 About.propTypes = {
-  onCloseOverlay: React.PropTypes.func.isRequired,
-  render: React.PropTypes.func.isRequired
+  onCloseOverlay: PropTypes.func.isRequired,
+  render: PropTypes.func.isRequired
 };
 
 export default About;

src/components/AddToPlaylistMenu/PlaylistsMenu.js

@@ -1,5 +1,6 @@
 import find from 'array-find';
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
 import Paper from 'material-ui/Paper';
 import Menu from 'material-ui/Menu';
@@ -39,17 +40,18 @@ const menuItemStyle = {
   WebkitAppearance: 'initial'
 };
 
-@translate()
-export default class PlaylistsMenu extends React.Component {
+const enhance = translate();
+
+class PlaylistsMenu extends React.Component {
   static propTypes = {
-    t: React.PropTypes.func.isRequired,
-    onClose: React.PropTypes.func.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-    onCreatePlaylist: React.PropTypes.func.isRequired,
-    playlists: React.PropTypes.arrayOf(React.PropTypes.object),
-    position: React.PropTypes.shape({
-      x: React.PropTypes.number,
-      y: React.PropTypes.number
+    t: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onCreatePlaylist: PropTypes.func.isRequired,
+    playlists: PropTypes.arrayOf(PropTypes.object),
+    position: PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number
     })
   };
 
@@ -118,3 +120,5 @@ export default class PlaylistsMenu extends React.Component {
     );
   }
 }
+
+export default enhance(PlaylistsMenu);

src/components/AddToPlaylistMenu/index.js

@@ -1,17 +1,18 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
 import CreatePlaylistIcon from 'material-ui/svg-icons/content/add';
-
 import PromptDialog from '../Dialogs/PromptDialog';
 import PlaylistsMenu from './PlaylistsMenu';
 
-@translate()
-export default class AddToPlaylistMenu extends React.Component {
+const enhance = translate();
+
+class AddToPlaylistMenu extends React.Component {
   static propTypes = {
-    t: React.PropTypes.func.isRequired,
-    onClose: React.PropTypes.func.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-    onCreatePlaylist: React.PropTypes.func.isRequired
+    t: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onCreatePlaylist: PropTypes.func.isRequired
   };
 
   state = {
@@ -54,3 +55,5 @@ export default class AddToPlaylistMenu extends React.Component {
     );
   }
 }
+
+export default enhance(AddToPlaylistMenu);

src/components/App/Overlays.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import find from 'array-find';
 import TransitionGroup from 'react-addons-css-transition-group';
 
@@ -23,8 +24,8 @@ const Overlays = ({ children, active }) => {
 };
 
 Overlays.propTypes = {
-  children: React.PropTypes.node,
-  active: React.PropTypes.string
+  children: PropTypes.node,
+  active: PropTypes.string
 };
 
 export default Overlays;

src/components/App/index.js

@@ -1,5 +1,5 @@
-/* eslint-disable react/prefer-stateless-function */
 import React from 'react';
+import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-dnd';
 import compose from 'recompose/compose';
 import toClass from 'recompose/toClass';
@@ -76,11 +76,11 @@ const App = ({
 );
 
 App.propTypes = {
-  activeOverlay: React.PropTypes.string,
-  settings: React.PropTypes.object.isRequired,
-  hasAboutPage: React.PropTypes.bool,
+  activeOverlay: PropTypes.string,
+  settings: PropTypes.object.isRequired,
+  hasAboutPage: PropTypes.bool,
 
-  onCloseOverlay: React.PropTypes.func.isRequired
+  onCloseOverlay: PropTypes.func.isRequired
 };
 
 export default compose(

src/components/Avatar/index.js

@@ -1,5 +1,6 @@
 import cx from 'classnames';
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const Avatar = ({ className, user }) => (
   <div className={cx('Avatar', className)}>
@@ -12,8 +13,8 @@ const Avatar = ({ className, user }) => (
 );
 
 Avatar.propTypes = {
-  className: React.PropTypes.string,
-  user: React.PropTypes.object.isRequired
+  className: PropTypes.string,
+  user: PropTypes.object.isRequired
 };
 
 export default Avatar;

src/components/Chat/ChatMessages.js

@@ -1,19 +1,19 @@
-import * as React from 'react';
-
+import React from 'react';
+import PropTypes from 'prop-types';
 import LogMessage from './LogMessage';
 import Message from './Message';
 import Motd from './Motd';
 import ScrollDownNotice from './ScrollDownNotice';
 
 export default class ChatMessages extends React.Component {
   static propTypes = {
-    messages: React.PropTypes.array,
-    motd: React.PropTypes.array,
-    canDeleteMessages: React.PropTypes.bool,
-    onDeleteMessage: React.PropTypes.func,
-    compileOptions: React.PropTypes.shape({
-      availableEmoji: React.PropTypes.array,
-      emojiImages: React.PropTypes.object
+    messages: PropTypes.array,
+    motd: PropTypes.array,
+    canDeleteMessages: PropTypes.bool,
+    onDeleteMessage: PropTypes.func,
+    compileOptions: PropTypes.shape({
+      availableEmoji: PropTypes.array,
+      emojiImages: PropTypes.object
     })
   };
 

src/components/Chat/DeleteButton.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const DeleteButton = ({ onDelete }) => (
   <button
@@ -10,7 +11,7 @@ const DeleteButton = ({ onDelete }) => (
 );
 
 DeleteButton.propTypes = {
-  onDelete: React.PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired
 };
 
 export default DeleteButton;

src/components/Chat/Input/EmojiSuggestion.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Suggestion from './Suggestion';
 
 const EmojiSuggestion = ({
@@ -19,9 +20,9 @@ const EmojiSuggestion = ({
 );
 
 EmojiSuggestion.propTypes = {
-  value: React.PropTypes.shape({
-    shortcode: React.PropTypes.string,
-    image: React.PropTypes.string
+  value: PropTypes.shape({
+    shortcode: PropTypes.string,
+    image: PropTypes.string
   }).isRequired
 };
 

src/components/Chat/Input/GroupSuggestion.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import PeopleIcon from 'material-ui/svg-icons/social/people';
 import Suggestion from './Suggestion';
 
@@ -10,7 +11,7 @@ const GroupSuggestion = props => (
 );
 
 GroupSuggestion.propTypes = {
-  value: React.PropTypes.string.isRequired
+  value: PropTypes.string.isRequired
 };
 
 export default GroupSuggestion;

src/components/Chat/Input/Suggestion.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { ListItem } from 'material-ui/List';
 import { fade } from 'material-ui/utils/colorManipulator';
 import muiThemeable from 'material-ui/styles/muiThemeable';
@@ -33,10 +34,10 @@ const Suggestion = ({
 );
 
 Suggestion.propTypes = {
-  muiTheme: React.PropTypes.object.isRequired,
-  value: React.PropTypes.string.isRequired,
-  select: React.PropTypes.func.isRequired,
-  selected: React.PropTypes.bool.isRequired
+  muiTheme: PropTypes.object.isRequired,
+  value: PropTypes.string.isRequired,
+  select: PropTypes.func.isRequired,
+  selected: PropTypes.bool.isRequired
 };
 
 export default muiThemeable()(Suggestion);

src/components/Chat/Input/SuggestionsList.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Paper from 'material-ui/Paper';
 import { List } from 'material-ui/List';
 
@@ -15,7 +16,7 @@ const SuggestionsList = ({
 );
 
 SuggestionsList.propTypes = {
-  children: React.PropTypes.node.isRequired
+  children: PropTypes.node.isRequired
 };
 
 export default SuggestionsList;

src/components/Chat/Input/UserSuggestion.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Avatar from '../../Avatar';
 import Suggestion from './Suggestion';
 
@@ -15,10 +16,10 @@ const UserSuggestion = ({
 );
 
 UserSuggestion.propTypes = {
-  value: React.PropTypes.shape({
-    _id: React.PropTypes.string.isRequired,
-    username: React.PropTypes.string.isRequired,
-    avatar: React.PropTypes.string
+  value: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    username: PropTypes.string.isRequired,
+    avatar: PropTypes.string
   }).isRequired
 };
 

src/components/Chat/Input/index.js

@@ -1,7 +1,8 @@
 import cx from 'classnames';
 import sortBy from 'lodash/sortBy';
 import uniqBy from 'lodash/uniqBy';
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { translate } from 'react-i18next';
 import AutoComplete, { Completion } from 'react-abstract-autocomplete';
 import SuggestionsList from './SuggestionsList';
@@ -43,11 +44,11 @@ const renderEmoji = props => <EmojiSuggestion {...props} />;
 @translate()
 export default class Input extends React.Component {
   static propTypes = {
-    t: React.PropTypes.func.isRequired,
-    onSend: React.PropTypes.func.isRequired,
-    mentionableUsers: React.PropTypes.array.isRequired,
-    mentionableGroups: React.PropTypes.array.isRequired,
-    availableEmoji: React.PropTypes.array.isRequired
+    t: PropTypes.func.isRequired,
+    onSend: PropTypes.func.isRequired,
+    mentionableUsers: PropTypes.array.isRequired,
+    mentionableGroups: PropTypes.array.isRequired,
+    availableEmoji: PropTypes.array.isRequired
   };
 
   state = {

src/components/Chat/LogMessage.js

@@ -1,4 +1,5 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import pure from 'recompose/pure';
 
 const LogMessage = ({ text }) => (
@@ -10,7 +11,7 @@ const LogMessage = ({ text }) => (
 );
 
 LogMessage.propTypes = {
-  text: React.PropTypes.string.isRequired
+  text: PropTypes.string.isRequired
 };
 
 export default pure(LogMessage);

src/components/Chat/Markup/Bold.js

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const Bold = ({ children, ...props }) => <b {...props}>{children}</b>;
 
 Bold.propTypes = {
-  children: React.PropTypes.node.isRequired
+  children: PropTypes.node.isRequired
 };
 
 export default Bold;

src/components/Chat/Markup/Code.js

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 
 const Code = ({ children, ...props }) => <code {...props}>{children}</code>;
 
 Code.propTypes = {
-  children: React.PropTypes.node.isRequired
+  children: PropTypes.node.isRequired
 };
 
 export default Code;