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
.