75 lines
No EOL
2.5 KiB
TypeScript
75 lines
No EOL
2.5 KiB
TypeScript
import {useNavigate, useParams} from "react-router-dom"
|
|
import {useEffect, useState} from "react"
|
|
import type {RecipeModel} from "../../models/RecipeModel"
|
|
import {RecipeEditor} from "./RecipeEditor"
|
|
import {createOrUpdateRecipe, fetchRecipe} from "../../api/endpoints/RecipeRestResource.ts"
|
|
import {getRecipeDetailUrl, getRecipeListUrl} from "../../routes"
|
|
import {mapRecipeDtoToModel, mapRecipeModelToDto} from "../../mappers/RecipeMapper"
|
|
import type {RecipeDto} from "../../api/dtos/RecipeDto"
|
|
|
|
export default function RecipeEditPage() {
|
|
// Extract recipe ID from route params
|
|
const {id} = useParams<{ id: string }>()
|
|
const [recipe, setRecipe] = useState<RecipeModel | null>(null)
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(() => {
|
|
const loadRecipe = async () => {
|
|
if (id) {
|
|
try {
|
|
// Fetch recipe data when editing an existing one
|
|
const data: RecipeDto = await fetchRecipe(id);
|
|
setRecipe(mapRecipeDtoToModel(data));
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
} else {
|
|
// New recipe case
|
|
setRecipe({
|
|
id: "",
|
|
title: "",
|
|
ingredientGroupList: [],
|
|
instructionStepList: [],
|
|
servings: {
|
|
amount: 1,
|
|
unit: ""
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
loadRecipe()
|
|
}, [id])
|
|
|
|
const handleSave = async (updated: RecipeModel) => {
|
|
try {
|
|
const dto = mapRecipeModelToDto(updated);
|
|
await createOrUpdateRecipe(dto);
|
|
navigateBack();
|
|
} catch (err) {
|
|
console.error(err)
|
|
}
|
|
}
|
|
|
|
|
|
const handleCancel = () => {
|
|
console.log("Cancelling edit mode for", recipe ? recipe.id : "no recipe at all")
|
|
navigateBack();
|
|
}
|
|
|
|
const navigateBack = () => {
|
|
if (recipe && recipe.id) {
|
|
console.log("navigating to recipe with id", recipe.id)
|
|
navigate(getRecipeDetailUrl(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
|
|
}
|
|
}
|
|
// error handling -> if there is no recipe, we cannot open edit view
|
|
if (!recipe) {
|
|
return <div>Loading...</div>
|
|
}
|
|
|
|
return <RecipeEditor recipe={recipe} onSave={handleSave} onCancel={handleCancel}/>
|
|
} |