Upgrade outdated libraries (including react-router-dom) and node version

.nvmrc

@@ -1 +1 @@
-v12.3.1
+v16.13.2

package.json

@@ -6,15 +6,16 @@
     "dependencies": {
         "@datapunt/matomo-tracker-react": "^0.5.1",
         "classnames": "^2.3.2",
+        "query-string": "^8.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga": "^3.3.1",
         "react-ga4": "^1.4.1",
-        "react-router-dom": "^5.3.4",
+        "react-router-dom": "^6.14.2",
         "react-router-hash-link": "^2.4.3",
-        "react-select": "^3.2.0",
+        "react-select": "^5.7.4",
         "react-visibility-sensor": "^5.1.1",
-        "reactjs-popup": "npm:reactjs-popup@^1.5.0",
+        "reactjs-popup": "^2.0.5",
         "reactjs-popup2": "npm:reactjs-popup@^2.0.5",
         "sass": "^1.64.0"
     },
@@ -43,7 +44,8 @@
         ]
     },
     "devDependencies": {
-        "gh-pages": "^2.2.0",
-        "react-scripts": "^4.0.3"
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "gh-pages": "^5.0.0",
+        "react-scripts": "^5.0.1"
     }
 }

src/App.js

@@ -9,9 +9,9 @@
 import React, { useEffect } from 'react'
 import {
   HashRouter as Router,
-  Switch,
+  Routes,
   Route,
-  useHistory,
+  useNavigate,
 } from 'react-router-dom'
 import ReactGA from 'react-ga4'
 import { useMatomo } from '@datapunt/matomo-tracker-react'
@@ -46,61 +46,61 @@ import LostAPet from './components/LostAPet'
 
 
 const ScrollToTop = () => {
-  const history = useHistory()
+  const navigate = useNavigate()
   const { trackPageView } = useMatomo()
 
   useEffect(() => {
-    if (history.action === 'PUSH') {
+    if (navigate.action === 'PUSH') {
       window.scrollTo(0, 0);
-      ReactGA.set({ page: history.location.pathname });
-      ReactGA.send({ hitType: 'pageview', page: history.location.hash || history.location.pathname });
-      trackPageView({ href: history.location.pathname});
+      ReactGA.set({ page: navigate.location.pathname });
+      ReactGA.send({ hitType: 'pageview', page: navigate.location.hash || navigate.location.pathname });
+      trackPageView({ href: navigate.location.pathname});
     }
-  }, [history.location, history.action, trackPageView])
+  }, [navigate.location, navigate.action, trackPageView])
 
   return null
 }
 
 const App = () => (
-  <Router basename="/rescue-ui">
+  <Router basename='rescue-ui'>
     <ScrollToTop />
     <GlobalDataProvider>
-      <Switch>
-        <Route exact path="/" component={Home} />
-        <Route exact path="/adoptions" component={Adopt} />
-        <Route exact path="/before-you-adopt" component={BeforeYouAdopt} />
-        <Route exact path="/mission" component={Mission} />
-        <Route exact path="/volunteer" component={Volunteer} />
-        <Route exact path="/volunteer-form" component={VolunteerForm} />
-        <Route exact path="/help-our-cause" component={HelpOurCause} />
-        <Route exact path="/lost-a-pet" component={LostAPet} />
-        <Route exact path="/cats" component={Cats} />
-        <Route exact path="/dogs" component={Dogs} />
+      <Routes basename='rescue-ui'>
+        <Route exact path="/" element={<Home/>} />
+        <Route exact path="/adoptions" element={<Adopt/>} />
+        <Route exact path="/before-you-adopt" element={<BeforeYouAdopt/>} />
+        <Route exact path="/mission" element={<Mission/>} />
+        <Route exact path="/volunteer" element={<Volunteer/>} />
+        <Route exact path="/volunteer-form" element={<VolunteerForm/>} />
+        <Route exact path="/help-our-cause" element={<HelpOurCause/>} />
+        <Route exact path="/lost-a-pet" element={<LostAPet/>} />
+        <Route exact path="/cats" element={<Cats/>} />
+        <Route exact path="/dogs" element={<Dogs/>} />
         <Route
           exact
           path="/pet-details/:petType/:list/:animalId"
-          component={AnimalDetails}
+          element={<AnimalDetails />}
         />
         <Route
           exact
           path="/adoption-form/:petType/:list/:animalId"
-          component={AdoptionForm}
+          element={<AdoptionForm />}
         />
-        <Route exact path="/success-stories" component={SuccessStories} />
-        <Route exact path="/contact" component={Contact} />
-        <Route exact path="/adoption-locations" component={AdoptionLocations} />
-        <Route exact path="/working-cats" component={WorkingCats} />
-        <Route exact path="/working-cats-form" component={WorkingCatsForm} />
-        <Route exact path="/donate" component={Donate} />
-        <Route exact path="/forever-foster" component={ForeverFoster} />
-        <Route exact path="/privacy-policy" component={PrivacyPolicy} />
-        <Route exact path="/form-submitted" component={FormSubmitted} />
-        <Route exact path="/volunteer-form-submitted" component={VolunteerFormSubmitted} />
-        <Route exact path="/special-need/:reference" component={Legacy} />
-        <Route exact path="/error" component={ErrorPage} />
-        <Route path="/:pagename" component={Page} />
-        <Route component={UnderConstruction} />
-      </Switch>
+        <Route exact path="/success-stories" element={<SuccessStories/>} />
+        <Route exact path="/contact" element={<Contact/>} />
+        <Route exact path="/adoption-locations" element={<AdoptionLocations/>} />
+        <Route exact path="/working-cats" element={<WorkingCats/>} />
+        <Route exact path="/working-cats-form" element={<WorkingCatsForm/>} />
+        <Route exact path="/donate" element={<Donate/>} />
+        <Route exact path="/forever-foster" element={<ForeverFoster/>} />
+        <Route exact path="/privacy-policy" element={<PrivacyPolicy/>} />
+        <Route exact path="/form-submitted" element={<FormSubmitted/>} />
+        <Route exact path="/volunteer-form-submitted" element={<VolunteerFormSubmitted/>} />
+        <Route exact path="/special-need/:reference" element={<Legacy/>} />
+        <Route exact path="/error" element={<ErrorPage/>} />
+        <Route path="/:pagename" element={<Page/>} />
+        <Route element={<UnderConstruction/>} />
+      </Routes>
     </GlobalDataProvider>
   </Router>
 )

