gestion des recettes et des calories

import React, { useState } from 'react';
import RecipeForm from './RecipeForm';
import RecipeList from './RecipeList';
import { v4 as uuidv4 } from 'uuid';

const RecipeTracker = () => {
  // État pour stocker les recettes
  const [recipes, setRecipes] = useState([]);
  const [filter, setFilter] = useState('Tous');

  // Fonction pour ajouter une nouvelle recette
  const addRecipe = (recipe) => {
    setRecipes([...recipes, { ...recipe, id: uuidv4() }]);
  };

  // Fonction pour supprimer une recette
  const deleteRecipe = (id) => {
    setRecipes(recipes.filter((recipe) => recipe.id !== id));
  };

  // Fonction pour modifier une recette
  const editRecipe = (id, updatedRecipe) => {
    setRecipes(
      recipes.map((recipe) =>
        recipe.id === id ? { ...recipe, ...updatedRecipe } : recipe
      )
    );
  };

  // Fonction pour calculer les calories totales
  const calculateTotalCalories = () => {
    return recipes.reduce((total, recipe) => total + recipe.calories, 0);
  };

  // Filtrer les recettes en fonction du type de plat
  const filteredRecipes = filter === 'Tous' 
    ? recipes 
    : recipes.filter(recipe => recipe.type === filter);

  return (
    <div>
      <h1>Gestion des Recettes et des Calories</h1>
      <RecipeForm addRecipe={addRecipe} />
      <div>
        <label>Filtrer par type de plat: </label>
        <select onChange={(e) => setFilter(e.target.value)}>
          <option value="Tous">Tous</option>
          <option value="Entrée">Entrée</option>
          <option value="Plat principal">Plat principal</option>
          <option value="Dessert">Dessert</option>
        </select>
      </div>
      <h2>Calories totales: {calculateTotalCalories()}</h2>
      <RecipeList
        recipes={filteredRecipes}
        deleteRecipe={deleteRecipe}
        editRecipe={editRecipe}
      />
    </div>
  );
};

export default RecipeTracker;

import React, { useState } from 'react';

const RecipeForm = ({ addRecipe }) => {
  // États pour les champs du formulaire
  const [title, setTitle] = useState('');
  const [ingredients, setIngredients] = useState('');
  const [calories, setCalories] = useState('');
  const [type, setType] = useState('Entrée');

  // Gestion de la soumission du formulaire
  const handleSubmit = (e) => {
    e.preventDefault();
    addRecipe({ title, ingredients, calories: parseFloat(calories), type });
    setTitle('');
    setIngredients('');
    setCalories('');
    setType('Entrée');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Titre</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Ingrédients</label>
        <input
          type="text"
          value={ingredients}
          onChange={(e) => setIngredients(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Calories</label>
        <input
          type="number"
          value={calories}
          onChange={(e) => setCalories(e.target.value)}
          required
        />
      </div>
      <div>
        <label>Type de plat</label>
        <select value={type} onChange={(e) => setType(e.target.value)}>
          <option value="Entrée">Entrée</option>
          <option value="Plat principal">Plat principal</option>
          <option value="Dessert">Dessert</option>
        </select>
      </div>
      <button type="submit">Ajouter Recette</button>
    </form>
  );
};

export default RecipeForm;

import React from 'react';
import RecipeItem from './RecipeItem';

const RecipeList = ({ recipes, deleteRecipe, editRecipe }) => {
  return (
    <div>
      <h2>Liste des Recettes</h2>
      {recipes.map((recipe) => (
        <RecipeItem
          key={recipe.id}
          recipe={recipe}
          deleteRecipe={deleteRecipe}
          editRecipe={editRecipe}
        />
      ))}
    </div>
  );
};

export default RecipeList;

import React, { useState } from 'react';

const RecipeItem = ({ recipe, deleteRecipe, editRecipe }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [title, setTitle] = useState(recipe.title);
  const [ingredients, setIngredients] = useState(recipe.ingredients);
  const [calories, setCalories] = useState(recipe.calories);
  const [type, setType] = useState(recipe.type);

  const handleSave = () => {
    editRecipe(recipe.id, { title, ingredients, calories, type });
    setIsEditing(false);
  };

  return (
    <div>
      {isEditing ? (
        <div>
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
          <input
            type="text"
            value={ingredients}
            onChange={(e) => setIngredients(e.target.value)}
          />
          <input
            type="number"
            value={calories}
            onChange={(e) => setCalories(parseFloat(e.target.value))}
          />
          <select value={type} onChange={(e) => setType(e.target.value)}>
            <option value="Entrée">Entrée</option>
            <option value="Plat principal">Plat principal</option>
            <option value="Dessert">Dessert</option>
          </select>
          <button onClick={handleSave}>Enregistrer</button>
        </div>
      ) : (
        <span>
          {recipe.title}: {recipe.ingredients} ({recipe.calories} calories, {recipe.type})
        </span>
      )}
      <button onClick={() => setIsEditing(!isEditing)}>
        {isEditing ? 'Annuler' : 'Modifier'}
      </button>
      <button onClick={() => deleteRecipe(recipe.id)}>Supprimer</button>
    </div>
  );
};

export default RecipeItem;

import React from 'react';
import './App.css';
import RecipeTracker from './RecipeTracker';

function App() {
  return (
    <div className="App">
      <RecipeTracker />
    </div>
  );
}

export default App;

.App {
  text-align: center;
}

form {
  margin: 20px;
}

form div {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

h2 {
  margin-top: 20px;
}

input, select {
  margin-right: 10px;
}

div > span {
  display: inline-block;
  margin-right: 10px;
}

npm