Desafio 03: detectando alteração no repositories após delete()

[VictorPietro]

Summary

Não consigo detectar automaticamente, no frontend, uma deleção no backend, pra que os repositories sejam renderizados novamente.

Expected Behavior - Please describe the behavior you are expecting

Ao rodar yarn test, ambos os testes devem passar sem falhas.

Current Behavior - What is the current behavior?

Ao rodar yarn test, apenas o primeiro teste está passando (should be able to add new repository). O segundo teste (should be able to remove repository) falha.

Received:
      "<li>Desafio ReactJS<button>Remover</button></li>

Context - Please provide any relevant information about your setup

O repositório está sendo removido corretamente no backend com o NodeJS...

O problema é que no frontend com o ReactJS, no código que eu fiz, após uma deleção o array repositories é atualizado fazendo um novo get() e atualizando o array com um setProjects:

const [repositories, setRepositories] = useState([]);

async function handleRemoveRepository(id) {
    await api.delete(`/repositories/${id}`);

    api.get('/repositories').then(response => {
      setRepositories(response.data);
    });
 }

E como o teste faz a requisição delete() e já verifica se o <ul> está vazio ou não (ou seja, ele não passa pela mesma lógica implementada em minha deleção):

    apiMock.onDelete("repositories/123").reply(204);

    await actWait();

    fireEvent.click(getByText("Remover"));

    await actWait();

    expect(getByTestId("repository-list")).toBeEmpty();

Assim, eu não sei de que maneira seria possível que o frontend detectasse automaticamente que uma alteração no backend foi feita e renderizasse a aplicação novamente, sem precisar passar por essa lógica que eu implementei.

Meu useEffect() é esse:

useEffect(() => {
    api.get('/repositories').then(response => {
      setRepositories(response.data);
    });
  }, []);

Já tentei colocar um [projects] ali como segundo parâmetro (para que o useEffect sempre atualizasse após uma alteração no estado projects), mas o projects do frontend não alterou (foi apagado apenas no backend), e o yarn test trava e fica carregando para sempre.

[josepholiveira]

Faala @VictorPietro !

Entendi o problema e vou te explicar o porque isso ta acontecendo:

Como ainda estamos num projeto muito simples, e numa etapa inicial de aprendizado, o ideal é que você faça a remoção usando o próprio JavaScript e manipulando seu estado.

Quando você faz uma remoção de um item e depois busca todos os itens da sua api novamente, você pode interpretar nesse caso isso como uma chamada a API que talvez não fosse necessária, dada a simplicidade do projeto, e por isso não permitimos nos testes que fosse feito dessa maneira.

Claro que essa implementação pode ser válida em alguns casos, mas nesse projeto, como eu disse, já que é um projeto extremamente simples e o objetivo é aprender a lidar com a programação nos nossos primeiros passos, recomendo que você implemente essa remoção sem precisar buscar todos os itens novamente da sua API, mas sim apenas removendo o item do seu estado.

Lembrando também que o melhor lugar para se tirar dúvidas técnicas é o fórum dos alunos, então recomendo que mande sua dúvida lá das próximas vezes. 💜

Abraços!