centralize all routes

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import RecipeDetailPage from "./components/recipes/RecipeDetailPage"
 import RecipeEditPage from "./components/recipes/RecipeEditPage"
 import RecipeListPage from "./components/recipes/RecipeListPage"
+import { getRecipeAddUrlDefinition, getRecipeDetailsUrlDefinition, getRecipeEditUrlDefinition, getRootUrlDefinition } from "./routes"
 
 import "./App.css"
 
@@ -14,13 +15,16 @@ function App() {
     <Router>
       <Routes>
         {/* Home page: list of recipes */}
-        <Route path="/" element={<RecipeListPage />} />
+        <Route path= {getRootUrlDefinition()} element={<RecipeListPage />} />
 
         {/* Detail page: shows one recipe */}
-        <Route path="/recipe/:id" element={<RecipeDetailPage />} />
+        <Route path={getRecipeDetailsUrlDefinition()} element={<RecipeDetailPage />} />
 
         {/* Edit page: form to edit a recipe */}
-        <Route path="/recipe/:id/edit" element={<RecipeEditPage />} />
+        <Route path={getRecipeEditUrlDefinition()} element={<RecipeEditPage />} />
+
+        {/* Add page: form to add a recipe */}
+        <Route path={getRecipeAddUrlDefinition()} element={<RecipeEditPage />} />
       </Routes>
     </Router>
   )

frontend/src/components/recipes/RecipeDetailPage.tsx

@@ -2,6 +2,7 @@ import { useParams, Link } from "react-router-dom"
 import type { Recipe } from "../../types/recipe"
 import { useEffect, useState } from "react"
 import { fetchRecipe } from "../../api/recipePoint"
+import { getRecipeEditUrl, getRecipeListUrl } from "../../routes"
 
 
 /**
@@ -123,13 +124,13 @@ export default function RecipeDetailPage() {
       {/* Action buttons */}
       <div className="button-group">
         <Link
-          to={`/recipe/${recipe.id}/edit`}
+          to={ getRecipeEditUrl(recipe.id) }
           className="primary-button"
         >
           Bearbeiten
         </Link>
         <Link
-          to="/"
+          to={getRecipeListUrl()}
           className="default-button"
         >
           Zurueck

frontend/src/components/recipes/RecipeEditPage.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
 import type { Recipe } from "../../types/recipe"
 import  RecipeEditor  from "./RecipeEditor"
 import { fetchRecipe, createRecipe, updateRecipe } from "../../api/recipePoint"
+import { getRecipeDetailUrl, getRecipeListUrl, getRootUrl } from "../../routes"
 
 export default function RecipeEditPage() {
     // Extract recipe ID from route params
@@ -62,10 +63,10 @@ export default function RecipeEditPage() {
  const navigateBack = () => {
     if(recipe && recipe.id){
       console.log("navigating to recipe with id", recipe.id)
-      navigate("/recipe/" + recipe.id) // go back to detail view
+      navigate(getRecipeDetailUrl(recipe.id)) // go back to detail view
     } else {
       console.log("navigating back to list as no recipe was selected")
-      navigate("/") // no recipe -> go back to list
+      navigate(getRecipeListUrl()) // no recipe -> go back to list
     }
  }
  // error handling -> if there is no recipe, we cannot open edit view

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,40 +11,54 @@ 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()
+    }, [])
   
-  if(!recipeList) { return <div>Unable to load recipes1</div>}
+  const handleAdd = () => {
+    navigate(getRecipeAddUrl())
+  }
+  if(!recipeList) { return <div>Unable to load recipes!</div>}
   return (
     /*Contaier spanning entire screen used to center content horizontally */
     <div className="w-screen min-h-screen flex justify-center">
       {/* Container defining the maximum width of the content */}
       <div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
         {/* Header - remains in position when scrolling */}
-        <div className="sticky bg-gray-100 top-0 left-0 right-0 mb-4">
+        <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
           <h1 className="content-title text-blue-900">Recipes</h1>
-          <label>{recipeList.length} Recipes</label>
+          <div className="flex columns-4 content-stretch gap-2 items-center">
+            <label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
+            <input className="input-field"
+              placeholder="Search"
+            ></input>
+            <button className="primary-button"
+              onClick={handleAdd}
+            >
+              Add recipe
+            </button>
+          </div>
         </div>
         {/*Content - List of recipe cards */}
-        <div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
+        <div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
           {recipeList.map((recipe) => (
             <RecipeListItem 
               key={recipe.id}
               title = {recipe.title}
-              targetPath={'recipe/'+recipe.id}
+              targetPath={getRecipeDetailUrl(recipe.id)}
             />
           ))}
         </div>

frontend/src/routes.ts

@@ -0,0 +1,15 @@
+/**
+ * Routes for all pages
+ */
+// Route definitions using :id as placeholder for the id
+export function getRootUrlDefinition() : string { return getRootUrl()}
+export function getRecipeDetailsUrlDefinition() : string {return getRecipeDetailUrl(":id")}
+export function getRecipeEditUrlDefinition() : string {return getRecipeEditUrl(":id")}
+export function getRecipeAddUrlDefinition() : string {return getRecipeAddUrl()}
+
+// URLs including id
+export function getRootUrl () : string { return "/"}
+export function getRecipeListUrl() : string {return getRootUrl()}
+export function getRecipeDetailUrl(id: string) : string {return "/recipe/" + id}
+export function getRecipeEditUrl(id: string) : string {return "/recipe/" + id + "/edit"}
+export function getRecipeAddUrl() : string {return "/new-recipe"}