Resumo da Transcrição

Antes de a gente prosseguir para fazer essa outra cena, vamos consertar esse negócio da busca aqui, que não está funcionando ainda. O que a gente fez agora está buscando por imagem de um cachorro, mas a gente quer permitir o usuário de digitar qualquer coisa para buscar, quando clica buscar, vai aparecer aqui, não é? Então vamos lá. Vou botar aqui, então a gente não quer mais aqui, desce FET quando esse componente monte, somente quando clicar no botão de buscar, que agora não faz nada. Então eu vou comentar esse, pegar esse código aqui, o que ele vai fazer. Vamos tirar esse código daqui e pô, em outro local. Mas primeiro vamos lá para a search bar para entender o que está acontecendo aqui. Então a gente tem esse componente aqui, na search bar, e tem, inicia o estado com uma palavra chave, vazia e quando a gente digita aqui, se eu conseguir clicar lá, cadê? Ok. Deu, demorando um pouco. Aí, quando a gente digita, vai chamar esse evento, um change text, se a gente chama a função para acertar o state com a coisa que a gente digitou, está tudo bem. Agora, quando a gente clica no botão buscar, não faz nada ainda, o que a gente quer fazer? Então clica a buscar, a gente quer que faça esse pedido, para API e a query que nos vê de cachorro, vai ser essa palavra chave aqui, que está no estado da search bar. Então, o que a gente vai fazer? Como o componente de search bar e esse componente de lista estão dentro desse componente para as que as imagens que é o pai. Então, esse demais vai ser responsável pelo FET e vai ser também responsável para saber o que fazer quando clica buscar. Então, quando a gente buscar, vamos fazer uma função aqui. Vamos chamar... Vamos chamar um submit. Só ver aqui, um submit. E vou fazer um submit aqui. Essa é a função. E quando eu clicar um submit, eu vou chamar uma função que será dada para props. Vamos chamar... Um form submit. Um form submit... Qualquer nome aí. Então, eu vou chamar essa função e vou dar a palavra chave como argumento. Mas essa função, um form submit será dada com propriedades pelo pai desse componente search bar. Nesse caso, é pesquisos de imagens agora. Então, quando eu vou dar props, o on search submit vai ser uma função daqui que a gente vai definir. On search submit... Na verdade, a gente vai fazer um móveis código aqui para cá para o on search submit. E vai ter um argumento que é a palavra chave. Em vez de ser o cachorro aqui, vai ser a palavra chave. Então, a gente pode colocar... Assento grave, back tick, para usar a interpelação de string. Em vez de cachorro, vai botar a palavra chave. Tá bom? Não vou precisando de componentemente, mas... A gente tem que chamar essa função. This on search submit... Salva aqui. Bom... Então, aqui o componente search bar, a gente vai passar propriedade on search submit, que na verdade é uma função que a gente definiu aqui. Essa função pede um argumento. Salava a chave. Essa função é passada como propriedade do search bar. Propriedade on search submit, desde o props, on search submit. Então, quando a gente clicar o botão, buscar, a gente vai chamar essa função daqui que invoca essa função on search submit e passa o argumento, que é a palavra chave do estado, que está amazenada no estado da search bar. Tá bom? Essa maneira que a gente vai fazer quando clicar aqui, vamos fazer, sei lá... Então, quando clicar, vai chamar aqui essa função, palavra chave, dar query, e eu vou pegar a palavra chave, cuidada, dar um patch e set state aqui, dos itens. Vamos ver se funciona. É um problema. Você sabe que é esse problema? Você lembra... Eu faço dizendo que não é uma função. Uh oh! Então, vamos ver aqui. Então, vamos ver aqui. Quando a gente chama on search submit, a gente passa essa função. Mas, com essa função, tem aqui o word, palavra chave, this. Mas, o que é this? Então, a gente quer o this aqui para ser esse componente para as esquias de imagens. Então, a gente tem que setar o contexto do this. A gente pode falar bind this aqui. Ou pode usar a função de chave. Mas, eu vou usar o bind. Então, aqui eu estou setando o contexto da palavra chave, this. Vai ser esse componente para as esquias de imagens, que vai setar o state do this, que this é o componente de imagem. Então, vai funcionar agora. Faleisano, um, dois, três, vamos lá. Gato, buscar um, dois, três, quatro, cinco, seis, a... Demora. E, aí. Vamos um pouquinho para carregar. Mas, apareceu, gato. Que legal. Vamos ver outro. Vamos ver, sei lá. E, o que é que vocês gostam? Buscar. Fazendo papel de parede no baixo aqui. Agora, vai ver que o ar é legal. Você notou que tem auto capitalização nesse text, empa? Você pode desabilitar. Você foi lá no search bar e adicionou as propriedades aqui. Auto capitalize. Acho que é falso ou é non? Acho que é falso. Fiquei olhando a documentação. Às vezes, é... é falso, às vezes é non. Deixa eu olhar aqui. Talks. Fala no text input. Aqui. Auto capitalize. Aqui, nesse caso é non. Se não quiser auto capitalizar. Deixa a little mile os clup primeiro. Eu não gosto disso. Então, vou mudar o total non. E também, se não quiser auto completar. Pode pôr auto complete. Acho que é falso, nesse caso. Se você olhar aqui... Ah, desculpe. Auto correct. Falso. É auto correct. Se não quiser esse negócio ficar completando. Auto capitalize. Primeiro letra não é mais com mais. Não fica dando sugestões. Legal. Sei lá o que aqui busca. Tá bom. Vamos ver. Outra coisa que a gente pode fazer aqui. Se notar com gente... Esquisa alguma coisa. Demora um pouco, né? Mas para o usuário isso não é muito legal. O usuário não sabe o que está acontecendo. Está funcionando ou não? Então, você pode botar um texto ou uma roda carregando. Quando estiver carregando a imagem. Uma maneira de fazer isso é você dar um... Você pode adicionar a propriedade aqui no Image List. A maneira fácil de fazer isso é que vai aqui no render do Image List e checa. Se não está com o render, você pode fazer isso aqui no render. Você pode botar um texto e checa. Se não tem nenhum item, você mostra o texto. Carregando. Você pode botar a imagem também. Qualquer coisa que indique que está carregando. Só botar um texto. E como é o seu texto, tem que importar aqui. Eu adicionei, tá bom? Antes, eu adicionei o texto aqui. Então, vai checar os itens, se for vazio, eu mostro o texto carregando. É legal, mas no começo fica fazendo carregando lá todo o tempo, né? Carregando, carregando.