centralize all routes

frontend/src/components/recipes/RecipeListPage.tsx

@@ -2,6 +2,8 @@ import { useEffect, useState } from "react"
 import RecipeListItem from "./RecipeListItem"
 import type { Recipe } from "../../types/recipe"
 import { fetchRecipeList } from "../../api/recipePoint"
+import { useNavigate } from "react-router-dom"
+import { getRecipeAddUrl, getRecipeAddUrlDefinition, getRecipeDetailUrl } from "../../routes"
 
 /**
  * Displays a list of recipes in a sidebar layout.
@@ -9,22 +11,26 @@ import { fetchRecipeList } from "../../api/recipePoint"
  */
 export default function RecipeListPage() {
 
-    const [recipeList, setRecipeList] = useState<Recipe[]|null>(null)
-    // load recipes once on render
-      useEffect(() => {
-        const loadRecipeList = async () => { 
-            try {
-              // Fetch recipe list
-              console.log("loading recipe list")
-              const data = await fetchRecipeList()
-              setRecipeList(data)
-            } catch (err) {
-              console.error(err)
-            }
-        }
-        loadRecipeList()
-      }, [])
+  const navigate = useNavigate()
+  const [recipeList, setRecipeList] = useState<Recipe[]|null>(null)
+  // load recipes once on render
+    useEffect(() => {
+      const loadRecipeList = async () => { 
+          try {
+            // Fetch recipe list
+            console.log("loading recipe list")
+            const data = await fetchRecipeList()
+            setRecipeList(data)
+          } catch (err) {
+            console.error(err)
+          }
+      }
+      loadRecipeList()
+    }, [])
   
+  const handleAdd = () => {
+    navigate(getRecipeAddUrl())
+  }
   if(!recipeList) { return <div>Unable to load recipes!</div>}
   return (
     /*Contaier spanning entire screen used to center content horizontally */
@@ -39,7 +45,9 @@ export default function RecipeListPage() {
             <input className="input-field"
               placeholder="Search"
             ></input>
-            <button className="primary-button">
+            <button className="primary-button"
+              onClick={handleAdd}
+            >
               Add recipe
             </button>
           </div>
@@ -50,7 +58,7 @@ export default function RecipeListPage() {
             <RecipeListItem 
               key={recipe.id}
               title = {recipe.title}
-              targetPath={'recipe/'+recipe.id}
+              targetPath={getRecipeDetailUrl(recipe.id)}
             />
           ))}
         </div>