Update packages

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

Hide file tree

Showing 4 changed files with 1,617 additions and 1,736 deletions.
diff --git a/package.json b/package.json
@@ -17,10 +17,10 @@
     "@types/react-dom": "^18.2.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/string-math": "^1.0.3",
-    "bootstrap": "^4.5.2",
+    "bootstrap": "^5.3.3",
     "fuzzyset": "^1.0.5",
     "react": "^18.2.0",
-    "react-bootstrap": "^1.3.0",
+    "react-bootstrap": "^2.10.4",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.2.0",
     "string-math": "^1.2.2",
@@ -55,7 +55,7 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^6.1.1",
     "prettier": "^2.1.1",
     "react-scripts": "^5.0.1",
     "tslint": "^6.1.3",

diff --git a/src/CreateRecipe.tsx b/src/CreateRecipe.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react'
-import { Card, Button, Overlay, Tooltip, Form } from 'react-bootstrap'
+import { Card, Button, Overlay, Tooltip, Form, Row, Col } from 'react-bootstrap'
 import YAML from 'yaml'
 import stringMath from 'string-math'
 
@@ -40,7 +40,7 @@ const IngredientsForm: React.FC<{
   updateIngredients: React.Dispatch<React.SetStateAction<any[]>>
 }> = ({ ingredients, updateIngredients }) => {
   const onIngredientAmountChange = (event: any) => {
-    const value = stringMath(event.target.value, () => {})
+    const value = stringMath(event.target.value, () => undefined)
     const index = Number(event.target.getAttribute('data-tag'))
     updateIngredients((oldList: any[]) => [
       ...oldList.slice(0, index),
@@ -79,38 +79,40 @@ const IngredientsForm: React.FC<{
       <Card.Header>Ingredients</Card.Header>
       <Card.Body>
         {ingredients.map((ingredient: any, index: number) => (
-          <Form.Row key={index}>
-            <Form.Group>
-              <Form.Label>Amount</Form.Label>
-              <Form.Control
-                data-tag={index}
-                placeholder="Enter a number."
-                value={ingredient.amount}
-                onChange={onIngredientAmountChange}
-              />
-            </Form.Group>
-            <Form.Group>
-              <Form.Label>Unit</Form.Label>
-              <Form.Control
-                data-tag={index}
-                placeholder='e.g., "grams", "cups"'
-                value={ingredient.unit}
-                onChange={onIngredientUnitChange}
-              />
-            </Form.Group>
-            <Form.Group>
-              <Form.Label>Ingredient</Form.Label>
-              <Form.Control
-                data-tag={index}
-                placeholder="Enter a Name."
-                value={ingredient.name}
-                onChange={onIngredientNameChange}
-              />
-            </Form.Group>
+          <Form key={index}>
+            <Row>
+              <Form.Group as={Col}>
+                <Form.Label>Amount</Form.Label>
+                <Form.Control
+                  data-tag={index}
+                  placeholder="Enter a number."
+                  value={ingredient.amount}
+                  onChange={onIngredientAmountChange}
+                />
+              </Form.Group>
+              <Form.Group as={Col}>
+                <Form.Label>Unit</Form.Label>
+                <Form.Control
+                  data-tag={index}
+                  placeholder='e.g., "grams", "cups"'
+                  value={ingredient.unit}
+                  onChange={onIngredientUnitChange}
+                />
+              </Form.Group>
+              <Form.Group as={Col}>
+                <Form.Label>Ingredient</Form.Label>
+                <Form.Control
+                  data-tag={index}
+                  placeholder="Enter a Name."
+                  value={ingredient.name}
+                  onChange={onIngredientNameChange}
+                />
+              </Form.Group>
+            </Row>
             <Button data-tag={index} onClick={onRemoveIngredients}>
               Remove
             </Button>
-          </Form.Row>
+          </Form>
         ))}
         <Button onClick={onAppendIngredient}>Add Ingredient</Button>
       </Card.Body>

diff --git a/src/Recipe.tsx b/src/Recipe.tsx
@@ -74,6 +74,7 @@ const RecipeError: React.FC<{ recipeName: string }> = ({ recipeName }) => {
 
 const Recipe: React.FC<{ recipeName: string }> = ({ recipeName }) => {
   const [recipe, setRecipe] = useState<any>()
+  // FIXME: Dev doesn't think this needs to be this complicated.
   const [useMetricUnits, setUseMetricUnits] = useState<boolean>(
     () => localStorage.getItem('useMetricUnit') === true.toString()
   )
@@ -99,8 +100,9 @@ const Recipe: React.FC<{ recipeName: string }> = ({ recipeName }) => {
   ) : recipe ? (
     <>
       <Card.Title as="h1">{recipe.title}</Card.Title>
-      <ButtonGroup toggle={true}>
+      <ButtonGroup>
         <ToggleButton
+          id="set-metric"
           type="radio"
           value={useMetricUnits.toString()}
           checked={useMetricUnits}
@@ -109,6 +111,7 @@ const Recipe: React.FC<{ recipeName: string }> = ({ recipeName }) => {
           Metric
         </ToggleButton>
         <ToggleButton
+          id="set-imperial"
           type="radio"
           value={(!useMetricUnits).toString()}
           checked={!useMetricUnits}