Liste d'amis de l'administrateur

Il semble qu'il y a plusieurs petits problèmes dans votre code, principalement dans la syntaxe de vos balises HTML et dans la gestion des événements JavaScript. Voici quelques points à corriger et à vérifier :

1. Erreurs de syntaxe dans les chaînes de caractères (backticks et guillemets)

Dans votre code, vous utilisez des guillemets doubles (") dans des endroits où vous avez des backticks (`). Cela perturbe la création de la chaîne HTML pour les éléments dynamiques. Vous devez remplacer certains guillemets par des backticks pour éviter les erreurs de syntaxe.

2. Problème avec la gestion des événements des boutons (classes incorrectes dans querySelectorAll)

La sélection des éléments avec document.querySelectorAll(".deleteFriendBtn") peut échouer si vous ne mettez pas à jour dynamiquement la liste des boutons après chaque chargement des amis. Vous devez vous assurer que vous attachez les gestionnaires d'événements après que la liste des amis a été chargée.

3. Problème d'URL d'API (mauvais format)

L'URL de votre API contient des erreurs de syntaxe avec des apostrophes ('). Assurez-vous que les chaînes de caractères sont correctement formatées.

Je vais corriger ces problèmes dans votre code HTML et JavaScript.

Code corrigé :

HTML (sans changements majeurs sauf quelques petites modifications pour la clarté)

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>
      </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>
  <div class="alert alert-success d-none" id="friendRequestAcceptedMessage">
    L'ami a été accepté!
  </div>
</div>

JavaScript (corrigé)

// Fonction pour chargement et affichage de la liste d'amis de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
  const friendsList = document.getElementById("friendsList");
  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'}">
              <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);
          }
        });
      }
    } 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);
    }
  }

  // Gestionnaire d'événements pour les boutons
  function attachEventListeners() {
    // Suppression de l'ami
    document.querySelectorAll(".deleteFriendBtn").forEach((button) => {
      button.addEventListener("click", async function () {
        const friendId = this.getAttribute("data-friend-id");
        if (confirm("Êtes-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 = await response.json();
            if (response.ok) {
              const successMessage = document.getElementById("friendRemovedMessage");
              successMessage.classList.remove("d-none");
              setTimeout(() => {
                successMessage.classList.add("d-none");
              }, 3000);
              alert("Ami supprimé avec succès");
              loadFriends(); // Recharger la liste des amis après suppression
            } 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);
          }
        }
      });
    });

    // Ajout d'autres gestionnaires pour accepter ou ignorer les invitations si nécessaire.
    // Pour accepter l'invitation
    document.querySelectorAll(".acceptFriendRequestBtn").forEach((button) => {
      button.addEventListener("click", async function () {
        const friendId = this.getAttribute("data-friend-id");
        try {
          const response = await fetch(`http://localhost:3000/api/friends/accept/${friendId}`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
          });
          const data = await response.json();
          if (response.ok) {
            alert("Invitation acceptée !");
            loadFriends(); // Recharger les amis
          } else {
            alert("Erreur lors de l'acceptation de l'invitation : " + data.message);
          }
        } catch (error) {
          console.error("Erreur lors de l'acceptation de l'invitation : ", error);
          alert("Erreur lors de l'acceptation de l'invitation : " + error.message);
        }
      });
    });
  }

  loadFriends().then(attachEventListeners); // Charger les amis et attacher les événements
});

Merci beaucoup reelsergealain

je vais corriger ça