Merge pull request #47 from ICEI-PUC-Minas-PPLCC-TI/forum

Adicionando opção de excluir comentario
ICEI-PUC-Minas-PPLCC-TI · Dec 2, 2023 · 377738e · 377738e
2 parents 70ac6ec + a902c66
commit 377738e
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 4 deletions.
diff --git a/src/forum/assets/css/post.css b/src/forum/assets/css/post.css
@@ -73,3 +73,29 @@ section.conteudo {
 section.comentarios {
   margin: 1em 0;
 }
+
+ul.comentarios li {
+  margin-top: 1em;
+  font-size: 1.2em;
+}
+
+ul.comentarios .handle-item {
+  display: inline;
+	vertical-align: middle;
+  margin: 0 1em;
+}
+
+ul.comentarios .handle-item button {
+  padding: 0;
+	border: none;
+	background: none;
+	font-size: 1em;
+}
+
+ul.comentarios .handle-item button:hover {
+  cursor: pointer;
+}
+
+ul.comentarios .handle-item button.delete {
+	color: var(--red);
+}
diff --git a/src/forum/assets/js/index.js b/src/forum/assets/js/index.js
@@ -3,7 +3,6 @@ let postsList;
 const form = document.querySelector('#modal form');
 
 window.addEventListener('load', showPosts, false);
-window.onbeforeunload = () => showPosts();
 document.querySelector('#add-post').addEventListener('click', addPost, false);
 
 // READ
@@ -32,7 +31,7 @@ function generateHTML(post) {
 
       <div class="reactions">
         <span><i class="far fa-comment-alt"></i> ${comentarios.length}</span>
-        <span><i class="${post.usuariosCurtidas.includes(user.id) ? 'fas' : 'far'} fa-thumbs-up"></i> ${curtidas}</span>
+        <span><i class="${user && post.usuariosCurtidas.includes(user.id) ? 'fas' : 'far'} fa-thumbs-up"></i> ${curtidas}</span>
       </div>
 
       <p class="categoria">${categoria}</p>
@@ -56,6 +55,8 @@ async function showPosts() {
     document.querySelectorAll('.delete').forEach(button => {
       button.addEventListener('click', deletePost, false);
     });
+
+    order();
   }
   catch (error) {
     console.error('Falha ao exibir os posts:', error);

diff --git a/src/forum/assets/js/posts.js b/src/forum/assets/js/posts.js
@@ -15,13 +15,24 @@ async function showPost() {
     await loadPost();
 
     const comentariosHTML = post.comentarios.map(({ id, usuario, autor, comentario }) => `
-      <li id="${id}-${usuario.slice(0, 8)}">${autor} - ${comentario}</li>
+      <li id="${id}">
+        ${autor} - ${comentario}
+        ${isLogged() &&
+          (JSON.parse(sessionStorage.getItem('user')).id == usuario ||
+           JSON.parse(sessionStorage.getItem('user')).id == post.usuario)? `
+          <div class="handle-item">
+            <span>
+              <button value="${id}" class="delete"><i class="fas fa-trash-alt"></i></button>
+            </span>
+          </div>` :
+        '' }
+      </li>
     `).join('');
 
 		document.querySelector('.titulo').innerHTML = post.titulo;
 		document.querySelector('.categoria').innerHTML = post.categoria;
 
-    if (post.usuariosCurtidas.includes(user.id)) {
+    if (user && post.usuariosCurtidas.includes(user.id)) {
       document.querySelector('#curtir i').classList.replace('far', 'fas');
     } else {
       document.querySelector('#curtir i').classList.replace('fas', 'far');
@@ -34,6 +45,11 @@ async function showPost() {
 		document.querySelector('.conteudo').innerHTML = `<p>${post.conteudo}</p>`;
 
 		document.querySelector('.comentarios').innerHTML = `${comentariosHTML}`;
+
+    // Event listeners
+    document.querySelectorAll('.delete').forEach(button => {
+      button.addEventListener('click', deleteComment, false);
+    });
   } catch (error) {
     console.error('Falha ao carregar e exibir os posts:', error);
   }
@@ -42,6 +58,12 @@ async function showPost() {
 async function addComentario(event) {
   event.preventDefault();
 
+  if (!isLogged())
+  {
+    alert('Você precisa estar conectado para comentar em um post!');
+    window.location.href = '../login.html';
+  }
+
   await loadPost();
 
   const novoComentario = {
@@ -65,9 +87,45 @@ async function addComentario(event) {
     });
 }
 
+async function deleteComment() {
+  const id = this.value;
+  const comentario = post.comentarios.find(comentario => comentario.id == id);
+
+  const confirmDelete = window.confirm(`Você realmente quer excluir o comentário: "${comentario.comentario}"?`);
+  if (confirmDelete) {
+    try {
+      commentList = post.comentarios.filter(comentario => comentario.id != id);
+
+      const response = await fetch(`${apiURL}/posts/${post.id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ comentarios: commentList })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      showPost();
+    }
+    catch (error) {
+      console.error('Falha ao deletar o comentário:', error);
+    }
+  }
+}
+
 async function curtir() {
   await loadPost();
 
+  if (!isLogged())
+  {
+    alert('Você precisa estar conectado para curtir um post!');
+    window.location.href = '../login.html';
+  }
+
+
   const usuariosCurtidas = post.usuariosCurtidas;
 
   if (!usuariosCurtidas.includes(user.id)) {