76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { getRecipes, deleteRecipe, Recipe } from '@/api/recipe';
|
|
import { Link } from 'react-router-dom';
|
|
import axios from 'axios';
|
|
|
|
const RecipeList: React.FC = () => {
|
|
const [recipes, setRecipes] = useState<Recipe[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchRecipes = async () => {
|
|
try {
|
|
const data = await getRecipes();
|
|
setRecipes(data);
|
|
} catch (err) {
|
|
if (axios.isAxiosError(err) && err.response) {
|
|
setError(err.response.data.error || 'Erreur lors de la récupération des recettes');
|
|
} else {
|
|
setError('Erreur réseau lors de la récupération des recettes');
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchRecipes();
|
|
}, []);
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (window.confirm('Êtes-vous sûr de vouloir supprimer cette recette?')) {
|
|
try {
|
|
await deleteRecipe(id);
|
|
setRecipes(recipes.filter(recipe => recipe.id !== id));
|
|
} catch (err) {
|
|
if (axios.isAxiosError(err) && err.response) {
|
|
setError(err.response.data.error || 'Erreur lors de la suppression');
|
|
} else {
|
|
setError('Erreur réseau lors de la suppression');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
if (loading) return <div>Chargement des recettes...</div>;
|
|
if (error) return <div className="error-message">{error}</div>;
|
|
|
|
return (
|
|
<div className="recipe-list">
|
|
<h2>Mes recettes</h2>
|
|
|
|
{recipes.length === 0 ? (
|
|
<p>Vous n'avez pas encore de recettes. Créez-en une!</p>
|
|
) : (
|
|
<ul>
|
|
{recipes.map(recipe => (
|
|
<li key={recipe.id} className="recipe-item">
|
|
<h3>{recipe.title}</h3>
|
|
<p><strong>Ingrédients:</strong> {recipe.ingredients}</p>
|
|
<div className="recipe-actions">
|
|
<Link to={`/recipes/${recipe.id}`} className="btn">
|
|
Voir les détails
|
|
</Link>
|
|
<button onClick={() => handleDelete(recipe.id)} className="btn delete-btn">
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RecipeList;
|