From b9304d8177daac161b74d3ab141b8585c52c6c82 Mon Sep 17 00:00:00 2001 From: Linda Paiste Date: Fri, 14 Jul 2023 20:26:08 -0500 Subject: [PATCH 1/2] Upgrade react-router to v5 --- package-lock.json | 151 +++++++++++++--------------------------------- package.json | 4 +- 2 files changed, 44 insertions(+), 111 deletions(-) diff --git a/package-lock.json b/package-lock.json index 11e0c74c70..bbc4a422a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -86,8 +86,8 @@ "react-markdown": "^6.0.3", "react-redux": "^7.2.4", "react-responsive": "^8.2.0", - "react-router": "^4.3.0", - "react-router-dom": "^4.3.0", + "react-router": "^5.3.4", + "react-router-dom": "^5.3.4", "react-split-pane": "^0.1.92", "react-tabs": "^2.3.1", "react-transition-group": "^4.4.2", @@ -29398,76 +29398,41 @@ } }, "node_modules/react-router": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.0.tgz", - "integrity": "sha512-wZsL9h/Jd/bECcdLLY9Icq+dYXiBhH9kutYK2nVog4Nd+n2GB2JaG023XnK+GAUlVg61kz41xteOBlCh5AVzEQ==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", + "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "dependencies": { - "history": "^4.7.2", - "hoist-non-react-statics": "^2.5.0", - "invariant": "^2.2.4", + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.1" + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { "react": ">=15" } }, "node_modules/react-router-dom": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.0.tgz", - "integrity": "sha512-VrroP6BgH/0PYAc3pUvO1itn9GexQ0c6ls428uS+5l7DmV2mYHfukphxVcqgyjo3Cqfq0o0UNABGeSzhoHMj9w==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", + "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", "dependencies": { - "history": "^4.7.2", - "invariant": "^2.2.4", + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", "loose-envify": "^1.3.1", - "prop-types": "^15.6.1", - "react-router": "^4.3.0" - }, - "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/react-router-dom/node_modules/hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - }, - "node_modules/react-router-dom/node_modules/isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" - }, - "node_modules/react-router-dom/node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "dependencies": { - "isarray": "0.0.1" - } - }, - "node_modules/react-router-dom/node_modules/react-router": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", - "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", - "dependencies": { - "history": "^4.7.2", - "hoist-non-react-statics": "^2.5.0", - "invariant": "^2.2.4", - "loose-envify": "^1.3.1", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.1", - "warning": "^4.0.1" + "prop-types": "^15.6.2", + "react-router": "5.3.4", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { "react": ">=15" } }, - "node_modules/react-router/node_modules/hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - }, "node_modules/react-router/node_modules/isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", @@ -32636,6 +32601,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, "dependencies": { "loose-envify": "^1.0.0" } @@ -55731,23 +55697,21 @@ } }, "react-router": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.0.tgz", - "integrity": "sha512-wZsL9h/Jd/bECcdLLY9Icq+dYXiBhH9kutYK2nVog4Nd+n2GB2JaG023XnK+GAUlVg61kz41xteOBlCh5AVzEQ==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", + "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "requires": { - "history": "^4.7.2", - "hoist-non-react-statics": "^2.5.0", - "invariant": "^2.2.4", + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.1" + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "dependencies": { - "hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - }, "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", @@ -55764,49 +55728,17 @@ } }, "react-router-dom": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.0.tgz", - "integrity": "sha512-VrroP6BgH/0PYAc3pUvO1itn9GexQ0c6ls428uS+5l7DmV2mYHfukphxVcqgyjo3Cqfq0o0UNABGeSzhoHMj9w==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", + "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", "requires": { - "history": "^4.7.2", - "invariant": "^2.2.4", + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", "loose-envify": "^1.3.1", - "prop-types": "^15.6.1", - "react-router": "^4.3.0" - }, - "dependencies": { - "hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - }, - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" - }, - "path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "requires": { - "isarray": "0.0.1" - } - }, - "react-router": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", - "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", - "requires": { - "history": "^4.7.2", - "hoist-non-react-statics": "^2.5.0", - "invariant": "^2.2.4", - "loose-envify": "^1.3.1", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.1", - "warning": "^4.0.1" - } - } + "prop-types": "^15.6.2", + "react-router": "5.3.4", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" } }, "react-select": { @@ -58283,6 +58215,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dev": true, "requires": { "loose-envify": "^1.0.0" } diff --git a/package.json b/package.json index a0f1e8421f..a6280a8e1d 100644 --- a/package.json +++ b/package.json @@ -221,8 +221,8 @@ "react-markdown": "^6.0.3", "react-redux": "^7.2.4", "react-responsive": "^8.2.0", - "react-router": "^4.3.0", - "react-router-dom": "^4.3.0", + "react-router": "^5.3.4", + "react-router-dom": "^5.3.4", "react-split-pane": "^0.1.92", "react-tabs": "^2.3.1", "react-transition-group": "^4.4.2", From a2f90d4b6c989c34d65ebc67ccc45a4f8dfb7a79 Mon Sep 17 00:00:00 2001 From: Linda Paiste Date: Fri, 14 Jul 2023 21:10:58 -0500 Subject: [PATCH 2/2] Begin using react-router hooks in components. --- client/modules/IDE/pages/FullView.jsx | 18 ++++++---------- client/modules/IDE/pages/IDEView.jsx | 12 ++++------- client/modules/IDE/pages/Legal.jsx | 20 +++++++----------- client/modules/Mobile/MobileDashboardView.jsx | 21 +++++-------------- client/modules/User/pages/AccountView.jsx | 19 ++++++----------- client/modules/User/pages/NewPasswordView.jsx | 13 ++++-------- 6 files changed, 33 insertions(+), 70 deletions(-) diff --git a/client/modules/IDE/pages/FullView.jsx b/client/modules/IDE/pages/FullView.jsx index e2ddd20b62..31f58a7df3 100644 --- a/client/modules/IDE/pages/FullView.jsx +++ b/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,14 +14,15 @@ import { import useInterval from '../hooks/useInterval'; import RootPage from '../../../components/RootPage'; -function FullView(props) { +function FullView() { const dispatch = useDispatch(); const project = useSelector((state) => state.project); const [isRendered, setIsRendered] = useState(false); + const params = useParams(); useEffect(() => { - dispatch(getProject(props.params.project_id, props.params.username)); - }, []); + dispatch(getProject(params.project_id, params.username)); + }, [params]); useEffect(() => { // if (isRendered) prevents startSketch() from being called twice @@ -64,7 +65,7 @@ function FullView(props) { }} project={{ name: project.name, - id: props.params.project_id + id: params.project_id }} />
@@ -74,11 +75,4 @@ function FullView(props) { ); } -FullView.propTypes = { - params: PropTypes.shape({ - project_id: PropTypes.string, - username: PropTypes.string - }).isRequired -}; - export default FullView; diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index a420a326a5..1f37b92b95 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import { Prompt } from 'react-router-dom'; +import { useLocation, Prompt } from 'react-router-dom'; import { bindActionCreators } from 'redux'; import { connect, useSelector } from 'react-redux'; import { useTranslation, withTranslation } from 'react-i18next'; @@ -49,11 +49,13 @@ function isOverlay(pathname) { return pathname === '/about' || pathname === '/feedback'; } -function WarnIfUnsavedChanges({ currentLocation }) { +function WarnIfUnsavedChanges() { const hasUnsavedChanges = useSelector((state) => state.ide.unsavedChanges); const { t } = useTranslation(); + const currentLocation = useLocation(); + return ( { if (location.pathname === '/privacy-policy') { setSelectedIndex(0); @@ -46,13 +48,13 @@ function Legal({ location }) { if (index === lastIndex) return; if (index === 0) { setSelectedIndex(0); - browserHistory.push('/privacy-policy'); + history.push('/privacy-policy'); } else if (index === 1) { setSelectedIndex(1); - browserHistory.push('/terms-of-use'); + history.push('/terms-of-use'); } else if (index === 2) { setSelectedIndex(2); - browserHistory.push('/code-of-conduct'); + history.push('/code-of-conduct'); } } @@ -85,10 +87,4 @@ function Legal({ location }) { ); } -Legal.propTypes = { - location: PropTypes.shape({ - pathname: PropTypes.string - }).isRequired -}; - export default Legal; diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx index 5b60dc3af6..92fe4f53c5 100644 --- a/client/modules/Mobile/MobileDashboardView.jsx +++ b/client/modules/Mobile/MobileDashboardView.jsx @@ -1,8 +1,7 @@ import React from 'react'; -import PropTypes from 'prop-types'; import styled from 'styled-components'; import { useSelector } from 'react-redux'; -import { withRouter } from 'react-router-dom'; +import { useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import Screen from '../../components/mobile/MobileScreen'; @@ -178,10 +177,10 @@ const NavItem = styled.li` const renderPanel = (name, props) => ((Component) => Component && )(Panels[name]); -const MobileDashboard = ({ params, location }) => { +const MobileDashboard = () => { const user = useSelector((state) => state.user); - const { username: paramsUsername } = params; - const { pathname } = location; + const { username: paramsUsername } = useParams(); + const { pathname } = useLocation(); const { t } = useTranslation(); const Tabs = Object.keys(Panels); @@ -253,14 +252,4 @@ const MobileDashboard = ({ params, location }) => { ); }; -MobileDashboard.propTypes = { - location: PropTypes.shape({ - pathname: PropTypes.string.isRequired - }).isRequired, - params: PropTypes.shape({ - username: PropTypes.string.isRequired - }) -}; -MobileDashboard.defaultProps = { params: {} }; - -export default withRouter(MobileDashboard); +export default MobileDashboard; diff --git a/client/modules/User/pages/AccountView.jsx b/client/modules/User/pages/AccountView.jsx index 0950eb7db1..8f5429049c 100644 --- a/client/modules/User/pages/AccountView.jsx +++ b/client/modules/User/pages/AccountView.jsx @@ -1,16 +1,14 @@ -import PropTypes from 'prop-types'; import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; -import { withRouter } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { parse } from 'query-string'; import { createApiKey, removeApiKey } from '../actions'; import AccountForm from '../components/AccountForm'; import SocialAuthButton from '../components/SocialAuthButton'; import APIKeyForm from '../components/APIKeyForm'; -import browserHistory from '../../../browserHistory'; import Nav from '../../../components/Nav'; import ErrorModal from '../../IDE/components/ErrorModal'; import Overlay from '../../App/components/Overlay'; @@ -45,9 +43,10 @@ function SocialLoginPanel() { ); } -function AccountView({ location }) { +function AccountView() { const { t } = useTranslation(); + const location = useLocation(); const queryParams = parse(location.search); const showError = !!queryParams.error; const errorType = queryParams.error; @@ -55,6 +54,7 @@ function AccountView({ location }) { const apiKeys = useSelector((state) => state.user.apiKeys); const dispatch = useDispatch(); + const history = useHistory(); return (
@@ -70,7 +70,7 @@ function AccountView({ location }) { title={t('ErrorModal.LinkTitle')} ariaLabel={t('ErrorModal.LinkTitle')} closeOverlay={() => { - browserHistory.push(location.pathname); + history.push(location.pathname); }} > @@ -119,11 +119,4 @@ function AccountView({ location }) { ); } -AccountView.propTypes = { - location: PropTypes.shape({ - search: PropTypes.string.isRequired, - pathname: PropTypes.string.isRequired - }).isRequired -}; - -export default withRouter(AccountView); +export default AccountView; diff --git a/client/modules/User/pages/NewPasswordView.jsx b/client/modules/User/pages/NewPasswordView.jsx index 3bfeec86ad..f25bd010b3 100644 --- a/client/modules/User/pages/NewPasswordView.jsx +++ b/client/modules/User/pages/NewPasswordView.jsx @@ -1,17 +1,18 @@ -import PropTypes from 'prop-types'; import React, { useEffect } from 'react'; import classNames from 'classnames'; import { useDispatch, useSelector } from 'react-redux'; import { Helmet } from 'react-helmet'; import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; import NewPasswordForm from '../components/NewPasswordForm'; import { validateResetPasswordToken } from '../actions'; import Nav from '../../../components/Nav'; import RootPage from '../../../components/RootPage'; -function NewPasswordView(props) { +function NewPasswordView() { const { t } = useTranslation(); - const resetPasswordToken = props.params.reset_password_token; + const params = useParams(); + const resetPasswordToken = params.reset_password_token; const resetPasswordInvalid = useSelector( (state) => state.user.resetPasswordInvalid ); @@ -48,10 +49,4 @@ function NewPasswordView(props) { ); } -NewPasswordView.propTypes = { - params: PropTypes.shape({ - reset_password_token: PropTypes.string - }).isRequired -}; - export default NewPasswordView;