araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

Smaller refactorings, e.g., margins for title

Browse source
This commit is contained in:
araemer 2025-10-21 07:03:56 +02:00
parent ef8388be6d
commit e6ea18bef8
1 changed files with 138 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/components/recipes/RecipeDetailPage.tsx
View file

@ -1,10 +1,10 @@
import { useParams } from "react-router-dom"
import type { RecipeModel } from "../../models/RecipeModel"
import { useEffect, useState } from "react"
import { fetchRecipe } from "../../api/points/RecipePoint"
import { getRecipeEditUrl, getRecipeListUrl } from "../../routes"
import {useParams} from "react-router-dom"
import type {RecipeModel} from "../../models/RecipeModel"
import {useEffect, useState} from "react"
import {fetchRecipe} from "../../api/points/RecipePoint"
import {getRecipeEditUrl, getRecipeListUrl} from "../../routes"
import ButtonLink from "../basics/ButtonLink"
import { mapRecipeDtoToModel } from "../../mappers/RecipeMapper"
import {mapRecipeDtoToModel} from "../../mappers/RecipeMapper"
/**
@ -13,7 +13,7 @@ import { mapRecipeDtoToModel } from "../../mappers/RecipeMapper"
*/
export default function RecipeDetailPage() {
// Extract recipe ID from route params
const { id } = useParams<{ id: string }>()
const {id} = useParams<{ id: string }>()
// the recipe loaded from the backend, don't change this! it's required for scaling
const [recipe, setRecipe] = useState<RecipeModel | null>(null)
// Working copy for re-calculating ingredients
@ -22,7 +22,6 @@ export default function RecipeDetailPage() {
useEffect(() => {
const loadRecipe = async () => {
if (id) {
try {
// Fetch recipe data when editing an existing one
console.log("loading recipe with id", id)
const data = await fetchRecipe(id)
@ -30,9 +29,6 @@ export default function RecipeDetailPage() {
throw new Error("Id mismatch when loading recipes: " + id + " requested and " + data.id + " received!");
}
setRecipe(mapRecipeDtoToModel(data))
} catch (err) {
console.error(err)
}
}
}
@ -81,10 +77,11 @@ export default function RecipeDetailPage() {
{/* Container defining the maximum width of the content */}
<div className="content-container">
{/* Header - remains in position when scrolling */}
<div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
<h1 className="content-title">{recipeWorkingCopy.title}</h1>
<div className="sticky bg-gray-100 top-0 left-0 right-0 pb-6 border-b-2 border-gray-300">
<h1 className="content-title mb-0">{recipeWorkingCopy.title}</h1>
</div>
{/* Content */}
<div className="p-6 max-w-2xl mx-auto">
{/* Recipe image */}
{recipe.imageUrl && (