Boa noite.
Adicionei a possibilidade de apagar os vídeos, aparentemente está tudo funcionando normalmente, mas a página segue dando 'refresh' toda vez que clico para apagar, mesmo tendo a função evento.preventDefault();
presente no código.
Gostaria de saber como evitar esse comportamento.
Segue código: No script 'conectaAPI.js'
async function listaVideos()
{
const conexao = await fetch('http://localhost:3000/videos');
const conexaoConvertida = await conexao.json();
return conexaoConvertida;
}
async function criaVideos(titulo, descricao, url, imagem, id)
{
const conexao = await fetch('http://localhost:3000/videos', {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({
titulo: titulo,
descricao: `${descricao} visualizações`,
url: url,
imagem: imagem,
id: id /*adicionei o ID pois vou precisar desse retorno*/
})
});
const conexaoConvertida = await conexao.json();
return conexaoConvertida;
}
/*Função criada para apagar os vídeos da base de dados (method: DELETE)*/
async function deletaVideos(id)
{
const conexao = await fetch(`http://localhost:3000/videos/${id}`, {
method: 'DELETE',
});
const conexaoConvertida = await conexao.json();
return conexaoConvertida;
}
export const conectaApi = {
listaVideos,
criaVideos,
deletaVideos
}
No script 'listarVideos.js' -Tive que alterar a lógica para utilizar o id
import {conectaApi} from "./api.js";
import {botaoDeleta} from "./apagarVideo.js"; /*acrescentei esse import para puxar a função de outro script*/
listaVideos();
const lista = document.querySelector('[data-lista]');
function constroiCard(titulo, url, imagem, descricao, id)
{
const video = document.createElement('li');
video.className = "videos__item";
video.setAttribute("data-id", id); /*Adicionado o ID (era mais pra conferência, mas preferi deixar)*/
video.setAttribute("label", titulo); /*Adicionado, mas é mais para uma alteração que queria testar no CSS*/
video.setAttribute("title", titulo); /*Adicionado, mas é mais para uma alteração que queria testar no CSS*/
video.innerHTML = `<iframe width="100%" height="72%" src="${url}"
title = "${titulo}" frameborder = "0"
allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen ></iframe >
<div class="descricao-video">
<img src="${imagem}" alt="Logo Alura">
<h3>${titulo}</h3><span>...</span>
<p>${descricao}</p>
</div>`;
video.appendChild(botaoDeleta(id)); /*Chamandoafunção que cria o botão e tornando o botão filho do vídeo*/
return video;
}
async function listaVideos()
{
const listaApi = await conectaApi.listaVideos();
listaApi.forEach(element =>
{
lista.appendChild(constroiCard(element.titulo, element.url, element.imagem, element.descricao, element.id)); /*acrescentando o ID também*/
});
}
No script 'criaVideos.js'
import {conectaApi} from "./api.js"
const form = document.querySelector('[data-form]');
const itens = document.querySelectorAll('[data-lista] li')
const itensLista = Array.from(itens);
async function criaVideo(evento)
{
evento.preventDefault();
const url = document.querySelector('[data-url]').value;
const titulo = document.querySelector('[data-titulo]').value;
const imagem = document.querySelector('[data-imagem]').value;
const descricao = Math.floor(Math.random() * 10).toString();
await conectaApi.criaVideos(titulo, descricao, url, imagem, retornaID()); /*adicionei a função que retorna o ID dos vídeos*/
window.location.href = "../pages/envio-concluido.html";
}
form.addEventListener("submit", evento =>
{
criaVideo(evento);
});
/*Função que retorna o ID, fiz uma lógica que vai considerar sempre o maior ID, e para os novos vídeos ele vai acrescentar 1 nesse maior ID e alterar novamente a variável para ID+1, impedindo que em algum momento o ID se repita (aparentemente tudo ok)*/
function retornaID()
{
const valorInicial = 0;
let maxID = itensLista.reduce((acumlulador, valorAtual) => acumlulador + valorAtual, valorInicial);
return maxID++;
}