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

move the recipe list's toolbar to a component of its own

Browse source
This commit is contained in:
Anika Raemer 2025-09-20 17:00:27 +02:00
parent 635bec7f64
commit 73b805546f
3 changed files with 42 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/recipes/RecipeEditor.tsx
View file

@ -94,7 +94,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
placeholder="1"
value={draft.servings.amount}
onChange={e => {
let tempServings = draft.servings
const tempServings = draft.servings
tempServings.amount = Number(e.target.value)
setDraft({...draft, servings: tempServings})
}}
@ -104,7 +104,7 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
placeholder="Persons"
value={draft.servings.unit}
onChange={e => {
let tempServings = draft.servings
const tempServings = draft.servings
tempServings.unit = e.target.value
setDraft({...draft, servings: tempServings})
}}

25
frontend/src/components/recipes/RecipeListPage.tsx
View file

@ -5,6 +5,7 @@ import { fetchRecipeList } from "../../api/recipePoint"
import { useNavigate } from "react-router-dom"
import { getRecipeAddUrl, getRecipeDetailUrl } from "../../routes"
import SearchField from "../basics/SearchField"
import RecipeListToolbar from "./RecipeListToolbar"
/**
* Displays a list of recipes in a sidebar layout.
@ -44,25 +45,11 @@ export default function RecipeListPage() {
{/* 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 text-blue-900">Recipes</h1>
<div className="flex flex-wrap items-center gap-2 w-full">
{/* Label: left-aligned on medium+ screens, full-width on small screens */}
<div className="order-2 md:order-1 w-full md:w-auto md:flex-1">
<label className="label">{recipeList.length} Recipes</label>
</div>
{/* Search + Add button container: right-aligned on medium+ screens */}
<div className="order-1 md:order-2 flex flex-1 md:flex-none justify-end gap-2 min-w-[160px]">
<div className="flex-1 md:flex-none md:max-w-[500px]">
<SearchField onSearchStringChanged={setSearchString} />
</div>
<button
className="primary-button flex-shrink-0"
onClick={handleAdd}
>
Add recipe
</button>
</div>
</div>
<RecipeListToolbar
onAddClicked={handleAdd}
onSearchStringChanged={setSearchString}
numberOfRecipes={recipeList.length}
/>
</div>
{/*Content - List of recipe cards */}
<div className="w-full pt-4">

34
frontend/src/components/recipes/RecipeListToolbar.tsx Normal file
View file

@ -0,0 +1,34 @@
import SearchField from "../basics/SearchField"
/**
* Toolbar for RecipeListPage containing searchfield, add recipe button and number of recipes
*/
type RecepeListToolbarProps = {
onSearchStringChanged: (searchString : string) => void
onAddClicked: () => void
numberOfRecipes : number
}
export default function RecipeListToolbar({onSearchStringChanged, onAddClicked, numberOfRecipes} : RecepeListToolbarProps){
return (
<div className="flex flex-wrap items-center gap-2 w-full">
{/* Label: left-aligned on medium+ screens, full-width on small screens */}
<div className="order-2 md:order-1 w-full md:w-auto md:flex-1">
<label className="label">{numberOfRecipes} Recipes</label>
</div>
{/* Search + Add button container: right-aligned on medium+ screens */}
<div className="order-1 md:order-2 flex flex-1 md:flex-none justify-end gap-2 min-w-[160px]">
<div className="flex-1 md:flex-none md:max-w-[500px]">
<SearchField onSearchStringChanged={onSearchStringChanged} />
</div>
<button
className="primary-button flex-shrink-0"
onClick={onAddClicked}
>
Add recipe
</button>
</div>
</div>
)
}