From 6f97a0158dfffd547123120088767057a291e342 Mon Sep 17 00:00:00 2001 From: John Darragh Date: Fri, 3 Nov 2023 18:24:52 -0700 Subject: [PATCH 1/3] Prepare for react-router-dom v6 upgrade --- client/package-lock.json | 36 ++++++++----------- client/package.json | 2 +- client/src/App.js | 23 +++++++----- .../components/Authorization/ConfirmEmail.js | 23 ++++-------- .../Authorization/ForgotPassword.js | 3 +- client/src/components/Authorization/Login.js | 26 ++++---------- .../src/components/Authorization/Register.js | 17 +++------ .../components/Authorization/ResetPassword.js | 24 ++++--------- .../components/Authorization/SendEmailForm.js | 8 ++--- .../components/Authorization/UpdateAccount.js | 16 +++------ .../components/Checklist/ChecklistModal.js | 3 +- client/src/components/Faq/FaqView.jsx | 10 ++---- client/src/components/NavBar.js | 4 +-- .../ProjectWizard/TdmCalculationWizard.js | 27 +++++--------- .../src/components/Projects/ProjectsPage.js | 19 +++------- .../PublicComment/PublicCommentPage.js | 14 +++----- client/src/components/Roles.js | 4 +-- .../src/components/TdmCalculationContainer.js | 29 +++++---------- .../TermsAndConditionsModal.js | 8 ++--- 19 files changed, 99 insertions(+), 197 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 7fb76a24..934b5c4d 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -28,7 +28,7 @@ "react-jss": "^10.8.2", "react-loader": "^2.4.7", "react-quill": "^2.0.0", - "react-router-dom": "^5.3.0", + "react-router-dom": "5.3", "react-select": "^5.2.2", "react-string-replace": "^1.1.0", "react-to-print": "^2.14.12", @@ -14648,14 +14648,14 @@ } }, "node_modules/react-router": { - "version": "5.2.1", - "license": "MIT", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", + "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", - "mini-create-react-context": "^0.4.0", "path-to-regexp": "^1.7.0", "prop-types": "^15.6.2", "react-is": "^16.6.0", @@ -14667,14 +14667,15 @@ } }, "node_modules/react-router-dom": { - "version": "5.3.0", - "license": "MIT", + "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": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", "loose-envify": "^1.3.1", "prop-types": "^15.6.2", - "react-router": "5.2.1", + "react-router": "5.3.4", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" }, @@ -14684,30 +14685,21 @@ }, "node_modules/react-router/node_modules/isarray": { "version": "0.0.1", - "license": "MIT" - }, - "node_modules/react-router/node_modules/mini-create-react-context": { - "version": "0.4.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.1", - "tiny-warning": "^1.0.3" - }, - "peerDependencies": { - "prop-types": "^15.0.0", - "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" - } + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" }, "node_modules/react-router/node_modules/path-to-regexp": { "version": "1.8.0", - "license": "MIT", + "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/node_modules/react-is": { "version": "16.13.1", - "license": "MIT" + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-scripts": { "version": "5.0.1", diff --git a/client/package.json b/client/package.json index 94ad109a..b48b25d8 100644 --- a/client/package.json +++ b/client/package.json @@ -49,7 +49,7 @@ "react-jss": "^10.8.2", "react-loader": "^2.4.7", "react-quill": "^2.0.0", - "react-router-dom": "^5.3.0", + "react-router-dom": "5.3", "react-select": "^5.2.2", "react-string-replace": "^1.1.0", "react-to-print": "^2.14.12", diff --git a/client/src/App.js b/client/src/App.js index ac9a1a67..225c7291 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -69,7 +69,6 @@ const App = ({ {/* These routes either have no sidebar or use a custom sidebar */} ( - - - + } + /> - - - + ( + + )} + /> {/* These routes use the same sidebar component */} diff --git a/client/src/components/Authorization/ConfirmEmail.js b/client/src/components/Authorization/ConfirmEmail.js index c26f9061..4698cc5c 100644 --- a/client/src/components/Authorization/ConfirmEmail.js +++ b/client/src/components/Authorization/ConfirmEmail.js @@ -1,14 +1,14 @@ import React, { useState, useEffect } from "react"; -import PropTypes from "prop-types"; -import { Redirect, withRouter } from "react-router-dom"; +import { Redirect, useParams, useHistory } from "react-router-dom"; import * as accountService from "../../services/account.service"; import { useToast } from "../../contexts/Toast"; import SendEmailForm from "./SendEmailForm"; import ContentContainer from "../Layout/ContentContainer"; -const ConfirmEmail = props => { - const { history, match } = props; - const token = match.params.token; +const ConfirmEmail = () => { + const params = useParams(); + const history = useHistory(); + const token = params.token; const [submitted, setSubmitted] = useState(false); const [confirmResult, setConfirmResult] = useState(false); const toast = useToast(); @@ -54,15 +54,4 @@ const ConfirmEmail = props => { ); }; -ConfirmEmail.propTypes = { - match: PropTypes.shape({ - params: PropTypes.shape({ - token: PropTypes.string - }) - }), - history: PropTypes.shape({ - push: PropTypes.func.isRequired - }) -}; - -export default withRouter(ConfirmEmail); +export default ConfirmEmail; diff --git a/client/src/components/Authorization/ForgotPassword.js b/client/src/components/Authorization/ForgotPassword.js index ecdfde0b..98daf03a 100644 --- a/client/src/components/Authorization/ForgotPassword.js +++ b/client/src/components/Authorization/ForgotPassword.js @@ -1,5 +1,4 @@ import React, { useState } from "react"; -import { withRouter } from "react-router-dom"; import * as accountService from "../../services/account.service"; import ContentContainer from "../Layout/ContentContainer"; import SendEmailForm from "./SendEmailForm"; @@ -32,4 +31,4 @@ const ForgotPassword = () => { ); }; -export default withRouter(ForgotPassword); +export default ForgotPassword; diff --git a/client/src/components/Authorization/Login.js b/client/src/components/Authorization/Login.js index 46ddab22..e72d6751 100644 --- a/client/src/components/Authorization/Login.js +++ b/client/src/components/Authorization/Login.js @@ -1,7 +1,6 @@ import React, { useState, useRef, useContext } from "react"; import UserContext from "../../contexts/UserContext"; -import PropTypes from "prop-types"; -import { Link, withRouter, useHistory, useLocation } from "react-router-dom"; +import { Link, useParams, useHistory, useLocation } from "react-router-dom"; import { createUseStyles, useTheme } from "react-jss"; import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; @@ -31,10 +30,9 @@ const useStyles = createUseStyles(theme => ({ } })); -const Login = props => { +const Login = () => { const focusRef = useRef(null); const userContext = useContext(UserContext); - const { match } = props; const { search } = useLocation(); const searchParams = new URLSearchParams(search); const projectId = searchParams.get("projectId"); @@ -44,8 +42,9 @@ const Login = props => { useState(false); const classes = useStyles(); const theme = useTheme(); + const params = useParams(); const initialValues = { - email: match.params.email ? decodeURIComponent(match.params.email) : "", + email: params.email ? decodeURIComponent(params.email) : "", password: "" }; @@ -64,11 +63,7 @@ const Login = props => { const trackLogin = useTrackEvent(appInsights, "Login"); const trackLoginFail = useTrackEvent(appInsights, "Login Failed"); - const handleSubmit = async ( - { email, password }, - { setSubmitting }, - { history } - ) => { + const handleSubmit = async ({ email, password }, { setSubmitting }) => { try { const loginResponse = await accountService.login(email, password); @@ -164,7 +159,7 @@ const Login = props => { handleSubmit(values, actions, props)} + onSubmit={(values, actions) => handleSubmit(values, actions)} > {({ touched, errors, isSubmitting, values }) => { const isDisabled = !!( @@ -271,12 +266,5 @@ const Login = props => { ); }; -Login.propTypes = { - match: PropTypes.shape({ - params: PropTypes.shape({ - email: PropTypes.string - }) - }) -}; -export default withRouter(Login); +export default Login; diff --git a/client/src/components/Authorization/Register.js b/client/src/components/Authorization/Register.js index 509e4b0e..6f4e4204 100644 --- a/client/src/components/Authorization/Register.js +++ b/client/src/components/Authorization/Register.js @@ -1,9 +1,9 @@ import React, { useState, useRef } from "react"; -import PropTypes from "prop-types"; +import { useParams } from "react-router-dom"; import * as accountService from "../../services/account.service"; import { createUseStyles } from "react-jss"; import { Formik, Form, Field, ErrorMessage } from "formik"; -import { Link, withRouter } from "react-router-dom"; +import { Link } from "react-router-dom"; import * as Yup from "yup"; import Button from "../Button/Button"; import ContentContainer from "../Layout/ContentContainer"; @@ -20,11 +20,11 @@ const useStyles = createUseStyles({ const Register = props => { const focusRef = useRef(null); const classes = useStyles(); - const { match } = props; + const params = useParams(); const initialValues = { firstName: "", lastName: "", - email: match.params.email || "", + email: params.email || "", password: "", passwordConfirm: "" }; @@ -227,12 +227,5 @@ const Register = props => { ); }; -Register.propTypes = { - match: PropTypes.shape({ - params: PropTypes.shape({ - email: PropTypes.string - }) - }) -}; -export default withRouter(Register); +export default Register; diff --git a/client/src/components/Authorization/ResetPassword.js b/client/src/components/Authorization/ResetPassword.js index ce65b34a..c291f840 100644 --- a/client/src/components/Authorization/ResetPassword.js +++ b/client/src/components/Authorization/ResetPassword.js @@ -1,6 +1,5 @@ import React, { useState, useEffect, useRef } from "react"; -import PropTypes from "prop-types"; -import { withRouter } from "react-router-dom"; +import { useHistory, useParams } from "react-router-dom"; import * as accountService from "../../services/account.service"; import { Formik, Form, Field, ErrorMessage } from "formik"; import * as Yup from "yup"; @@ -26,10 +25,12 @@ const validationSchema = Yup.object().shape({ .oneOf([Yup.ref("password")], "Password does not match") }); -const ResetPassword = props => { +const ResetPassword = () => { + const history = useHistory(); const focusRef = useRef(null); const [success, setSuccess] = useState(false); - const { token } = props.match.params; + const params = useParams(); + const token = params.token; const classes = useStyles(); const toast = useToast(); @@ -119,7 +120,7 @@ const ResetPassword = props => {

Redirecting to login

{setTimeout(() => { - props.history.push(`/login/${success}`); + history.push(`/login/${success}`); }, 2000)}
@@ -128,15 +129,4 @@ const ResetPassword = props => { ); }; -ResetPassword.propTypes = { - match: PropTypes.shape({ - params: PropTypes.shape({ - token: PropTypes.string - }) - }), - history: PropTypes.shape({ - push: PropTypes.func.isRequired - }) -}; - -export default withRouter(ResetPassword); +export default ResetPassword; diff --git a/client/src/components/Authorization/SendEmailForm.js b/client/src/components/Authorization/SendEmailForm.js index 6e1f1af0..03eae89d 100644 --- a/client/src/components/Authorization/SendEmailForm.js +++ b/client/src/components/Authorization/SendEmailForm.js @@ -1,6 +1,6 @@ import React, { useRef } from "react"; import PropTypes from "prop-types"; -import { Link, withRouter } from "react-router-dom"; +import { Link } from "react-router-dom"; import Button from "../Button/Button"; import { createUseStyles } from "react-jss"; import { Formik, Form, Field, ErrorMessage } from "formik"; @@ -52,10 +52,6 @@ const SendEmailForm = ({ label, submitted, handleSubmit }) => { const focusRef = useRef(null); const classes = useStyles(); - // useEffect(() => { - // focusRef.current.focus(); - // }); - return !submitted ? ( <>

Send {label} Email

@@ -124,4 +120,4 @@ SendEmailForm.propTypes = { submitted: PropTypes.bool.isRequired }; -export default withRouter(SendEmailForm); +export default SendEmailForm; diff --git a/client/src/components/Authorization/UpdateAccount.js b/client/src/components/Authorization/UpdateAccount.js index 7708f2e7..faa89a0b 100644 --- a/client/src/components/Authorization/UpdateAccount.js +++ b/client/src/components/Authorization/UpdateAccount.js @@ -1,10 +1,9 @@ import React, { useState, useRef, useContext } from "react"; import UserContext from "../../contexts/UserContext"; -import PropTypes from "prop-types"; import * as accountService from "../../services/account.service"; import { createUseStyles } from "react-jss"; import { Formik, Form, Field, ErrorMessage } from "formik"; -import { withRouter } from "react-router-dom"; +import { useParams } from "react-router-dom"; import * as Yup from "yup"; import Button from "../Button/Button"; import ContentContainer from "../Layout/ContentContainer"; @@ -23,12 +22,12 @@ const UpdateAccount = props => { const account = userContext.account; const focusRef = useRef(null); const classes = useStyles(); - const { match } = props; + const params = useParams(); const initialValues = { id: account.id || "", firstName: account.firstName || "", lastName: account.lastName || "", - email: match.params.email || "" + email: params.email || "" }; const [errorMsg, setErrorMsg] = useState(""); @@ -167,12 +166,5 @@ const UpdateAccount = props => { ); }; -UpdateAccount.propTypes = { - match: PropTypes.shape({ - params: PropTypes.shape({ - email: PropTypes.string - }) - }) -}; -export default withRouter(UpdateAccount); +export default UpdateAccount; diff --git a/client/src/components/Checklist/ChecklistModal.js b/client/src/components/Checklist/ChecklistModal.js index 949f771e..821e2fed 100644 --- a/client/src/components/Checklist/ChecklistModal.js +++ b/client/src/components/Checklist/ChecklistModal.js @@ -1,5 +1,4 @@ import React from "react"; -import { withRouter } from "react-router-dom"; import ModalDialog from "../UI/AriaModal/ModalDialog"; import PropTypes from "prop-types"; import ChecklistContent from "./ChecklistContent"; @@ -19,4 +18,4 @@ ChecklistModal.propTypes = { toggleChecklistModal: PropTypes.func }; -export default withRouter(ChecklistModal); +export default ChecklistModal; diff --git a/client/src/components/Faq/FaqView.jsx b/client/src/components/Faq/FaqView.jsx index 932569e1..2aa7a7e0 100644 --- a/client/src/components/Faq/FaqView.jsx +++ b/client/src/components/Faq/FaqView.jsx @@ -4,7 +4,6 @@ import FaqCategoryList from "./FaqCategoryList"; import ExpandButtons from "./ExpandButtons"; import EditToggleButton from "../Button/EditToggleButton"; import ContentContainer from "../Layout/ContentContainer"; -import { withRouter } from "react-router-dom"; import { DragDropContext } from "react-beautiful-dnd"; import * as faqCategoryService from "../../services/faqCategory.service"; import AddNewCategoryButton from "../Button/AddNewCategory"; @@ -410,12 +409,7 @@ const FaqView = ({ isAdmin }) => { FaqView.propTypes = { toggleChecklistModal: PropTypes.func, checklistModalOpen: PropTypes.bool, - isAdmin: PropTypes.bool, - match: PropTypes.shape({ - params: PropTypes.shape({ - showChecklist: PropTypes.string - }) - }) + isAdmin: PropTypes.bool }; -export default withRouter(FaqView); +export default FaqView; diff --git a/client/src/components/NavBar.js b/client/src/components/NavBar.js index ea23ae89..3e62427b 100644 --- a/client/src/components/NavBar.js +++ b/client/src/components/NavBar.js @@ -1,7 +1,7 @@ import React, { useContext } from "react"; import UserContext from "../contexts/UserContext"; import { createUseStyles } from "react-jss"; -import { NavLink, withRouter } from "react-router-dom"; +import { NavLink } from "react-router-dom"; import NavBarLogin from "./NavBarLogin"; import PropTypes from "prop-types"; @@ -192,4 +192,4 @@ NavBar.propTypes = { setNavbarOpen: PropTypes.func.isRequired }; -export default withRouter(NavBar); +export default NavBar; diff --git a/client/src/components/ProjectWizard/TdmCalculationWizard.js b/client/src/components/ProjectWizard/TdmCalculationWizard.js index 01ea29d4..f47b0ebb 100644 --- a/client/src/components/ProjectWizard/TdmCalculationWizard.js +++ b/client/src/components/ProjectWizard/TdmCalculationWizard.js @@ -1,7 +1,7 @@ import React, { useEffect, useContext, useState } from "react"; import PropTypes from "prop-types"; import ToastContext from "../../contexts/Toast/ToastContext"; -import { withRouter, useLocation } from "react-router-dom"; +import { useParams, useHistory, useLocation } from "react-router-dom"; import ChecklistModal from "../Checklist/ChecklistModal"; import CalculationWizardRoutes from "./CalculationWizardRoutes"; import WizardFooter from "./WizardFooter"; @@ -26,8 +26,6 @@ const TdmCalculationWizard = props => { loginId, onSave, onViewChange, - history, - match, allowResidentialPackage, allowSchoolPackage, residentialPackageSelected, @@ -42,8 +40,10 @@ const TdmCalculationWizard = props => { closeStrategiesModal } = props; const context = useContext(ToastContext); - const page = Number(match.params.page || 1); - const projectId = Number(match.params.projectId); + const params = useParams(); + const history = useHistory(); + const page = Number(params.page || 1); + const projectId = Number(params.projectId); const { pathname } = useLocation(); const [ainInputError, setAINInputError] = useState(""); @@ -139,7 +139,7 @@ const TdmCalculationWizard = props => { }; const handleValidate = () => { - const { page } = match.params; + const { page } = params; const validations = { 1: { function: () => { @@ -158,9 +158,9 @@ const TdmCalculationWizard = props => { }; const onPageChange = pageNo => { - const { page, projectId } = match.params; + const { page, projectId } = params; const projectIdParam = projectId ? `/${projectId}` : ""; - if (Number(pageNo) > Number(match.params.page)) { + if (Number(pageNo) > Number(page)) { if (handleValidate()) { // Skip page 4 unless Packages are applicable const nextPage = Number(page) + 1; @@ -266,15 +266,6 @@ TdmCalculationWizard.propTypes = { validationErrors: PropTypes.array }) ).isRequired, - match: PropTypes.shape({ - params: PropTypes.shape({ - page: PropTypes.string, - projectId: PropTypes.string - }) - }), - history: PropTypes.shape({ - push: PropTypes.func.isRequired - }), onInputChange: PropTypes.func.isRequired, onCommentChange: PropTypes.func, onPkgSelect: PropTypes.func.isRequired, @@ -301,4 +292,4 @@ TdmCalculationWizard.propTypes = { closeStrategiesModal: PropTypes.func }; -export default withRouter(TdmCalculationWizard); +export default TdmCalculationWizard; diff --git a/client/src/components/Projects/ProjectsPage.js b/client/src/components/Projects/ProjectsPage.js index d853eb98..33b82a2a 100644 --- a/client/src/components/Projects/ProjectsPage.js +++ b/client/src/components/Projects/ProjectsPage.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import PropTypes from "prop-types"; -import { Link, withRouter } from "react-router-dom"; +import { Link, useHistory } from "react-router-dom"; import { createUseStyles } from "react-jss"; import moment from "moment"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -118,12 +118,12 @@ const useStyles = createUseStyles({ } }); -const ProjectsPage = ({ account, history, contentContainerRef }) => { +const ProjectsPage = ({ account, contentContainerRef }) => { const [filterText, setFilterText] = useState(""); const [order, setOrder] = useState("asc"); const email = account.email; - const historyPush = history.push; - const handleError = useErrorHandler(email, historyPush); + const history = useHistory(); + const handleError = useErrorHandler(email, history.push); const projects = useProjects(handleError); const [orderBy, setOrderBy] = useState("dateCreated"); const [copyModalOpen, setCopyModalOpen] = useState(false); @@ -526,18 +526,9 @@ ProjectsPage.propTypes = { id: PropTypes.number, email: PropTypes.string }), - match: PropTypes.shape({ - params: PropTypes.shape({ - page: PropTypes.string, - projectId: PropTypes.string - }) - }), - history: PropTypes.shape({ - push: PropTypes.func.isRequired - }), contentContainerRef: PropTypes.object, rules: PropTypes.array, dateModified: PropTypes.string || null }; -export default withRouter(ProjectsPage); +export default ProjectsPage; diff --git a/client/src/components/PublicComment/PublicCommentPage.js b/client/src/components/PublicComment/PublicCommentPage.js index 58c413b0..1213b52f 100644 --- a/client/src/components/PublicComment/PublicCommentPage.js +++ b/client/src/components/PublicComment/PublicCommentPage.js @@ -1,4 +1,5 @@ import React, { useRef, useEffect, useState } from "react"; +import { useHistory } from "react-router-dom"; import { postPublicComment } from "./postPublicComment"; import { createUseStyles } from "react-jss"; import clsx from "clsx"; @@ -10,7 +11,6 @@ import useToast from "../../contexts/Toast/useToast"; import ContentContainer from "../Layout/ContentContainer"; import useErrorHandler from "../../hooks/useErrorHandler"; import useProjects from "../../hooks/useGetProjects"; -import { withRouter } from "react-router-dom"; import ProjectList from "./ProjectList"; const useStyles = createUseStyles({ @@ -66,13 +66,13 @@ const useStyles = createUseStyles({ } }); -const PublicCommentPage = ({ account, history }) => { +const PublicCommentPage = ({ account }) => { const focusRef = useRef(null); const classes = useStyles(); const toast = useToast(); - const historyPush = history.push; + const history = useHistory(); const email = account.email; - const handleError = useErrorHandler(email, historyPush); + const handleError = useErrorHandler(email, history.push); const projects = useProjects(handleError); const [selectedProjects, setSelectedProjects] = useState([]); @@ -116,7 +116,6 @@ const PublicCommentPage = ({ account, history }) => { resetForm({}); } } catch (err) { - console.error(err); toast.add( "An error occurred in transmitting your comment to the server." ); @@ -265,10 +264,7 @@ PublicCommentPage.propTypes = { lastName: PropTypes.string, id: PropTypes.number, email: PropTypes.string - }), - history: PropTypes.shape({ - push: PropTypes.func.isRequired }) }; -export default withRouter(PublicCommentPage); +export default PublicCommentPage; diff --git a/client/src/components/Roles.js b/client/src/components/Roles.js index 741715f9..458d62e4 100644 --- a/client/src/components/Roles.js +++ b/client/src/components/Roles.js @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from "react"; -import { withRouter, Redirect, Link } from "react-router-dom"; +import { Redirect, Link } from "react-router-dom"; import { createUseStyles } from "react-jss"; import * as accountService from "../services/account.service"; import { useToast } from "../contexts/Toast"; @@ -319,4 +319,4 @@ const Roles = () => { ); }; -export default withRouter(Roles); +export default Roles; diff --git a/client/src/components/TdmCalculationContainer.js b/client/src/components/TdmCalculationContainer.js index 0c680e2d..aaf7ceba 100644 --- a/client/src/components/TdmCalculationContainer.js +++ b/client/src/components/TdmCalculationContainer.js @@ -1,7 +1,8 @@ /* eslint-disable linebreak-style */ import React, { useEffect, useState, useCallback } from "react"; +import { useParams, useHistory } from "react-router-dom"; import PropTypes from "prop-types"; -import { Prompt, withRouter } from "react-router-dom"; +import { Prompt } from "react-router-dom"; import TdmCalculation from "./ProjectSinglePage/TdmCalculation"; import TdmCalculationWizard from "./ProjectWizard/TdmCalculationWizard"; import * as ruleService from "../services/rule.service"; @@ -52,8 +53,6 @@ const filters = { }; export function TdmCalculationContainer({ - history, - match, account, classes, hasConfirmedNavTransition, @@ -67,9 +66,11 @@ export function TdmCalculationContainer({ dateModified, setDateModified }) { + const params = useParams(); + const history = useHistory(); const [engine, setEngine] = useState(null); const [formInputs, setFormInputs] = useState({}); - const [projectId, setProjectId] = useState(null); + const [projectId, setProjectId] = useState(params.projectId); const [loginId, setLoginId] = useState(0); const [view, setView] = useState("w"); const [strategiesInitialized, setStrategiesInitialized] = useState(false); @@ -107,7 +108,7 @@ export function TdmCalculationContainer({ if (!engine) return; // If projectId param is not defined, projectId // will be assigned the string "undefined" - ugh! - const projectId = Number(match.params.projectId) || null; + const projectId = Number(projectId) || null; setProjectId(projectId ? Number(projectId) : null); try { let projectResponse = null; @@ -140,10 +141,10 @@ export function TdmCalculationContainer({ }; initiateEngine(); }, [ - match.params.projectId, engine, - account, history, + projectId, + account, triggerInitiateEngine, setRules, setDateModified @@ -634,18 +635,6 @@ TdmCalculationContainer.propTypes = { id: PropTypes.number, email: PropTypes.string }), - match: PropTypes.shape({ - params: PropTypes.shape({ - page: PropTypes.string, - projectId: PropTypes.string - }) - }), - history: PropTypes.shape({ - push: PropTypes.func.isRequired, - location: PropTypes.shape({ - pathname: PropTypes.string - }) - }), classes: PropTypes.object.isRequired, location: PropTypes.shape({ search: PropTypes.string @@ -662,4 +651,4 @@ TdmCalculationContainer.propTypes = { setDateModified: PropTypes.func }; -export default withRouter(injectSheet(styles)(TdmCalculationContainer)); +export default injectSheet(styles)(TdmCalculationContainer); diff --git a/client/src/components/TermsAndConditions/TermsAndConditionsModal.js b/client/src/components/TermsAndConditions/TermsAndConditionsModal.js index 59c40e33..107b4350 100644 --- a/client/src/components/TermsAndConditions/TermsAndConditionsModal.js +++ b/client/src/components/TermsAndConditions/TermsAndConditionsModal.js @@ -1,7 +1,6 @@ import React, { useState } from "react"; import { createUseStyles } from "react-jss"; -import { withRouter } from "react-router-dom"; -import { useHistory } from "react-router"; +import { useHistory } from "react-router-dom"; import ModalDialog from "../UI/AriaModal/ModalDialog"; import Button from "../Button/Button"; import PropTypes from "prop-types"; @@ -17,9 +16,8 @@ const useStyles = createUseStyles({ const TermsAndConditionsModal = () => { const classes = useStyles(); - - const [modalOpen, setModalOpen] = useState(true); const history = useHistory(); + const [modalOpen, setModalOpen] = useState(true); const closeModal = () => { setModalOpen(false); @@ -73,4 +71,4 @@ TermsAndConditionsModal.propTypes = { termsAndConditionsModalProp: PropTypes.string }; -export default withRouter(TermsAndConditionsModal); +export default TermsAndConditionsModal; From f4b6963d0316280711268202ff6a1c89ee991cb1 Mon Sep 17 00:00:00 2001 From: John Darragh Date: Fri, 3 Nov 2023 18:56:16 -0700 Subject: [PATCH 2/3] revert package.json and package-lock.json for client --- client/package-lock.json | 36 ++++++++++++++++++++++-------------- client/package.json | 2 +- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index 934b5c4d..7fb76a24 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -28,7 +28,7 @@ "react-jss": "^10.8.2", "react-loader": "^2.4.7", "react-quill": "^2.0.0", - "react-router-dom": "5.3", + "react-router-dom": "^5.3.0", "react-select": "^5.2.2", "react-string-replace": "^1.1.0", "react-to-print": "^2.14.12", @@ -14648,14 +14648,14 @@ } }, "node_modules/react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", + "version": "5.2.1", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", "hoist-non-react-statics": "^3.1.0", "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", "path-to-regexp": "^1.7.0", "prop-types": "^15.6.2", "react-is": "^16.6.0", @@ -14667,15 +14667,14 @@ } }, "node_modules/react-router-dom": { - "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==", + "version": "5.3.0", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", "loose-envify": "^1.3.1", "prop-types": "^15.6.2", - "react-router": "5.3.4", + "react-router": "5.2.1", "tiny-invariant": "^1.0.2", "tiny-warning": "^1.0.0" }, @@ -14685,21 +14684,30 @@ }, "node_modules/react-router/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==" + "license": "MIT" + }, + "node_modules/react-router/node_modules/mini-create-react-context": { + "version": "0.4.1", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } }, "node_modules/react-router/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==", + "license": "MIT", "dependencies": { "isarray": "0.0.1" } }, "node_modules/react-router/node_modules/react-is": { "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "license": "MIT" }, "node_modules/react-scripts": { "version": "5.0.1", diff --git a/client/package.json b/client/package.json index b48b25d8..94ad109a 100644 --- a/client/package.json +++ b/client/package.json @@ -49,7 +49,7 @@ "react-jss": "^10.8.2", "react-loader": "^2.4.7", "react-quill": "^2.0.0", - "react-router-dom": "5.3", + "react-router-dom": "^5.3.0", "react-select": "^5.2.2", "react-string-replace": "^1.1.0", "react-to-print": "^2.14.12", From 5e355b83ba59aeb47932f24c5105f89f123cd5df Mon Sep 17 00:00:00 2001 From: John Darragh Date: Tue, 7 Nov 2023 16:24:36 -0800 Subject: [PATCH 3/3] Upgrade to react-router v6 --- client/package-lock.json | 121 ++----- client/package.json | 2 +- client/src/App.js | 263 ++++++-------- client/src/AppInsights.js | 30 -- client/src/AppWrapper.js | 50 +-- client/src/components/About.js | 2 +- client/src/components/Admin.js | 9 +- .../components/ArchiveDelete/RolesArchive.js | 15 +- .../components/Authorization/ConfirmEmail.js | 12 +- .../Authorization/ForgotPassword.js | 2 +- client/src/components/Authorization/Login.js | 55 +-- .../Authorization/ProtectedRoute.js | 4 +- .../src/components/Authorization/Register.js | 2 +- .../components/Authorization/RequireAuth.js | 4 +- .../components/Authorization/ResetPassword.js | 8 +- .../components/Authorization/Unauthorized.js | 4 +- .../components/Authorization/UpdateAccount.js | 2 +- .../src/components/Button/SwitchViewButton.js | 30 -- client/src/components/Faq/FaqView.jsx | 2 +- client/src/components/Footer.js | 2 +- .../src/components/Layout/ContentContainer.js | 20 +- .../Layout/ContentContainerNoSidebar.js | 22 +- client/src/components/NavBar.js | 12 +- client/src/components/NavBarLogin.js | 12 +- client/src/components/PrivacyPolicy.js | 2 +- .../ProjectSinglePage/ResultList.js | 34 -- .../ProjectSinglePage/ResultView.js | 37 -- .../components/ProjectSinglePage/RuleInput.js | 163 --------- .../ProjectSinglePage/RuleInput.test.js | 28 -- .../components/ProjectSinglePage/RuleList.js | 38 -- .../ProjectSinglePage/RulePanels.js | 58 --- .../components/ProjectSinglePage/RuleView.js | 6 +- .../ProjectSinglePage/RuleViewContainer.js | 11 +- .../ProjectSinglePage/TdmCalculation.js | 193 ---------- .../ProjectWizard/CalculationWizardRoutes.js | 123 ++++--- .../RuleStrategy/RuleStrategy.js | 2 +- .../ProjectWizard/TdmCalculationWizard.js | 126 ++++--- .../WizardSidebar/WizardSidebar.js | 13 +- .../src/components/Projects/ProjectsPage.js | 15 +- .../PublicComment/PublicCommentPage.js | 8 +- client/src/components/Roles.js | 18 +- .../src/components/TdmCalculationContainer.js | 165 ++++----- .../TermsAndConditionsModal.js | 6 +- .../TermsAndConditionsPage.js | 2 +- docs/old/application-insights.md | 35 -- server/package-lock.json | 333 +----------------- server/package.json | 1 - server/server.js | 16 +- 48 files changed, 467 insertions(+), 1651 deletions(-) delete mode 100644 client/src/AppInsights.js delete mode 100644 client/src/components/Button/SwitchViewButton.js delete mode 100644 client/src/components/ProjectSinglePage/ResultList.js delete mode 100644 client/src/components/ProjectSinglePage/ResultView.js delete mode 100644 client/src/components/ProjectSinglePage/RuleInput.js delete mode 100644 client/src/components/ProjectSinglePage/RuleInput.test.js delete mode 100644 client/src/components/ProjectSinglePage/RuleList.js delete mode 100644 client/src/components/ProjectSinglePage/RulePanels.js delete mode 100644 client/src/components/ProjectSinglePage/TdmCalculation.js delete mode 100644 docs/old/application-insights.md diff --git a/client/package-lock.json b/client/package-lock.json index 7fb76a24..41a76f67 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -28,7 +28,7 @@ "react-jss": "^10.8.2", "react-loader": "^2.4.7", "react-quill": "^2.0.0", - "react-router-dom": "^5.3.0", + "react-router-dom": "^6.18.0", "react-select": "^5.2.2", "react-string-replace": "^1.1.0", "react-to-print": "^2.14.12", @@ -3196,6 +3196,14 @@ "@babel/runtime": "^7.20.13" } }, + "node_modules/@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "dev": true, @@ -5507,7 +5515,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001340", + "version": "1.0.30001561", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001561.tgz", + "integrity": "sha512-NTt0DNoKe958Q0BE0j0c1V9jbUzhBxHIEJy7asmGrpE0yG63KTV7PLHPnK2E1O9RsQrQ081I3NLuXGS6zht3cw==", "funding": [ { "type": "opencollective", @@ -5516,9 +5526,12 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } - ], - "license": "CC-BY-4.0" + ] }, "node_modules/case-sensitive-paths-webpack-plugin": { "version": "2.4.0", @@ -8775,18 +8788,6 @@ "he": "bin/he" } }, - "node_modules/history": { - "version": "4.10.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.1.2", - "loose-envify": "^1.2.0", - "resolve-pathname": "^3.0.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0", - "value-equal": "^1.0.1" - } - }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "license": "BSD-3-Clause", @@ -14648,67 +14649,35 @@ } }, "node_modules/react-router": { - "version": "5.2.1", - "license": "MIT", + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "mini-create-react-context": "^0.4.0", - "path-to-regexp": "^1.7.0", - "prop-types": "^15.6.2", - "react-is": "^16.6.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.11.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.3.0", - "license": "MIT", + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.2.1", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" }, - "peerDependencies": { - "react": ">=15" - } - }, - "node_modules/react-router/node_modules/isarray": { - "version": "0.0.1", - "license": "MIT" - }, - "node_modules/react-router/node_modules/mini-create-react-context": { - "version": "0.4.1", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.1", - "tiny-warning": "^1.0.3" + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "prop-types": "^15.0.0", - "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + "react": ">=16.8", + "react-dom": ">=16.8" } }, - "node_modules/react-router/node_modules/path-to-regexp": { - "version": "1.8.0", - "license": "MIT", - "dependencies": { - "isarray": "0.0.1" - } - }, - "node_modules/react-router/node_modules/react-is": { - "version": "16.13.1", - "license": "MIT" - }, "node_modules/react-scripts": { "version": "5.0.1", "dev": true, @@ -15157,10 +15126,6 @@ "node": ">=8" } }, - "node_modules/resolve-pathname": { - "version": "3.0.0", - "license": "MIT" - }, "node_modules/resolve-url-loader": { "version": "4.0.0", "dev": true, @@ -16715,20 +16680,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "dev": true, - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "dev": true, @@ -16915,10 +16866,6 @@ "node": ">= 8" } }, - "node_modules/value-equal": { - "version": "1.0.1", - "license": "MIT" - }, "node_modules/vary": { "version": "1.1.2", "dev": true, diff --git a/client/package.json b/client/package.json index 94ad109a..39e43e31 100644 --- a/client/package.json +++ b/client/package.json @@ -49,7 +49,7 @@ "react-jss": "^10.8.2", "react-loader": "^2.4.7", "react-quill": "^2.0.0", - "react-router-dom": "^5.3.0", + "react-router-dom": "^6.18.0", "react-select": "^5.2.2", "react-string-replace": "^1.1.0", "react-to-print": "^2.14.12", diff --git a/client/src/App.js b/client/src/App.js index 225c7291..660fdd79 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,8 +1,7 @@ -import React, { useContext, useState } from "react"; +import React, { useContext } from "react"; import UserContext from "./contexts/UserContext"; import PropTypes from "prop-types"; - -import { Route, Redirect, Switch } from "react-router-dom"; +import { Route, Navigate, Routes, Outlet } from "react-router-dom"; import RequireAuth from "./components/Authorization/RequireAuth"; import { createUseStyles } from "react-jss"; import { withToastProvider } from "./contexts/Toast"; @@ -52,10 +51,6 @@ const App = ({ const classes = useStyles(); const userContext = useContext(UserContext); const account = userContext.account; - const [rules, setRules] = useState([]); - const [dateModified, setDateModified] = useState(null); - - // console.error("account: " + JSON.stringify(account, null, 2)); return ( @@ -66,11 +61,11 @@ const App = ({ />
- + {/* These routes either have no sidebar or use a custom sidebar */} ( + element={ - )} - > - - - - - + } + /> + + } + /> } + element={} /> ( - - )} + } /> + + + + } + /> + {/* Layout Route adds plain Sidebar */} + + +
+ +
+ + } + > + } /> + } + /> - {/* These routes use the same sidebar component */} - - <> - - - <> -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ( - - - - )} - /> - - ( - - - - )} - /> - - ( - - - - )} - /> - - ( - - - - )} - /> - - - - - - - - -
- - - + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + + + + + } + /> + + + + } + /> + + + + } + /> + + } + /> + } + /> - +