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

renamed models, added mapper for recipes

Browse source
This commit is contained in:
Anika Raemer 2025-10-07 20:53:31 +02:00
parent 7a6f5b5bcd
commit 8027fce80d
21 changed files with 164 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,9 @@
import { useEffect, useState } from "react"
import RecipeListItem from "./RecipeListItem"
import type { Recipe } from "../../types/recipe"
import type { RecipeModel } from "../../models/RecipeModel"
import { fetchRecipeList } from "../../api/points/CompactRecipePoint"
import { useNavigate } from "react-router-dom"
import { getRecipeAddUrl, getRecipeDetailUrl } from "../../routes"
import { getRecipeAddUrl, getRecipeDetailUrl, getRecipeListUrl } from "../../routes"
import RecipeListToolbar from "./RecipeListToolbar"
/**
@ -13,7 +13,7 @@ import RecipeListToolbar from "./RecipeListToolbar"
export default function RecipeListPage() {
const navigate = useNavigate()
const [recipeList, setRecipeList] = useState<Recipe[]|null>(null)
const [recipeList, setRecipeList] = useState<RecipeModel[]|null>(null)
const [searchString, setSearchString] = useState<string>("")
// load recipes once on render and whenever search string changes
// @todo add delay. Only reload list if the search string hasn't changed for ~200 ms
@ -23,6 +23,7 @@ export default function RecipeListPage() {
try {
// Fetch recipe list
const data = await fetchRecipeList(searchString)
// @todo add and use compact recipe mapper
setRecipeList(data)
} catch (err) {
console.error(err)
@ -57,7 +58,7 @@ export default function RecipeListPage() {
<RecipeListItem
key={recipe.id}
title={recipe.title}
targetPath={getRecipeDetailUrl(recipe.id)}
targetPath={recipe.id !== undefined ? getRecipeDetailUrl(recipe.id) : getRecipeListUrl()} // @todo proper error handling
/>
))}
</div>