diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7a4e2b7..e52a9f3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,7 +2,6 @@ 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"
@@ -15,16 +14,13 @@ function App() {
{/* Home page: list of recipes */}
- } />
+ } />
{/* Detail page: shows one recipe */}
- } />
+ } />
{/* Edit page: form to edit a recipe */}
- } />
-
- {/* Add page: form to add a recipe */}
- } />
+ } />
)
diff --git a/frontend/src/components/recipes/RecipeDetailPage.tsx b/frontend/src/components/recipes/RecipeDetailPage.tsx
index 2bb952b..715b383 100644
--- a/frontend/src/components/recipes/RecipeDetailPage.tsx
+++ b/frontend/src/components/recipes/RecipeDetailPage.tsx
@@ -2,7 +2,6 @@ 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"
/**
@@ -124,13 +123,13 @@ export default function RecipeDetailPage() {
{/* Action buttons */}
Bearbeiten
Zurueck
diff --git a/frontend/src/components/recipes/RecipeEditPage.tsx b/frontend/src/components/recipes/RecipeEditPage.tsx
index f1022b4..624487d 100644
--- a/frontend/src/components/recipes/RecipeEditPage.tsx
+++ b/frontend/src/components/recipes/RecipeEditPage.tsx
@@ -3,7 +3,6 @@ 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
@@ -63,10 +62,10 @@ export default function RecipeEditPage() {
const navigateBack = () => {
if(recipe && recipe.id){
console.log("navigating to recipe with id", recipe.id)
- navigate(getRecipeDetailUrl(recipe.id)) // go back to detail view
+ navigate("/recipe/" + recipe.id) // go back to detail view
} else {
console.log("navigating back to list as no recipe was selected")
- navigate(getRecipeListUrl()) // no recipe -> go back to list
+ navigate("/") // no recipe -> go back to list
}
}
// error handling -> if there is no recipe, we cannot open edit view
diff --git a/frontend/src/components/recipes/RecipeListPage.tsx b/frontend/src/components/recipes/RecipeListPage.tsx
index 4ba39ab..327750e 100644
--- a/frontend/src/components/recipes/RecipeListPage.tsx
+++ b/frontend/src/components/recipes/RecipeListPage.tsx
@@ -2,8 +2,6 @@ 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.
@@ -11,54 +9,40 @@ import { getRecipeAddUrl, getRecipeAddUrlDefinition, getRecipeDetailUrl } from "
*/
export default function RecipeListPage() {
- const navigate = useNavigate()
- const [recipeList, setRecipeList] = useState
(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 [recipeList, setRecipeList] = useState(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 Unable to load recipes!
}
+ if(!recipeList) { return Unable to load recipes1
}
return (
/*Contaier spanning entire screen used to center content horizontally */
{/* Container defining the maximum width of the content */}
{/* Header - remains in position when scrolling */}
-
+
Recipes
-
-
-
-
-
+
{/*Content - List of recipe cards */}
-
+
{recipeList.map((recipe) => (
))}
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
deleted file mode 100644
index b53f7a8..0000000
--- a/frontend/src/routes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * 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"}
\ No newline at end of file