Auteur : Bilal Zouine

Description : Cet code gère l'ajout de films et l'affichage d'une liste de films

Fonctionnalités :

• Ajouter un film avec des informations (titre, durée, genre).
• Valider que tous les champs du formulaire sont remplis avant l'ajout.
• Afficher une liste des films ajoutés sous forme de tableau.
• Gérer un identifiant unique pour chaque film ajouté.
• Réinitialiser les champs du formulaire après l'ajout d'un film.

Code :

             
                

import { useState } from "react"

// Fonction qui gère l'ajout de films et l'affichage d'une liste de films
export default function FilmManager() {
    // Déclaration de l'état pour stocker la liste des films
    const [listeFilms, setListeFilms] = useState([])

    // Déclaration de l'état pour stocker les informations d'un film
    const [film, setFilm] = useState({
        idfilm: 1,
        titre: '',
        duree: '',
        genre: ''
    })

    // Fonction pour récupérer les informations saisies par l'utilisateur pour un film
    const getFilmInfo = (event) => {
        const { value, name } = event.target
        setFilm(prevFilm => ({
            ...prevFilm, [name]: value
        }))
        console.log(film);
    }

    // Fonction pour ajouter un film à la liste des films
    const ajouterFilm = () => {
        if (film.titre !== "" && film.duree !== 0 && film.genre) {
            setListeFilms(prevListFilm => (
                [...prevListFilm, film]
            ))

            // Réinitialiser les champs du film après l'ajout
            setFilm(prevFilm => ({
                idfilm: film.idfilm + 1,
                titre: '',
                duree: '',
                genre: ''
            }))
        } else {
            alert('Tous les champs sont obligatoires')
        }
    }

    return (
        <div className="container mt-5 text-warning">
            <fieldset className="w-75 mx-auto mb-3">
                <legend className="text-center">Ajouter un film</legend>

                {/* Formulaire pour saisir les informations d'un film */}
                <form>
                    <div className="form-group">
                        <label>Titre</label>
                        <input type="text" className="form-control" name="titre" onChange={getFilmInfo} value={film.titre} />
                    </div>
                    <div className="form-group">
                        <label>Durée</label>
                        <input type="number" className="form-control" name="duree" onChange={getFilmInfo} value={film.duree} />
                    </div>
                    <div className="form-group">
                        <label>Genre</label>
                        <input type="text" className="form-control" name="genre" onChange={getFilmInfo} value={film.genre} />
                    </div>
                    <div className="form-group">
                        <input type="button" value="Ajouter" className="btn btn-info fw-bold d-flex mx-auto bt-sm mt-3" onClick={ajouterFilm} />
                    </div>
                </form>
            </fieldset>

            {/* Affichage de la liste des films ajoutés */}
            <h3 className="text-center text-white fw-bold">Liste des films</h3>
            <table className="table table-bordered table-sm w-75 mx-auto ">
                <thead className="bg-info text-white text-center">
                    <tr>
                        <th>Id</th>
                        <th>Titre</th>
                        <th>Genre</th>
                        <th>Durée</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        listeFilms.map((f) => {
                            return (
                                <tr key={f.idfilm}>
                                    <td>{f.idfilm}</td>
                                    <td>{f.titre}</td>
                                    <td>{f.genre}</td>
                                    <td>{f.duree}</td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        </div>
    )
}