Fixes #515 Update React to 16 and other dependencies (#519)

* Update to react, react-dom 16.2.0

* Update react-redux

* Update react-tabs

* Update redux-devtools

* Update redux-devtools-dock-monitor

* Update redux-devtools-log-monitor

* Add prop-types package

* Update gitignore

* Update all files to use prop-types package

* Update react-router

* Update react-inlinesvg

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .env
+.vscode/
 node_modules/
 npm-debug.log
 dump.rdb
@@ -12,4 +13,4 @@ alpha_editor_p5js_org.crt
 cert_chain.crt
 localhost.crt
 localhost.key
-privkey.pem
+privkey.pem

client/components/Nav.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';

client/modules/App/App.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';

client/modules/App/components/Overlay.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import InlineSVG from 'react-inlinesvg';
 import { browserHistory } from 'react-router';
 

client/modules/IDE/components/AccessibleOutput.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import GridOutput from '../components/GridOutput';
 import TextOutput from '../components/TextOutput';
 

client/modules/IDE/components/AssetList.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Link } from 'react-router';

client/modules/IDE/components/Console.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import InlineSVG from 'react-inlinesvg';
 import classNames from 'classnames';
 

client/modules/IDE/components/CopyableInput.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Clipboard from 'clipboard';
 
 class CopyableInput extends React.Component {

client/modules/IDE/components/Editor.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import CodeMirror from 'codemirror';
 import beautifyJS from 'js-beautify';
 import 'codemirror/mode/css/css';

client/modules/IDE/components/EditorAccessibility.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 class EditorAccessibility extends React.Component {
   componentDidMount() {

client/modules/IDE/components/ErrorModal.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { Link } from 'react-router';
 
 class ErrorModal extends React.Component {

client/modules/IDE/components/FileNode.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import InlineSVG from 'react-inlinesvg';

client/modules/IDE/components/FileUploader.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Dropzone from 'dropzone';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';

client/modules/IDE/components/NewFileForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 class NewFileForm extends React.Component {

client/modules/IDE/components/NewFileModal.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { reduxForm } from 'redux-form';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';

client/modules/IDE/components/NewFolderForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 class NewFolderForm extends React.Component {

client/modules/IDE/components/NewFolderModal.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { reduxForm } from 'redux-form';
 import InlineSVG from 'react-inlinesvg';
 import NewFolderForm from './NewFolderForm';
@@ -35,4 +36,3 @@ export default reduxForm({
   form: 'new-folder',
   fields: ['name']
 })(NewFolderModal);
-

client/modules/IDE/components/Preferences.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import InlineSVG from 'react-inlinesvg';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 // import { bindActionCreators } from 'redux';

client/modules/IDE/components/PreviewFrame.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ReactDOM from 'react-dom';
 // import escapeStringRegexp from 'escape-string-regexp';
 import srcDoc from 'srcdoc-polyfill';

client/modules/IDE/components/ShareModal.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import CopyableInput from './CopyableInput';
 
 class ShareModal extends React.PureComponent {

client/modules/IDE/components/Sidebar.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';
 import ConnectedFileNode from './FileNode';

client/modules/IDE/components/SketchList.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import moment from 'moment';

client/modules/IDE/components/Timer.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import moment from 'moment';
 import classNames from 'classnames';
 

client/modules/IDE/components/Toast.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import InlineSVG from 'react-inlinesvg';

client/modules/IDE/components/Toolbar.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';

client/modules/IDE/pages/FullView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import PreviewFrame from '../components/PreviewFrame';

client/modules/IDE/pages/IDEView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';

client/modules/User/components/AccountForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function AccountForm(props) {

client/modules/User/components/GithubButton.jsx

@@ -1,5 +1,6 @@
 import InlineSVG from 'react-inlinesvg';
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 
 const githubUrl = require('../../../images/github.svg');
 

client/modules/User/components/LoginForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function LoginForm(props) {

client/modules/User/components/NewPasswordForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function NewPasswordForm(props) {

client/modules/User/components/ResetPasswordForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function ResetPasswordForm(props) {

client/modules/User/components/SignupForm.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { domOnlyProps } from '../../../utils/reduxFormUtils';
 
 function SignupForm(props) {

client/modules/User/pages/AccountView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { reduxForm } from 'redux-form';
 import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';

client/modules/User/pages/EmailVerificationView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { browserHistory } from 'react-router';

client/modules/User/pages/LoginView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { reduxForm } from 'redux-form';
 import { Link, browserHistory } from 'react-router';
 import InlineSVG from 'react-inlinesvg';

client/modules/User/pages/NewPasswordView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { reduxForm } from 'redux-form';
 import classNames from 'classnames';
 import { browserHistory } from 'react-router';

client/modules/User/pages/ResetPasswordView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { Link, browserHistory } from 'react-router';
 import classNames from 'classnames';
 import InlineSVG from 'react-inlinesvg';

client/modules/User/pages/SignupView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import axios from 'axios';
 import { Link, browserHistory } from 'react-router';

package.json

@@ -103,20 +103,21 @@
     "pretty-bytes": "^3.0.1",
     "primer-tooltips": "^1.4.1",
     "project-name-generator": "^2.1.3",
+    "prop-types": "^15.6.0",
     "pug": "^2.0.0-beta6",
     "q": "^1.4.1",
-    "react": "^15.1.0",
+    "react": "^16.2.0",
-    "react-dom": "^15.1.0",
+    "react-dom": "^16.2.0",
     "react-helmet": "^5.1.3",
-    "react-inlinesvg": "^0.4.2",
+    "react-inlinesvg": "^0.7.5",
-    "react-redux": "^4.4.5",
+    "react-redux": "^5.0.6",
-    "react-router": "^2.6.0",
+    "react-router": "^3.2.0",
     "react-split-pane": "^0.1.44",
-    "react-tabs": "^1.1.0",
+    "react-tabs": "^2.2.1",
     "redux": "^3.5.2",
-    "redux-devtools": "^3.3.1",
+    "redux-devtools": "^3.4.1",
-    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-dock-monitor": "^1.1.3",
-    "redux-devtools-log-monitor": "^1.0.11",
+    "redux-devtools-log-monitor": "^1.4.0",
     "redux-form": "^5.3.3",
     "redux-thunk": "^2.1.0",
     "request": "^2.76.0",