48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { getRecipeIngredients } from "../services/frontendApi.js";
|
|
import { useState, useEffect } from "react";
|
|
import { type Ingredient } from "../types/Recipe.ts"
|
|
|
|
function RecipeIngredients() {
|
|
|
|
const [recipeIngredients, setRecipeIngredients] = useState<Ingredient[]>([]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadRecipeIngredients = async () => {
|
|
try {
|
|
const recipeIngredients = await getRecipeIngredients();
|
|
setRecipeIngredients(recipeIngredients);
|
|
console.log(recipeIngredients)
|
|
} catch (err) {
|
|
console.log(err);
|
|
setError("Failed to load recipe ingredients...");
|
|
console.log(error)
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
loadRecipeIngredients();
|
|
}, []);
|
|
console.log(recipeIngredients)
|
|
return (
|
|
// should this be a string[]? only if we are only returning raw. otherwise i will need to type and return the ingredient object. This template shoudl work for steps though, so maybe setting that up is a good first step
|
|
<div className='page-outer'>
|
|
{loading ? (
|
|
<div className="loading">Loading...</div>
|
|
) : (
|
|
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
|
|
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
|
{recipeIngredients.map(ing => (
|
|
<li key={ing.id}>
|
|
{ing.raw}
|
|
</li>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
}
|
|
export default RecipeIngredients
|