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