Follow up react's deprecation

src/browser/components/AutoSaveIndicator.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const {Alert} = require('react-bootstrap');
 
 const baseClassName = 'AutoSaveIndicator';
@@ -34,8 +35,8 @@ function AutoSaveIndicator(props) {
 }
 
 AutoSaveIndicator.propTypes = {
-  savingState: React.PropTypes.string.isRequired,
-  errorMessage: React.PropTypes.string
+  savingState: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string
 };
 
 module.exports = AutoSaveIndicator;

src/browser/components/DestructiveConfirmModal.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const {Button, Modal} = require('react-bootstrap');
 
 function DestructiveConfirmationModal(props) {
@@ -31,12 +32,12 @@ function DestructiveConfirmationModal(props) {
 }
 
 DestructiveConfirmationModal.propTypes = {
-  title: React.PropTypes.string.isRequired,
-  body: React.PropTypes.node.isRequired,
-  acceptLabel: React.PropTypes.string.isRequired,
-  cancelLabel: React.PropTypes.string.isRequired,
-  onAccept: React.PropTypes.func.isRequired,
-  onCancel: React.PropTypes.func.isRequired
+  title: PropTypes.string.isRequired,
+  body: PropTypes.node.isRequired,
+  acceptLabel: PropTypes.string.isRequired,
+  cancelLabel: PropTypes.string.isRequired,
+  onAccept: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired
 };
 
 module.exports = DestructiveConfirmationModal;

src/browser/components/ErrorView.jsx

@@ -1,6 +1,7 @@
 // ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
 
 const React = require('react');
+const PropTypes = require('prop-types');
 const {Grid, Row, Col} = require('react-bootstrap');
 
 const errorPage = {
@@ -92,10 +93,10 @@ function ErrorView(props) {
 }
 
 ErrorView.propTypes = {
-  errorInfo: React.PropTypes.object,
-  id: React.PropTypes.number,
-  active: React.PropTypes.bool,
-  withTab: React.PropTypes.bool
+  errorInfo: PropTypes.object,
+  id: PropTypes.number,
+  active: PropTypes.bool,
+  withTab: PropTypes.bool
 };
 
 module.exports = ErrorView;

src/browser/components/HoveringURL.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 
 function HoveringURL(props) {
   return (
@@ -9,8 +10,8 @@ function HoveringURL(props) {
 }
 
 HoveringURL.propTypes = {
-  style: React.PropTypes.object,
-  targetURL: React.PropTypes.string
+  style: PropTypes.object,
+  targetURL: PropTypes.string
 };
 
 module.exports = HoveringURL;

src/browser/components/LoginModal.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const ReactDOM = require('react-dom');
 const {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} = require('react-bootstrap');
 
@@ -86,12 +87,12 @@ class LoginModal extends React.Component {
 }
 
 LoginModal.propTypes = {
-  authInfo: React.PropTypes.object,
-  authServerURL: React.PropTypes.string,
-  onCancel: React.PropTypes.func,
-  onLogin: React.PropTypes.func,
-  request: React.PropTypes.object,
-  show: React.PropTypes.bool
+  authInfo: PropTypes.object,
+  authServerURL: PropTypes.string,
+  onCancel: PropTypes.func,
+  onLogin: PropTypes.func,
+  request: PropTypes.object,
+  show: PropTypes.bool
 };
 
 module.exports = LoginModal;

src/browser/components/MainPage.jsx

@@ -1,5 +1,7 @@
 const React = require('react');
-const ReactCSSTransitionGroup = require('react-addons-css-transition-group');
+const PropTypes = require('prop-types');
+const createReactClass = require('create-react-class');
+const ReactCSSTransitionGroup = require('react-transition-group/CSSTransitionGroup');
 const {Grid, Row} = require('react-bootstrap');
 
 const {ipcRenderer, remote} = require('electron');
@@ -34,14 +36,14 @@ const styles = {
   }
 };
 
-const MainPage = React.createClass({
+const MainPage = createReactClass({
   propTypes: {
-    onUnreadCountChange: React.PropTypes.func.isRequired,
-    teams: React.PropTypes.array.isRequired,
-    onTeamConfigChange: React.PropTypes.func.isRequired,
-    initialIndex: React.PropTypes.number.isRequired,
-    useSpellChecker: React.PropTypes.bool.isRequired,
-    onSelectSpellCheckerLocale: React.PropTypes.func.isRequired
+    onUnreadCountChange: PropTypes.func.isRequired,
+    teams: PropTypes.array.isRequired,
+    onTeamConfigChange: PropTypes.func.isRequired,
+    initialIndex: PropTypes.number.isRequired,
+    useSpellChecker: PropTypes.bool.isRequired,
+    onSelectSpellCheckerLocale: PropTypes.func.isRequired
   },
 
   getInitialState() {

src/browser/components/MattermostView.jsx

@@ -1,4 +1,6 @@
 const React = require('react');
+const PropTypes = require('prop-types');
+const createReactClass = require('create-react-class');
 const {findDOMNode} = require('react-dom');
 const {ipcRenderer, remote, shell} = require('electron');
 const url = require('url');
@@ -8,17 +10,17 @@ const ErrorView = require('./ErrorView.jsx');
 
 const preloadJS = `file://${remote.app.getAppPath()}/browser/webview/mattermost_bundle.js`;
 
-const MattermostView = React.createClass({
+const MattermostView = createReactClass({
   propTypes: {
-    name: React.PropTypes.string,
-    id: React.PropTypes.string,
-    onTargetURLChange: React.PropTypes.func,
-    onUnreadCountChange: React.PropTypes.func,
-    src: React.PropTypes.string,
-    active: React.PropTypes.bool,
-    withTab: React.PropTypes.bool,
-    useSpellChecker: React.PropTypes.bool,
-    onSelectSpellCheckerLocale: React.PropTypes.func
+    name: PropTypes.string,
+    id: PropTypes.string,
+    onTargetURLChange: PropTypes.func,
+    onUnreadCountChange: PropTypes.func,
+    src: PropTypes.string,
+    active: PropTypes.bool,
+    withTab: PropTypes.bool,
+    useSpellChecker: PropTypes.bool,
+    onSelectSpellCheckerLocale: PropTypes.func
   },
 
   getInitialState() {

src/browser/components/NewTeamModal.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require('react-bootstrap');
 
 class NewTeamModal extends React.Component {
@@ -199,11 +200,11 @@ class NewTeamModal extends React.Component {
 }
 
 NewTeamModal.propTypes = {
-  onClose: React.PropTypes.func,
-  onSave: React.PropTypes.func,
-  team: React.PropTypes.object,
-  editMode: React.PropTypes.bool,
-  show: React.PropTypes.bool
+  onClose: PropTypes.func,
+  onSave: PropTypes.func,
+  team: PropTypes.object,
+  editMode: PropTypes.bool,
+  show: PropTypes.bool
 };
 
 module.exports = NewTeamModal;

src/browser/components/RemoveServerModal.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const {Modal} = require('react-bootstrap');
 const DestructiveConfirmationModal = require('./DestructiveConfirmModal.jsx');
 
@@ -26,7 +27,7 @@ function RemoveServerModal(props) {
 }
 
 RemoveServerModal.propTypes = {
-  serverName: React.PropTypes.string.isRequired
+  serverName: PropTypes.string.isRequired
 };
 
 module.exports = RemoveServerModal;

src/browser/components/SettingsPage.jsx

@@ -1,4 +1,6 @@
 const React = require('react');
+const PropTypes = require('prop-types');
+const createReactClass = require('create-react-class');
 const ReactDOM = require('react-dom');
 const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');
 
@@ -22,9 +24,9 @@ function backToIndex(index) {
   remote.getCurrentWindow().loadURL(`${indexURL}?index=${target}`);
 }
 
-const SettingsPage = React.createClass({
+const SettingsPage = createReactClass({
   propTypes: {
-    configFile: React.PropTypes.string
+    configFile: PropTypes.string
   },
 
   getInitialState() {

src/browser/components/TabBar.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 const {Nav, NavItem, Button} = require('react-bootstrap');
 
 class TabBar extends React.Component {
@@ -116,11 +117,11 @@ class TabBar extends React.Component {
 }
 
 TabBar.propTypes = {
-  activeKey: React.PropTypes.number,
-  id: React.PropTypes.string,
-  onSelect: React.PropTypes.func,
-  teams: React.PropTypes.array,
-  onAddServer: React.PropTypes.func
+  activeKey: PropTypes.number,
+  id: PropTypes.string,
+  onSelect: PropTypes.func,
+  teams: PropTypes.array,
+  onAddServer: PropTypes.func
 };
 
 module.exports = TabBar;

src/browser/components/TeamList.jsx

@@ -1,19 +1,21 @@
 const React = require('react');
+const PropTypes = require('prop-types');
+const createReactClass = require('create-react-class');
 const {ListGroup} = require('react-bootstrap');
 const TeamListItem = require('./TeamListItem.jsx');
 const NewTeamModal = require('./NewTeamModal.jsx');
 const RemoveServerModal = require('./RemoveServerModal.jsx');
 
-const TeamList = React.createClass({
+const TeamList = createReactClass({
   propTypes: {
-    onTeamsChange: React.PropTypes.func,
-    showAddTeamForm: React.PropTypes.bool,
-    teams: React.PropTypes.array,
-    addServer: React.PropTypes.func,
-    updateTeam: React.PropTypes.func,
-    toggleAddTeamForm: React.PropTypes.func,
-    setAddTeamFormVisibility: React.PropTypes.func,
-    onTeamClick: React.PropTypes.func
+    onTeamsChange: PropTypes.func,
+    showAddTeamForm: PropTypes.bool,
+    teams: PropTypes.array,
+    addServer: PropTypes.func,
+    updateTeam: PropTypes.func,
+    toggleAddTeamForm: PropTypes.func,
+    setAddTeamFormVisibility: PropTypes.func,
+    onTeamClick: PropTypes.func
   },
 
   getInitialState() {

src/browser/components/TeamListItem.jsx

@@ -1,4 +1,5 @@
 const React = require('react');
+const PropTypes = require('prop-types');
 
 class TeamListItem extends React.Component {
   constructor(props) {
@@ -49,11 +50,11 @@ class TeamListItem extends React.Component {
 }
 
 TeamListItem.propTypes = {
-  name: React.PropTypes.string,
-  onTeamEditing: React.PropTypes.func,
-  onTeamRemove: React.PropTypes.func,
-  onTeamClick: React.PropTypes.func,
-  url: React.PropTypes.string
+  name: PropTypes.string,
+  onTeamEditing: PropTypes.func,
+  onTeamRemove: PropTypes.func,
+  onTeamClick: PropTypes.func,
+  url: PropTypes.string
 };
 
 module.exports = TeamListItem;

src/package.json

@@ -14,14 +14,16 @@
   "dependencies": {
     "auto-launch": "^5.0.1",
     "bootstrap": "^3.3.7",
+    "create-react-class": "^15.5.3",
     "electron-context-menu": "^0.9.0",
     "electron-devtools-installer": "^2.2.0",
     "electron-is-dev": "^0.1.2",
     "electron-squirrel-startup": "^1.0.0",
+    "prop-types": "^15.5.9",
     "react": "^15.5.4",
-    "react-addons-css-transition-group": "^15.5.2",
     "react-bootstrap": "~0.30.10",
     "react-dom": "^15.5.4",
+    "react-transition-group": "^1.1.1",
     "simple-spellchecker": "git://github.com/jfmdev/simple-spellchecker.git#723062952a0290c6285aeaf02f14d9c74c41cadb",
     "underscore": "^1.8.3",
     "yargs": "^3.32.0"