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