40 lines
1 KiB
TypeScript
40 lines
1 KiB
TypeScript
|
import { addRecipe } from "../services/backend.js";
|
||
|
|
|
||
|
|
function AddRecipe() {
|
||
|
|
const addRecipeForm = async (event: React.FormEvent) => {
|
||
|
|
event.preventDefault();
|
||
|
|
const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
|
||
|
|
const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;
|
||
|
|
|
||
|
|
if (nameElement && cuisineElement) {
|
||
|
|
|
||
|
|
const name = nameElement.value;
|
||
|
|
const cuisine = cuisineElement.value;
|
||
|
|
await addRecipe(name, cuisine);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div className="add-recipe-outer">
|
||
|
|
<form onSubmit={addRecipeForm} className="add-recipe-form">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="name"
|
||
|
|
className="ar-name"
|
||
|
|
id="ar-name"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="cuisine"
|
||
|
|
className="ar-cusine"
|
||
|
|
id="ar-cuisine"
|
||
|
|
/>
|
||
|
|
<button type="submit" className="ar-button">
|
||
|
|
submit
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
export default AddRecipe
|