Good morning. Here is my code, I have been stuck for almost a week, I have tried several things, for the moment, I do not have the expected result, namely when adding or removing a project (work) the modification is displayed without the page reloading. For this I tried to put the list of projects retrieved via the API in localStorage then empty the gallery which contains the projects then display this gallery again. Thanks to anyone who helps me understand where the problem is coming from and how to fix it!
// Fonction pour créer un élément dans la galerie
const createGalleryItem = (work) => {
const figure = document.createElement("figure");
const img = document.createElement("img");
// Ajouter les données récupérées à la balise img
img.src = work.imageUrl;
img.alt = work.title;
figure.classList.add("itemGallery");
figure.appendChild(img);
// Création du bouton de suppression
const deleteButton = document.createElement("button");
deleteButton.type = "button"; //pour éviter la soumission du formulaire
deleteButton.classList.add("delete-button");
// Création du SVG trash
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("width", "9");
svg.setAttribute("height", "11");
svg.setAttribute("viewBox", "0 0 9 11");
svg.setAttribute("fill", "none");
// Création du chemin du SVG
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute(
"d",
"M2.71607 0.35558C2.82455 0.136607 3.04754 0 3.29063 0H5.70938C5.95246 0 6.17545 0.136607 6.28393 0.35558L6.42857 0.642857H8.35714C8.71272 0.642857 9 0.930134 9 1.28571C9 1.64129 8.71272 1.92857 8.35714 1.92857H0.642857C0.287277 1.92857 0 1.64129 0 1.28571C0 0.930134 0.287277 0.642857 0.642857 0.642857H2.57143L2.71607 0.35558ZM0.642857 2.57143H8.35714V9C8.35714 9.70915 7.78058 10.2857 7.07143 10.2857H1.92857C1.21942 10.2857 0.642857 9.70915 0.642857 9V2.57143ZM2.57143 3.85714C2.39464 3.85714 2.25 4.00179 2.25 4.17857V8.67857C2.25 8.85536 2.39464 9 2.57143 9C2.74821 9 2.89286 8.85536 2.89286 8.67857V4.17857C2.89286 4.00179 2.74821 3.85714 2.57143 3.85714ZM4.5 3.85714C4.32321 3.85714 4.17857 4.00179 4.17857 4.17857V8.67857C4.17857 8.85536 4.32321 9 4.5 9C4.67679 9 4.82143 8.85536 4.82143 8.67857V4.17857C4.82143 4.00179 4.67679 3.85714 4.5 3.85714ZM6.42857 3.85714C6.25179 3.85714 6.10714 4.00179 6.10714 4.17857V8.67857C6.10714 8.85536 6.25179 9 6.42857 9C6.60536 9 6.75 8.85536 6.75 8.67857V4.17857C6.75 4.00179 6.60536 3.85714 6.42857 3.85714Z"
);
path.setAttribute("fill", "white");
// Ajout du chemin au SVG
svg.appendChild(path);
// Ajout du SVG au bouton de suppression
deleteButton.appendChild(svg);
// Ajout du gestionnaire d'événement pour le bouton de suppression
deleteButton.addEventListener("click", async (event) => {
event.preventDefault();
if (confirm(`Êtes-vous sûr de vouloir supprimer "${work.title}" ?`)) {
try {
const response = await fetch(
`http://localhost:5678/api/works/${work.id}`,
{
method: "DELETE",
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
}
);
if (!response.ok) {
throw new Error(
`Erreur lors de la suppression : ${response.statusText}`
);
}
// Suppression de l'œuvre du localStorage
let works = JSON.parse(localStorage.getItem("works"));
works = works.filter((storedWork) => storedWork.id !== work.id);
localStorage.setItem("works", JSON.stringify(works));
// Mise à jour de la galerie
displayWorks(works);
// Suppression de l'élément du DOM
figure.remove();
} catch (error) {
console.error("Erreur lors de la suppression :", error);
}
}
});
// Ajout du bouton de suppression à l'élément figure
figure.appendChild(deleteButton);
return figure;
};
// Fonction pour afficher les œuvres dans la galerie
const displayWorks = (works) => {
galleryModal.innerHTML = ""; // Vide la galerie avant d'ajouter de nouveaux éléments
works.forEach((work) => {
const galleryItem = createGalleryItem(work);
galleryModal.appendChild(galleryItem);
});
};
// Fonction asynchrone pour initialiser la galerie
const initializeGalleryModal = async () => {
try {
works = await fetchWorks();
displayWorks(works);
} catch (error) {
console.error("Erreur lors de l'initialisation de la galerie :", error);
}
};
// Appeler la fonction d'initialisation de la galerie
document.addEventListener("DOMContentLoaded", initializeGalleryModal);
////////////////////////ENVOIE//////////////////////////////////////////////////
// Fonction asynchrone pour récupérer les œuvres depuis l'API dans la modal
const fetchWorks = async () => {
try {
const response = await fetch("http://localhost:5678/api/works");
if (!response.ok) {
throw new Error(
`Erreur de chargement des œuvres. Code HTTP : ${response.status}`
);
}
const data = await response.json();
// Stocker les œuvres récupérées dans le localStorage
localStorage.setItem("works", JSON.stringify(data));
return data;
} catch (error) {
console.error(
"Erreur lors de la récupération des données de l'API :",
error
);
throw error;
}
};
document.addEventListener("DOMContentLoaded", () => {
const addWorkForm = document.getElementById("addWorkForm");
if (addWorkForm) {
addWorkForm.addEventListener("submit", addWorkToGallery);
} else {
console.error("Le formulaire est introuvable dans le DOM.");
}
});
async function addWorkToGallery(event) {
event.preventDefault(); // Empêche le comportement par défaut du formulaire
// Récupération du token d'authentification (si nécessaire pour l'API)
const token = localStorage.getItem("token");
if (!token) {
console.error("Vous devez être connecté pour effectuer cette action.");
return;
}
// Récupération des éléments et des valeurs du formulaire
const titleInput = document.getElementById("title");
const categorySelect = document.getElementById("categorie");
const selectedImage = imageInput.files[0];
if (titleInput.value.trim() === "" || categorySelect.value.trim() === "") {
alert("Certains champs du formulaire ne sont pas remplis.");
return;
}
// Création de l'objet FormData pour contenir les champs du formulaire
const formData = new FormData();
formData.append("image", selectedImage);
formData.append("title", titleInput.value.trim());
formData.append("category", categorySelect.value);
try {
// Envoi de la requête avec le token dans l'entête Authorization
const response = await fetch("http://localhost:5678/api/works", {
method: "POST",
headers: {
Authorization: `Bearer ${token}`,
},
body: formData,
});
if (!response.ok) {
// Récupérer plus d'informations sur l'erreur
const errorData = await response.json();
throw new Error(`Erreur: ${response.statusText}` || errorData.message);
}
const newWork = await response.json();
// Récupérez les œuvres stockées précédemment du localStorage
let works = JSON.parse(localStorage.getItem("works")) || [];
// Ajoutez le nouvel ouvrage à la liste
works.push(newWork);
// Mettez à jour les œuvres dans le localStorage
localStorage.setItem("works", JSON.stringify(works));
// Mettez à jour la galerie avec le nouvel ouvrage ajouté
displayWorks(works);
} catch (error) {
console.error("Erreur lors de l'ajout de l'œuvre:", error);
}
}
// Associer le gestionnaire de soumission au formulaire
document.addEventListener("DOMContentLoaded", () => {
const addWorkForm = document.getElementById("addWorkForm");
if (addWorkForm) {
addWorkForm.addEventListener("submit", addWorkToGallery);
} else {
console.error("Le formulaire est introuvable dans le DOM.");
}
});
// Fonction asynchrone pour récupérer les œuvres depuis l'API et les stocker dans le localStorage
const fetchWorksAndUpdateLocalStorage = async () => {
try {
// Vérifie si les œuvres sont déjà stockées dans le localStorage
let works = localStorage.getItem("works");
// Si les œuvres ne sont pas dans le localStorage ou si le localStorage a été vidé, les récupérer à partir de l'API
if (!works) {
const response = await fetch("http://localhost:5678/api/works");
if (!response.ok) {
throw new Error(
`Erreur de chargement des œuvres. Code HTTP : ${response.status}`
);
}
works = await response.json();
// Stocke les œuvres récupérées dans le localStorage pour un accès rapide la prochaine fois
localStorage.setItem("works", JSON.stringify(works));
} else {
// Si les données sont déjà présentes dans le localStorage, les parser pour les utiliser
works = JSON.parse(works);
}
// Mettre à jour l'interface utilisateur avec les œuvres récupérées
displayWorks(works);
} catch (error) {
console.error(
"Erreur lors de la récupération des données de l'API :",
error
);
throw error;
}
};
// Sélectionne l'élément de la galerie
const galleryElement = document.getElementById("gallery");
// Vide la galerie avant de rajouter des éléments
galleryElement.innerHTML = "";
////////////////////////ENVOIE fin//////////////////////////////////
I want the page not to refresh when adding and deleting a project.