src/assets/stylesheets/style.scss

@@ -114,3 +114,30 @@ hr {
 // [data-popup='tooltip'].popup-overlay {
 //   background: transparent;
 // }
+
+.popup-content {
+  .menu {
+
+    .menu-item {
+
+      a {
+        border: none;
+        text-decoration: none;
+        color: #000;
+        font-size: 1.7rem;
+        font-weight: 500;
+        margin: 0.9rem 0.9rem 0.9rem 0;
+        white-space: nowrap;
+
+        border-bottom: 0.2rem solid transparent;
+        transition: border-bottom 0.2s;
+        padding-bottom: 0.3rem;
+
+        &:hover, &:active {
+          border-bottom: 0.2rem solid $color-secondary;
+          padding-bottom: 0.3rem;
+        }
+      }
+    }
+  }
+}

src/components/AdoptableLists.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
-import { Link, useHistory, useLocation } from 'react-router-dom'
-import * as qs from 'query-string'
+import { Link, useNavigate, useLocation } from 'react-router-dom'
+import qs from 'query-string'
 import classNames from 'classnames/bind'
 import StandardLayout from './StandardLayout'
 import Error from './Error'
@@ -14,7 +14,7 @@ const cx = classNames.bind(styles)
 const AdoptableList = ({ children, ...rest }) => {
   const { petType, lists } = rest
   const location = useLocation()
-  const history = useHistory()
+  const navigate = useNavigate()
   const { pageNum = 1, s: scrollParam, ...restQueryParams } = qs.parse(
     location.search
   )
@@ -38,8 +38,9 @@ const AdoptableList = ({ children, ...rest }) => {
           maxSize = document.documentElement.scrollHeight
         } else if (document.documentElement.scrollHeight > scrollParam) {
           window.scrollTo(0, scrollParam)
-          history.replace({
+          navigate({
             ...location,
+            replace: true,
             search: qs.stringify({
               pageNum,
               ...restQueryParams,
@@ -50,18 +51,18 @@ const AdoptableList = ({ children, ...rest }) => {
       }, 1000)
 
     return () => clearInterval(intervalId)
-  }, [history, location, pageNum, restQueryParams, scrollParam])
+  }, [navigate, location, pageNum, restQueryParams, scrollParam])
 
   const PageLink = ({ pageNum, ...rest }) => (
     <Link
-      to={location => ({
+      to={{
         ...location,
-        search: qs.stringify({ ...restQueryParams, pageNum }),
-      })}
+        search: `?${qs.stringify({ ...restQueryParams, pageNum })}`,
+      }}
       {...rest}
     />
   )
-
+  
   return (
     <StandardLayout>
       {error ? (

src/components/AdoptionForm.js

@@ -6,14 +6,12 @@ import { usePetData } from '../context/GlobalDataContext'
 import StandardLayout from './StandardLayout'
 import StandardForm from './StandardForm'
 import styles from './AdoptionForm.module.scss'
+import { useParams } from 'react-router-dom'
 
 const cx = classNames.bind(styles)
 
-const AdoptionForm = ({
-  match: {
-    params: { petType, list, animalId },
-  },
-}) => {
+const AdoptionForm = () => {
+  const { petType, list, animalId } = useParams()
   const [forYou, setForYou] = useState()
   const [otherAnimals, setOtherAnimals] = useState()
   const [othersSpayed, setOthersSpayed] = useState()

src/components/AnimalCard.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
-import * as qs from 'query-string'
+import { useNavigate, useLocation } from 'react-router-dom'
+import qs from 'query-string'
 import classNames from 'classnames/bind'
 import { PROTOCOL, HOSTNAME } from '../config/StFrancisRescue'
 import { getAge } from '../config/helpers'
@@ -12,13 +12,14 @@ const cx = classNames.bind(styles)
 const AnimalCard = props => {
   const { pet } = props
   const location = useLocation()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const onLinkClick = event => {
     const search = qs.parse(location.search)
 
-    history.replace({
+    navigate({
       ...location,
+      replace: true,
       search: qs.stringify({
         ...search,
         s: window.scrollY,

src/components/AnimalDetails.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
 import classNames from 'classnames/bind'
 import Popup from 'reactjs-popup'
 import { PROTOCOL, HOSTNAME } from '../config/StFrancisRescue'
@@ -38,11 +38,8 @@ const AnimalImages = ({ images, name, index }) => {
   )
 }
 
-const AnimalDetails = ({
-  match: {
-    params: { petType, list, animalId },
-  },
-}) => {
+const AnimalDetails = () => {
+  const { petType, list, animalId } = useParams()
   const petData = usePetData()
   const pet =
     petData &&

src/components/AnimalLink.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 
 const AnimalLink = ({ petType, list, pet: { id }, ...rest }) => (
-  <Link to={`./pet-details/${petType}/${list}/${id}`} {...rest} />
+  <Link to={`/pet-details/${petType}/${list}/${id}`} {...rest} />
 )
 
 export default AnimalLink

src/components/AnimalSearch.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
-import * as qs from 'query-string'
+import { useNavigate, useLocation } from 'react-router-dom'
+import qs from 'query-string'
 import classNames from 'classnames/bind'
 import Popup from 'reactjs-popup'
 import usePetSearch from '../hooks/usePetSearch'
@@ -31,7 +31,7 @@ const populateValuesFromQuery = (choiceLookup, queryLookup) =>
 const AnimalSearch = ({ petType, lists }) => {
   const petSearch = usePetSearch(petType, lists)
   const location = useLocation()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const [inputs, setInputs] = useState()
 
@@ -54,12 +54,12 @@ const AnimalSearch = ({ petType, lists }) => {
   const clear = () => setInputs(clearValues(petSearch))
 
   const set = () => {
-    history.push({
+    navigate({
       ...location,
       search: qs.stringify({
         ...qs.parse(location.search),
         ...extractValues(inputs),
-        name: inputs.name || undefined,
+        name: inputs?.name || undefined,
       }),
     })
   }
@@ -86,7 +86,7 @@ const AnimalSearch = ({ petType, lists }) => {
             <input
               type="text"
               id="name"
-              value={inputs.name || ''}
+              value={inputs?.name || ''}
               onChange={setInput('name')}
               className={cx('search-input')}
               autoFocus
@@ -110,7 +110,7 @@ const AnimalSearch = ({ petType, lists }) => {
                 <SelectOverride
                   id={prop}
                   options={petSearch[prop].choices}
-                  value={inputs[prop]}
+                  value={inputs ? inputs[prop] : undefined}
                   onChange={setSelect(prop)}
                 />
               </>