[WIP] Upgrade react-router from "^3.2.6" to "^6.8.1"

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

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
 import { languageKeyToLabel } from '../i18n';
@@ -17,6 +16,7 @@ import { logoutUser } from '../modules/User/actions';
 
 import getConfig from '../utils/getConfig';
 import { metaKeyName, metaKey } from '../utils/metaKey';
+import { withRouter } from '../utils/router-compatibilty';
 import { getIsUserOwner } from '../modules/IDE/selectors/users';
 import { selectSketchPath } from '../modules/IDE/selectors/project';
 
@@ -100,12 +100,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();
@@ -968,7 +968,6 @@ Nav.propTypes = {
   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,
@@ -1002,7 +1001,6 @@ Nav.defaultProps = {
   },
   cmController: {},
   layout: 'project',
-  warnIfUnsavedChanges: undefined,
   params: {
     username: undefined
   },

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/createRedirectWithUsername.jsx

@@ -1,29 +1,23 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
-import { browserHistory } from 'react-router';
+import { useSelector } from 'react-redux';
+import { Navigate } from 'react-router-dom';
 
-const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
-  React.useEffect(() => {
-    if (username == null) {
-      return;
-    }
-
-    browserHistory.replace(url.replace(':username', username));
-  }, [username]);
-
-  return null;
+/**
+ * Sets the current username to the `:username` template in the provided URL,
+ * eg. `/:username/sketches` => `/p5/sketches`.
+ */
+const RedirectToUser = ({ url = '/:username/sketches' }) => {
+  const username = useSelector((state) =>
+    state.user ? state.user.username : null
+  );
+  return username ? (
+    <Navigate to={url.replace(':username', username)} replace />
+  ) : null;
 };
 
-function mapStateToProps(state) {
-  return {
-    username: state.user ? state.user.username : null
-  };
-}
-
-const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
-
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+RedirectToUser.propTypes = {
+  url: PropTypes.string.isRequired
+};
 
-export default createRedirectWithUsername;
+export default RedirectToUser;

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,15 @@
 import { setupServer } from 'msw/node';
 import { rest } from 'msw';
 import React from 'react';
-import { Router, browserHistory } from 'react-router';
+import { RouterProvider } from 'react-router-dom';
+import router from './router';
 
 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);
 
@@ -57,7 +56,7 @@ document.createRange = () => {
 describe('index.jsx integration', () => {
   // the subject under test
   const subject = () =>
-    reduxRender(<Router history={history} routes={routes(store)} />, { store });
+    reduxRender(<RouterProvider router={router} />, { 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,10 @@ 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 { RouterProvider } from 'react-router-dom';
 
 import configureStore from './store';
-import routes from './routes';
+import router from './router';
 import ThemeProvider from './modules/App/components/ThemeProvider';
 import Loader from './modules/App/components/loader';
 import './i18n';
@@ -15,15 +15,14 @@ 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)} />
+      <RouterProvider router={router} />
     </ThemeProvider>
   </Provider>
 );

client/modules/App/components/Overlay.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { browserHistory } from 'react-router';
 import { withTranslation } from 'react-i18next';
 
 import ExitIcon from '../../../images/exit.svg';
+import { withRouter } from '../../../utils/router-compatibilty';
 
 class Overlay extends React.Component {
   constructor(props) {
@@ -55,7 +55,7 @@ class Overlay extends React.Component {
       return;
 
     if (!this.props.closeOverlay) {
-      browserHistory.push(this.props.previousPath);
+      this.props.navigate(this.props.previousPath);
     } else {
       this.props.closeOverlay();
     }
@@ -105,7 +105,8 @@ Overlay.propTypes = {
   ariaLabel: PropTypes.string,
   previousPath: PropTypes.string,
   isFixedHeight: PropTypes.bool,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  navigate: PropTypes.func.isRequired
 };
 
 Overlay.defaultProps = {
@@ -118,4 +119,4 @@ Overlay.defaultProps = {
   isFixedHeight: false
 };
 
-export default withTranslation()(Overlay);
+export default withRouter(withTranslation()(Overlay));

client/modules/IDE/actions/collections.js

@@ -1,4 +1,4 @@
-import { browserHistory } from 'react-router';
+import { navigate } from '../../../router';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
@@ -56,7 +56,7 @@ export function createCollection(collection) {
         const pathname = `/${newCollection.owner.username}/collections/${newCollection.id}`;
         const location = { pathname, state: { skipSavingPath: true } };
 
-        browserHistory.push(location);
+        navigate(location);
       })
       .catch((error) => {
         const { response } = error;

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 { navigate } from '../../../router';
 import apiClient from '../../../utils/apiClient';
 import getConfig from '../../../utils/getConfig';
 import * as ActionTypes from '../../../constants';
@@ -214,7 +214,7 @@ export function saveProject(
 
         dispatch(setNewProject(synchedProject));
         dispatch(setUnsavedChanges(false));
-        browserHistory.push(
+        navigate(
           `/${response.data.user.username}/sketches/${response.data.id}`
         );
 
@@ -271,7 +271,7 @@ export function resetProject() {
 
 export function newProject() {
   setTimeout(() => {
-    browserHistory.push('/');
+    navigate('/');
   }, 0);
   return resetProject();
 }
@@ -334,7 +334,7 @@ export function cloneProject(project) {
         apiClient
           .post('/projects', formParams)
           .then((response) => {
-            browserHistory.push(
+            navigate(
               `/${response.data.user.username}/sketches/${response.data.id}`
             );
             dispatch(setNewProject(response.data));

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/pages/FullView.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import Helmet from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import PreviewFrame from '../components/PreviewFrame';
 import PreviewNav from '../../../components/PreviewNav';
 import { getProject } from '../actions/project';
@@ -14,13 +14,14 @@ import {
 import useInterval from '../hooks/useInterval';
 import RootPage from '../../../components/RootPage';
 
-function FullView(props) {
+function FullView() {
+  const params = useParams();
   const dispatch = useDispatch();
   const project = useSelector((state) => state.project);
   const [isRendered, setIsRendered] = useState(false);
 
   useEffect(() => {
-    dispatch(getProject(props.params.project_id, props.params.username));
+    dispatch(getProject(params.project_id, params.username));
   }, []);
 
   useEffect(() => {
@@ -64,7 +65,7 @@ function FullView(props) {
         }}
         project={{
           name: project.name,
-          id: props.params.project_id
+          id: params.project_id
         }}
       />
       <main className="preview-frame-holder">
@@ -74,11 +75,4 @@ function FullView(props) {
   );
 }
 
-FullView.propTypes = {
-  params: PropTypes.shape({
-    project_id: PropTypes.string,
-    username: PropTypes.string
-  }).isRequired
-};
-
 export default FullView;