Liste d'amis de l'administrateur

Bonjour à tous

Dans le navigateur localhost:3000/Profil.html j’ai un petit souci quand, dans la partie liste d’amis de l’administrateur, je clique sur « envoyer une invitation », « accepter l’invitation » et « supprimer », rien ne fonctionne. Pouvez-vous m’aider SVP ? Merci à tous : Voici mon html

<!--Liste d'amis de l'administrateur-->
    <div class="container mt-5">
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Liste des Amis de l'administrateur</h5>
              <div id="friendsList" class="row"></div>
            </div>
            <!--Bouton pour supprimer un ami de sa liste d'amis-->
            <div class="col-md-4">
              <div class="card mb-4">
                <img
                  src="assets/Edouard.png"
                  class="card-img-top"
                  alt="Photo de profil"
                />

                <div class="card-body">
                  <h5 class="card-title">
                    <a
                      href="#"
                      class="friend-link"
                      data-friend-id="ID_DU_MEMBRE"
                      >Pseudonyme</a
                    >
                  </h5>
                  <p class="card-text">Nom et Prénom</p>
                  <button
                    class="btn btn-primary btn-sm sendFriendRequestBtn"
                    data-friend-id="ID_DU_MEMBRE"
                  >
                    Envoyer une invitation
                  </button>
                  <!--Acceptation de l'ami à la liste d'amis de l'administrateur -->
                  <button
                    class="btn btn-success btn-sm acceptFriendRequestBtn"
                    data-friend-id="ID_DU_MEMBRE"
                  >
                    Accepter l'invitation
                  </button>

                  <button
                    class="btn btn-danger btn-sm deleteFriendBtn"
                    data-friend-id="ID_DU_MEMBRE"
                  >
                    Supprimer
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Confirmation du message-->
      <div class="container mt-3">
        <div
          class="alert alert-success d-none"
          id="friendRequestSuccessmessage"
        >
          Demande d'ami envoyée réussie!
        </div>
        <!--Acceptation de l'ami-->
        <div
          class="alert alert-success d-none"
          id="friendRequestAcceptedMessage"
        >
          L'ami a été accepté!
        </div>
      </div>
    </div>

Et Javascript

// Fonction pour chargement et affichage de la liste d'amis de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
const friendsList = document.getElementById("friendsList");
// Fonction pour chargement et affichage des demandes d'amis
const friendRequestsList = document.getElementById("friendRequestsList");

async function loadFriends() {
try {
const response = await fetch("http://localhost:3000/api/friends", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
console.warn("Problème pour obtenir la liste des amis");
alert(
"Problème pour obtenir la liste d'amis. Veuillez réessayer plus tard "
);
return;
}
const data = await response.json();
friendsList.innerHTML = "";
friendRequestsList.innerHTML = "";

if (Array.isArray(data.friends)) {
data.friends.forEach((friend) => {
const friendItem = document.createElement("div");
friendItem.classList.add("col-md-4");
friendItem.innerHTML = \\`<div class="card mb-4"><img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || "assets/Edouard.png"}"><img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || "assets/Rose.png"}"><div class="card-body"><h5 class="card-title">${friend.username}</h5><p class="card-text">${friend.fullName}</p>${friend.status === "confirmé"? \<button class="btn btn-danger btn-sm deleteFriendBtn » data-friend-id="${friend.\_id}">Supprimer</button>' : '<button class="btn btn-primary btn-sm acceptFriendRequestBtn » data-friend-id="${friend.\_id}">Accepter l’invitation</button><button class="btn btn-primary btn-sm ignoreFriendRequestBtn » data-friend-id="${friend.\_id}">Ignorer l’invitation</button>'}</div></div>' ; if (friend.status === « confirmé ») {friendsList.appendChild(friendItem) ;} else {friendRequestsList.appendChild(friendItem) ;}}) ; `

// Gestionnaire d'événements pour les boutons de suppression de la liste d'amis de l'administrateur
document.querySelectorAll(".deleteFriendBtn").forEach((button) => {
button.addEventListener("click", async function () {
const friendId = this.getAttribute("data-friend-id");
if (confirm("Etes vous certain de supprimer cet ami?")) {
try {
const response = await fetch(
\http://localhost:3000/api/friends/${friendId}',{method : « DELETE »,headers : {"Content-Type » : « application/json »,},}) ; const data = attendre response.json() ; if (response.ok) {// Message de confirmationconst successMessage = document.getElementById(« friendRemovedMessage ») ; successMessage.classList.remove(« d-none ») ; setTimeout(() => {successMessage.classList.add(« d-none ») ;}, 3000) ; alert(« Ami supprimé avec succès ») ; loadFriends() ;} else {alert(« Erreur lors de la suppression de l’ami : " + data.message) ;}} catch (error) {console.error(« Erreur lors de la suppression de l’ami : « ,error) ; alert(« Erreur lors de la suppression de l’ami : " + error.message) ;}}}) ;}) ;} else {alert(« Erreur lors de la récupération des amis : " + data.message) ;}} catch (error) {console.error(« Erreur lors de la récupération des amis : », error) ; alert(« Erreur lors de la récupération des amis : " + error.message) ;}}`

loadFriends();
});