Update more dependencies

ellishg · Aug 8, 2024 · e99ab0a · e99ab0a
1 parent bebc0bd
commit e99ab0a
Show file tree

Hide file tree

Showing 4 changed files with 201 additions and 395 deletions.
diff --git a/package.json b/package.json
@@ -6,12 +6,12 @@
   "license": "MIT",
   "author": "Ellis Hoag <ellis.sparky.hoag@gmail.com>",
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/fuzzyset": "^1.0.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^22.1.0",
     "@types/react": "^18.2.0",
     "@types/react-bootstrap": "^0.32.22",
     "@types/react-dom": "^18.2.0",
@@ -22,10 +22,10 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.4",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.26.0",
     "string-math": "^1.2.2",
-    "typescript": "^3.9.7",
-    "yaml": "^1.10.0"
+    "typescript": "^5.5.4",
+    "yaml": "^2.5.0"
   },
   "scripts": {
     "prestart": "urban-bassoon/build.py public/recipe-data",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "gh-pages": "^6.1.1",
-    "prettier": "^2.1.1",
+    "prettier": "^3.3.3",
     "react-scripts": "^5.0.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Alert, Card, ListGroup, Nav, Form } from 'react-bootstrap'
-import { BrowserRouter, Link, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'
 import About from './About'
 import CreateRecipe from './CreateRecipe'
 import Loading from './Loading'
@@ -103,8 +103,6 @@ const BadURL: React.FC = () => {
   )
 }
 
-const getRecipe = (props: any) => <Recipe recipeName={props.match.params.recipeName} />
-
 const App: React.FC = () => {
   return (
     <BrowserRouter>
@@ -129,21 +127,13 @@ const App: React.FC = () => {
           </Nav>
         </Card.Header>
         <Card.Body>
-          <Switch>
-            <Route path={process.env.PUBLIC_URL + '/'} exact={true} component={Home} />
-            <Route path={process.env.PUBLIC_URL + '/about'} exact={true} component={About} />
-            <Route
-              path={process.env.PUBLIC_URL + '/create'}
-              exact={true}
-              component={CreateRecipe}
-            />
-            <Route
-              path={process.env.PUBLIC_URL + '/recipe/:recipeName'}
-              exact={true}
-              component={getRecipe}
-            />
-            <Route component={BadURL} />
-          </Switch>
+          <Routes>
+            <Route path={process.env.PUBLIC_URL + '/'} element={<Home />} />
+            <Route path={process.env.PUBLIC_URL + '/about'} element={<About />} />
+            <Route path={process.env.PUBLIC_URL + '/create'} element={<CreateRecipe />} />
+            <Route path={process.env.PUBLIC_URL + '/recipe/:recipeName'} element={<Recipe />} />
+            <Route path='/*' element={<BadURL />} />
+          </Routes>
         </Card.Body>
       </Card>
     </BrowserRouter>

diff --git a/src/Recipe.tsx b/src/Recipe.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Alert, ButtonGroup, Card, Image, ListGroup, ToggleButton } from 'react-bootstrap'
 import Loading from './Loading'
+import { useParams } from 'react-router-dom'
 
 const toNearestFraction = (x: number) => {
   const epsilon = 0.001
@@ -57,7 +58,7 @@ const ingredientAmountToString = (ingredient: any, useMetricUnits: boolean) => {
   }
 }
 
-const RecipeError: React.FC<{ recipeName: string }> = ({ recipeName }) => {
+const RecipeError: React.FC<{ recipeName: string | undefined }> = ({ recipeName }) => {
   return (
     <Alert variant="danger">
       <Alert.Heading>Could not find recipe '{recipeName}'.</Alert.Heading>
@@ -72,7 +73,8 @@ const RecipeError: React.FC<{ recipeName: string }> = ({ recipeName }) => {
   )
 }
 
-const Recipe: React.FC<{ recipeName: string }> = ({ recipeName }) => {
+const Recipe: React.FC = () => {
+  const { recipeName } = useParams()
   const [recipe, setRecipe] = useState<any>()
   // FIXME: Dev doesn't think this needs to be this complicated.
   const [useMetricUnits, setUseMetricUnits] = useState<boolean>(