2
respostas

Apagar Vídeos

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.

Site com os botões para apagar

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++;
}
2 respostas

CONTINUAÇÃO:

No script "apagaVideo.js":

import {conectaApi} from './api.js' /*importando a conectaApi*/ 

export function botaoDeleta(id) /*exportando a função que cria o botão, para ser usada no script de 'listarVideos.js'*/
{
    const btnApagaVideo = document.createElement("button");
    btnApagaVideo.innerText = "Apagar Vídeo";
    btnApagaVideo.setAttribute("type", "button")
    btnApagaVideo.addEventListener("click", function (evento)
    {
        evento.preventDefault(); /*Esse é o preventDefault que não faz diferença, na verdade eu só tentei colocar ele pra ver se parava de resetar a página, pode ser que o problema não seja nem esse e eu não vi o problema real*/
        removeElemento(this.parentNode, id);
    });

    return btnApagaVideo;
}


/*Função que remove o vídeo da lista E chama a função que deleta ele dá base de dados*/
function removeElemento(element, id)
{
    element.remove();
    deletaVideo(id);
}

/*Função que deleta o vídeo da base de dados, passando o ID, que é único para cada vídeo*/
async function deletaVideo(id)
{
    await conectaApi.deletaVideos(id);
}

Olá Vinicius, tudo bem?

Peço desculpas pela demora em obter um retorno

Observei que você já concluiu o curso de "JavaScript: criando requisições" ,gostaria de saber se o problema que você mencionou foi resolvido durante esse tempo. Caso ainda esteja com dificuldades, peço que envie o link do seu projeto no GitHub ou um drive com todos os arquivos utilizados no projeto, para que eu possa simular o seu problema e te ajudar de forma mais assertiva.

Mas por hora Uma possível solução para esse problema é verificar se a função preventDefault() está sendo chamada corretamente no seu código. Além disso, pode ser que o evento esteja sendo propagado para outros elementos da página, o que pode estar causando o refresh.

Uma sugestão seria adicionar o método stopPropagation() ao evento, para evitar que ele seja propagado para outros elementos da página.

Veja como ficaria o código:

async function deletaVideos(id, evento)
{
    evento.preventDefault();
    evento.stopPropagation();

    const conexao = await fetch(`http://localhost:3000/videos/${id}`, {
        method: 'DELETE',
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

Estou à disposição para esclarecer quaisquer dúvidas que possam surgir durante seus estudos. Se precisar, fico no aguardo do retorno dos arquivos para dar continuidade ao processo de sanar o erro mencionado. Desejo a você bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!