Upgrade react-router from v3 to v4

client/browserHistory.js

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const browserHistory = createBrowserHistory();
+
+export default browserHistory;

client/common/Button.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import { remSize, prop } from '../theme';
 

client/common/ButtonOrLink.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 /**

client/components/Nav.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Link, withRouter } from 'react-router';
+import { Link } from 'react-router-dom';
 import { availableLanguages, languageKeyToLabel } from '../i18n';
 import * as IDEActions from '../modules/IDE/actions/ide';
 import * as toastActions from '../modules/IDE/actions/toast';
@@ -37,12 +37,12 @@ class Nav extends React.PureComponent {
   }
 
   handleNew() {
-    const { unsavedChanges, warnIfUnsavedChanges } = this.props;
+    const { unsavedChanges } = this.props;
     if (!unsavedChanges) {
       this.props.showToast(1500);
       this.props.setToastText('Toast.OpenedNewSketch');
       this.props.newProject();
-    } else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
+    } else if (window.confirm(this.props.t('Nav.WarningUnsavedChanges'))) {
       this.props.showToast(1500);
       this.props.setToastText('Toast.OpenedNewSketch');
       this.props.newProject();
@@ -73,11 +73,10 @@ class Nav extends React.PureComponent {
   }
 
   handleShare() {
-    const { username } = this.props.params;
     this.props.showShareModal(
       this.props.project.id,
       this.props.project.name,
-      username
+      this.props.project.owner.username
     );
   }
 
@@ -351,14 +350,14 @@ Nav.propTypes = {
     id: PropTypes.string,
     name: PropTypes.string,
     owner: PropTypes.shape({
-      id: PropTypes.string
+      id: PropTypes.string,
+      username: PropTypes.string
     })
   }),
   logoutUser: PropTypes.func.isRequired,
   showShareModal: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
   unsavedChanges: PropTypes.bool.isRequired,
-  warnIfUnsavedChanges: PropTypes.func,
   showKeyboardShortcutModal: PropTypes.func.isRequired,
   cmController: PropTypes.shape({
     tidyCode: PropTypes.func,
@@ -374,9 +373,6 @@ Nav.propTypes = {
   rootFile: PropTypes.shape({
     id: PropTypes.string.isRequired
   }).isRequired,
-  params: PropTypes.shape({
-    username: PropTypes.string
-  }),
   t: PropTypes.func.isRequired,
   setLanguage: PropTypes.func.isRequired,
   language: PropTypes.string.isRequired,
@@ -391,10 +387,6 @@ Nav.defaultProps = {
   },
   cmController: {},
   layout: 'project',
-  warnIfUnsavedChanges: undefined,
-  params: {
-    username: undefined
-  },
   editorLink: '/'
 };
 
@@ -420,6 +412,6 @@ const mapDispatchToProps = {
 };
 
 export default withTranslation()(
-  withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav))
+  connect(mapStateToProps, mapDispatchToProps)(Nav)
 );
 export { Nav as NavComponent };

client/components/PreviewNav.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';

client/components/__snapshots__/Nav.unit.test.jsx.snap

@@ -57,7 +57,9 @@ exports[`Nav renders correctly 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <a />
+              <a
+                href="/new-user/sketches"
+              />
             </li>
           </ul>
         </li>
@@ -195,7 +197,9 @@ exports[`Nav renders correctly 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <a />
+              <a
+                href="/about"
+              />
             </li>
           </ul>
         </li>
@@ -229,6 +233,7 @@ exports[`Nav renders dashboard version 1`] = `
         >
           <a
             class="nav__back-link"
+            href="/"
           >
             <test-file-stub
               aria-hidden="true"
@@ -447,7 +452,9 @@ exports[`Nav renders editor version 1`] = `
             <li
               class="nav__dropdown-item"
             >
-              <a>
+              <a
+                href="/about"
+              >
                 About
               </a>
             </li>

client/components/createRedirectWithUsername.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { browserHistory } from 'react-router';
+import browserHistory from '../browserHistory';
 
 const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
   React.useEffect(() => {

client/components/mobile/Tab.jsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { prop, remSize } from '../../theme';
 
 export default styled(Link)`

client/index.integration.test.jsx

@@ -1,16 +1,14 @@
 import { setupServer } from 'msw/node';
 import { rest } from 'msw';
 import React from 'react';
-import { Router, browserHistory } from 'react-router';
+import Routing from './routes';
 
 import { reduxRender, act, waitFor, screen, within } from './test-utils';
 import configureStore from './store';
-import routes from './routes';
 import * as Actions from './modules/User/actions';
 import { userResponse } from './testData/testServerResponses';
 
 // setup for the app
-const history = browserHistory;
 const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 
@@ -56,8 +54,7 @@ document.createRange = () => {
 // start testing
 describe('index.jsx integration', () => {
   // the subject under test
-  const subject = () =>
-    reduxRender(<Router history={history} routes={routes(store)} />, { store });
+  const subject = () => reduxRender(<Routing />, { store });
 
   // spy on this function and wait for it to be called before making assertions
   const spy = jest.spyOn(Actions, 'getUser');

client/index.jsx

@@ -2,10 +2,11 @@ import React, { Suspense } from 'react';
 import { render } from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
-import { Router, browserHistory } from 'react-router';
+import { Router } from 'react-router-dom';
 
+import browserHistory from './browserHistory';
 import configureStore from './store';
-import routes from './routes';
+import Routing from './routes';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
@@ -15,15 +16,16 @@ require('./styles/main.scss');
 // Load the p5 png logo, so that webpack will use it
 require('./images/p5js-square-logo.png');
 
-const history = browserHistory;
 const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
 const App = () => (
   <Provider store={store}>
     <ThemeProvider>
-      <Router history={history} routes={routes(store)} />
+      <Router history={browserHistory}>
+        <Routing />
+      </Router>
     </ThemeProvider>
   </Provider>
 );

client/modules/App/App.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import getConfig from '../../utils/getConfig';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
@@ -87,4 +88,4 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = { setPreviousPath, setLanguage };
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

client/modules/App/components/Overlay.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { browserHistory } from 'react-router';
 import { withTranslation } from 'react-i18next';
 
+import browserHistory from '../../../browserHistory';
 import ExitIcon from '../../../images/exit.svg';
 
 class Overlay extends React.Component {

client/modules/IDE/actions/collections.js

@@ -1,4 +1,4 @@
-import { browserHistory } from 'react-router';
+import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';

client/modules/IDE/actions/project.js

@@ -1,7 +1,7 @@
-import { browserHistory } from 'react-router';
 import objectID from 'bson-objectid';
 import each from 'async/each';
 import isEqual from 'lodash/isEqual';
+import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import getConfig from '../../../utils/getConfig';
 import * as ActionTypes from '../../../constants';

client/modules/IDE/components/About.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import SquareLogoIcon from '../../../images/p5js-square-logo.svg';
 // import PlayIcon from '../../../images/play.svg';
 import AsteriskIcon from '../../../images/p5-asterisk.svg';

client/modules/IDE/components/AssetList.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import prettyBytes from 'pretty-bytes';
 import { withTranslation } from 'react-i18next';

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
 import * as ProjectActions from '../../actions/project';

client/modules/IDE/components/ErrorModal.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 const ErrorModal = ({ type, service, closeModal }) => {

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import Icons from './Icons';

client/modules/IDE/components/SketchList.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import classNames from 'classnames';
 import slugify from 'slugify';

client/modules/IDE/components/Toolbar.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import * as IDEActions from '../actions/ide';

client/modules/IDE/components/UploadFileModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import prettyBytes from 'pretty-bytes';
 import getConfig from '../../../utils/getConfig';

client/modules/IDE/components/__snapshots__/SketchList.unit.test.jsx.snap

@@ -70,7 +70,9 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
           <th
             scope="row"
           >
-            <a>
+            <a
+              href="/happydog/sketches/testid1"
+            >
               testsketch1
             </a>
           </th>
@@ -100,7 +102,9 @@ exports[`<Sketchlist /> snapshot testing 1`] = `
           <th
             scope="row"
           >
-            <a>
+            <a
+              href="/happydog/sketches/testid2"
+            >
               testsketch2
             </a>
           </th>