diff --git a/src/forum/assets/css/post.css b/src/forum/assets/css/post.css index 04497e1..a1085c7 100644 --- 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 index da231ea..5eddadc 100644 --- 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) {
${categoria}
@@ -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 index 3854fd1..63e2b06 100644 --- 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 }) => ` -${post.conteudo}
`; 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)) {