Resumo do Transcript

Então, a gente usou o Signing with Email and Password para autenticar o usuário, logar, mas ainda tem um problema se a gente clicar em entrar, ideia erro agora. Para o usuário final, eu não sei o que está acontecendo aqui, a gente sabe que a gente está desenvolvendo, se você olhar no debugger aqui dá um erro, você clica em entrar, esse erro que aparece como o console log que a gente escreveu mais para o usuário final, ele não sabe o que está acontecendo, então a gente deve mostrar uma mensagem de erro aqui, talvez antes do botão de entrar, e a gente pode usar essa mensagem aqui que é dada como resposta do Firebase como a nossa mensagem de erro. Se você se lembra do nosso estado do Redux, no AuthReducer aqui, a gente tem o erro, então, o que a gente vai fazer agora? Se der erro, a gente vai mandar uma ação chamada LoginUserFail, que falhou, e quando a gente for no Redux, a gente vai retornar o novo estado com uma mensagem de erro setada e dentro do LoginForm a gente vai adicionar um texto para mostrar essa mensagem. Então vamos lá, primeira coisa que eu vou fazer, vou lá de volta para o ActionCreator, ActionsIndex, na função em caso de der erro, se eu tentar autenticar mais der erro, vai no catch e a gente console log o erro, mas você note que esse objeto do erro tem uma propriedade chamada message que vai dar, que é a mensagem que a gente quer, então a gente vai usar essa mensagem como a gente vai despachar uma ação do tipo, o que? A gente vai criar esse novo tipo LoginUserFail, que falhou, e o payload vai ser a mensagem de erro, tá bom? Nesse caso a gente pode fazer erro como payload essa resposta, ponto mensagem, tá bom? Vai dar esse cara como payload que vai ser setar o novo estado do Redux. Agora a gente vai definir isso aqui, vamos definir essa ação, tipo de ação LoginUserFail, vai lá em cima importar do arquivo types que a gente ainda vai definir, tá bom? LoginUserFail, salva, vai para types e define essa nova novo tipo de ação. ExportConst, o nome, da variável constante, como string do mesmo, tá bom? Adicionamos, agora vamos para o reducer, vai lá no reducer, off reducer, dentro da parte reducers, e adiciona o caso, caso, case LoginUserFail, o que é que vai acontecer? Vamos retornar o estado, faz um cópia das propriedades do estado anterior, e adiciona o erro, e vai ser o quê? Vai ser o action.payload, que a gente passou com um mensagem de erro, né? Não esqueça do ponto vivo, e esse cara vai ser setado para o erro, que vai ser, por exemplo, se for essa erro aqui, o erro lá no estado, no novo estado, vai ser esse aqui, entendeu? Agora, só resta a gente ir ao componente loginform, e adicionar o erro, injetar com propriedade, eu acho que já está injetado lá no final, mapStateToProps, a gente vai injetar erro, vai ser stateOfError, tá bom? Aquele erro que a gente estava do estado do off, vai ser injetado como props, e a gente pode ir aqui. A note também que eu estou usando state.off.pro, muitas vezes, então, se você quiser, pode dar o destruturação para ficar mais fácil. Como é que vai fazer isso? Por exemplo, esse state, a gente sabe que vai pegar o email, password, erro, então, você pode destruturar o off. Como, se a gente fizer off, e não precisa ter state, pode dar leta, tá bom? E aí, a gente pode fazer o quê? Dá mais um destructuring, vai dar o email, password, and you error, vai estar destruturado do off, e dessa maneira, não precisa de estar mais off, só remover, tá bom? E como a gente tem propriedade com o mesmo valor, mesmo nome, valor que tem o mesmo nome, então pode dar leta, e é a mesma coisa, né? Por causa da versão ES6 do JavaScript, tá bom? Vai ter o erro, voltando a o que a gente estava fazendo, vamos lá e adicionar mensagem de erro. Eu vou botar antes do botão entrar, vou botar, vou adicionar esse mensagem de erro, e vai estar, o quê? Vai estar dentro do props error, né? Porque a gente passou, injetou aqui. Vamos ver o que está acontecendo, inicialmente o erro vai ser vazio, né? Vamos lá. A login user fail is not defined, quer que eu esqueci de fazer? Lá no reducer. Off reducer, eu usei esse cara, mas tá definido ou não? Vamos lá em cima, não importei, esqueci. Vamos lá, adicione. Login user fail, salvar, vamos tentar novamente. Tudo ok? O senote que tem um espacinho aqui, talvez seja eu, porque o erro está vazio, adicionando esse espaço, vamos tentar entrar, tá, e aparecer o erro. The email address is badly formatted, né? O email não está formatado bem, né? Bem formatado, vamos lá e adicionar aquele usuário que a gente criou, mas sem a senha. Entrar password, a senha está inválida, ou o usuário não tem um password. Vamos tentar um, dois, três, quatro, cinco, esqueci, não botei o seis, mesma coisa que acontece, vou botar seis, e aí deu bem-vindo, tá bom? Então o erro está funcionando, mas tem um detalhe, vamos voltar aqui. Ah, tá tudo bem agora. O erro já foi limpado porque a gente retornou ao estado inicial, quando a gente deu sucesso, né? Então tá tudo ok. Agora, se você quiser eliminar esse espaço aqui, uma maneira a gente de somente adicionar aquele componente de texto do erro, se o erro estiver, não foi vazio, né? Então, senor de se eu remover esse erro aqui e atualizar, não tem mais espaço entre o botão e o password aqui. Então a maneira de fazer isso, a gente pode pegar esse cara e somente renderizar se essa variável não estiver vazia. Você pode fazer isso aqui ou definir uma função fora, tá bom? Então vamos pegar esse aqui, em vez de estar aqui, vamos definir a função this render error, tá bom? Vou chamar essa função de render error, para mostrar o erro e vou chamar ela aqui. Vamos definir a função lá em cima, antes do render render error e vai se retornar só ao template, vai retornar o texto, assim. Mas a gente só quer retornar isso se tiver um erro, né? Se não tiver, a gente não quer mostrar nada. Então vamos lá. So if, se tiver um erro, se note que em JavaScript, se for vazio vai dar falso aqui. Se você quiser olhar isso, se você botar um string vazia, vai dar em falso. Então não aconteceu nada porque a string vazia é valor falso no JavaScript, que é diferente de ter alguma coisa dentro, né? Se tiver alguma coisa é verdadeiro. Então eu vou usar esse artifício do JavaScript para poder somente mostrar o erro se tiver erro. Se não tiver erro, vai dar retornar indefinido, né? Undefined e é o que a gente quer porque a gente só quer mostrar o erro se tiver erro. Então vou salvar, vou olhar. Não tem mais espaço, mas quando clica entrar o erro aparece. Muito bem. Agora vamos adicionar uma letra vermelha para esse erro. Se você quiser adicionar style, pode botar aqui se quiser ou pode criar um novo estilo, ou for de estilo. Vou botar red. Vou só quebrar essa linha. Agora está vermelha, só para dizer que é um erro. Tá bom? Se você quiser adicionar mais style, centralizar, por favor. Então vamos continuar no próximo vídeo.