Resumo do Transcrito

Então, vamos continuar aqui o nosso aprendizado do conceito de seletor. O que eu vou fazer agora? Então vamos pegar esse arquivo aqui, vamos pegar esse seletor e vamos recortar e colar em outro arquivo. Vamos criar um arquivo a pasta sse, chamado seletores.js. E nesse arquivo eu vou cortar aqui, vou colar aqui nos seletores. Agora se você quiser importar o seletor desse arquivo, você precisa botar export contra aqui antes do const. Aí, lá do listro de bandas, o banda seletor tem que ser importado do outro arquivo. Em cima import, como é que é? Tem que ter a chave que a gente usou export const, não se esqueça da chave. Bandas seletor, tron.ba seletores, tá? Salvar, sem problema. Deixa eu voltar aqui no navegador e eu vou abrir com a console, tá? Tem um erro aqui, deixa o pulse car aí embaixo. Tá bom, então esse erro aqui, warning each child, cada criança na lista tem que ter uma propriedade que única, tá? Isso é porque eu fiz o map e esqueci de pôr aqui no li, tá? Fiz o map, tem que ter aqui, eu vou botar só o nome da banda. Tem que ser um coisa única que vai ser diferente para cada elemento ali, tá? Normalmente é o id do dado, né? Dos dados. Então, só fazer isso para não ter mais o warning. É certo aqui, então, que isso vamos continuar aqui. Então, gente, o que é que a gente fez? Nós recortamos o seletor e fizemos arquivos de seletores e exportamos o seletor. Dessa maneira, a gente pode usar esse seletor de qualquer arquivo, de qualquer componente. Nesse caso, eu peguei o seletor e importei lá em cima dessa maneira. Agora, vamos supor que a gente tem outra, outra sessão do seu aplicativo, né? Se tem o seu perfil, por exemplo, aí a gente quer ver suas bandas favoritas, né? No seu perfil, sua página. Então, vamos criar aqui a página do perfil, vou criar o componente perfil.js, vou fazer aquela mesma coisa. Class, perfil, componente class, extends, react component, tá? Tem um método render e vou retornar, tá? Vamos fazer uma div, botar perfil, só por enquanto, pra gente poder mudar o export default lá embaixo. Perfil, import, react, um react, tá bom? Vamos ver aqui como é que a gente vai fazer pra poder mostrar esse cara no aplicativo. Vamos pôr uma rota, tá bom? Essa rota vai ser barra perfil aqui, quando você for aqui no seu localhost 3000, barra perfil, a gente quer ir e mostrar o componente perfil em vez dessa lista de bandas, tá? Agora tem a lista de bandas. Então, vamos ver aqui. Como é que a gente vai fazer? Então, vamos voltar aqui no app. Agora só tem a lista de bandas. A lista de bandas tá legal, mas eu não quero mostrar se o caminho for barra perfil. Como é que a gente vai detectar esse caminho? Você pode olhar no objeto window.location, tá? Esse objeto aqui, vamos dizer informação em seu local. O que a gente quer é o barra perfil, que vai estar nessa propriedade chamada pathname. Então, se o window.location.pathname for perfil, a gente vai mostrar o perfil, componente perfil, senão a gente vai mostrar a componente lista de bandas, tá? Então, vamos ver aqui. Eu vou aqui fazer o seguinte. Então, window.location.pathname, se for igual a barra perfil, eu quero mostrar o que? O perfil, né? O componente perfil. Vou botar esse perador aqui pra gente... Se esse cara aqui for verdadeiro, ele vai retornar esse cara aqui, tá? E vai aparecer aqui. Senão, né? Ele vai mostrar a lista de bandas. Mas pra botar o si não, eu teria que fazer o seguinte, botar o interrolação aqui. Então, em vez de botar esse cara, na verdade, vou botar a interrolação pra se der valor false, se ele não tiver em barra perfil, ele vai mostrar a lista de bandas, tá? Então, deixa eu salvar. Ah, o perfil não está importado, tem que me importar aqui em cima. Perfil, tá? Não esqueça de importar. Porto perfil.pron.barra.perfil, tá? Então, apareceu aqui, olha aqui. Se eu tirar barra perfil, ele vai de volta pro list de bandas, tá? Então, rotiamento aí. Se quiser adicionar um link, vamos ver adicionar o link ali lá em cima. Um app, e o app, fazer, sei lá, um menu, né? Pode botar um link aqui, h.etv.barre.perfil. Ver perfil, vamos ver se funciona. Ele vai pra perfil mesmo, tá? Fazer outro link. Eu acho que está dando um reload. A gente não quer, a gente tem que dar o prevment default. Toda vez que a gente clica, esse cara, mas eu não quero fazer isso, deixe como é, se você quiser fazer, tá? Vou botar o ahref, vai ser... Vista de bandas, se você quiser. Está muito feio esse negócio. Vou botar dentro do app. E... Botar outro div. Vou botar aqui a... Vou botar um div aqui pra ficar... Botar uma... H. Tá bom. Vou botar um aqui. Botar a H.6. Eu não vou mudar perfil, não vou mudar os títulos, se você quiser fazer isso. Perder tempo com os títulos, porque a gente quer focar no conceito. Tá bom, então. De bandas. Tudo certo, agora. Então vamos supor que o seu perfil, né? Você quer mostrar a lista de bandas favoritas. Então a primeira coisa que a gente vai fazer, a gente precisa acessar, né? A gente... Vamos... Vamos ver aqui no reducer. Aqui, o perfil aqui. A gente vai precisar armazenar as suas bandas favoritas no seu perfil. Então vamos supor que as suas bandas favoritas estivessem aqui nessa... Nessa parte do estado. No caminho é state.perfil. Vamos dizer assim, bandas favoritas, tá? Aí você pode, por exemplo, ter uma... Sei lá, uma lista com o nome das bandas que você gosta. Por exemplo, só gosto dessa aqui. Então vamos adicionar outra banda aqui. Sei lá... Qualquer banda aí. Tá legião, mano. Então adicionar um novo banda aqui, então tem três. Então vamos dizer que só gosto de uma. Então a gente vai precisar de um tipo de filtrar, né? Essa maneira que a gente fez... Normalmente a gente não se refere aos dados... Em maneira duplicada aqui, que já tem... As bandas já tem o nome aqui, então eu não quero duplicar os dados aqui. Normalmente teria um ID associado a essa banda. Esse cara normalmente seria um objeto, né? Com um ID, sei lá, dois, três, o nome da banda. Aí você poderia normalizar o estado em vez de ter o nome aqui. Você só diz o ID da banda, os favoritos que você gosta, tá? Dessa maneira aqui. Então vamos deixar essa maneira, na verdade, porque a gente tem que filtrar as bandas que a gente gosta e pegar o nome. Então seria melhor para ilustrar o nosso exemplo e fazer dessa maneira aqui. Então vamos dar uma pausa aqui e continuar na próxima aula para fazer isso, tá? Então te vejo lá. Até mais.