2
respostas

[Projeto] Minha solução para manter o array

Oi pessoal, estava tentando fazer o desafio de uma maneira que fosse possível apagar o campo de busca e obter todos os resultados novamente.

Para isso fiz um pouco diferente da solução que está no curso. Ao invés de modificar o array e remover as fotos que não correspondem ao critério do filter, eu adicionei uma propriedade chamada isVisible e usei-a para controlar a exibição da foto no componente de galeria.

Exemplo

Meu hook useEffect ficou assim:

  useEffect(() => {
    const isPhotoVisible = (photo) => {
      const bySearchTerm = !searchTerm || photo.title.toLowerCase().startsWith(searchTerm.toLowerCase())
      const byTag = (!selectedTag || selectedTag.id === 0) || photo.tagId === selectedTag.id

      return bySearchTerm && byTag
    }

    const filteredPhotos = photos.map(photo => ({
      ...photo,
      isVisible: isPhotoVisible(photo)
    }))
    setPhotos(filteredPhotos)
  }, [searchTerm, selectedTag])

Estou verificando em cada foto se ela possui o termo da busca ou a tag selecionada e entao armazendo o resultado disso na propriedade isVisible.

Meu componente que renderiza as fotos ficou assim:

        {photos.map(photo => {
          if (!photo.isVisible) return;

          return <Photo 
            onExpand={onSelectedPhoto}
            onToggleFavPhoto={onToggleFavPhoto}
            key={photo.id} photo={photo}
          />
        })}

Eu apenas renderizo a foto se a propriedade isVisible for verdadeira.


Dessa maneira consigo limpar o termo de busca e/ou selecionar a tag Todas e preservar o estado do array, mantendo assim as fotos que foram favoritadas.

Espero que isso possa servir de exemplo caso alguém esteja tentando resolver esse mesmo problema.


Caso queiram, meu código final está disponível em: https://github.com/lukzgois/space-app

Pretendo no futuro refatorar esse app para usar ContextAPI e Redux.

2 respostas

Boa, Lucas!

Solução criativa! :)

Quando tiver suas soluções utilizando ContextAPI ou Redux, compartilha com a gente?

Opa, pode deixar! Abraços!