Resumo do Transcrição

Então, acho que a gente já fez quase tudo para logar, poder implementação do entrar. Acho que a gente deve ir prosseguir para fazer o botão de cadastrar, né? A gente pode fazer um novo seno para cadastrar, mas eu vou usar o mesmo, esses mesmos inputs, esse mesmo formulário também para cadastrar. Então, se você clicar a cadastrar com esse email, essa senha, vai apenas criar um novo usuário. Talvez a gente logue o usuário no mesmo tempo, a gente pode primeiro cadastrar e mandar a mensagem, você foi cadastrado, por favor, entre os seus credenciais. Tá bom? Então, eu acho que o segundo vai ser melhor. Então vamos lá. A gente, quando clicar a cadastrar, nada acontece, não acontece nada, então vamos no login form, não tem a função, então vamos lá adicionar. D, 1, eu vou botar register em inglês, você pode escolher o nome que quiser. OnRegisterPress, bind this, que a gente vai usar a palavra chave this para se referir ao componente login form para poder acessar o action creator que vai ser injetado via props. Vamos aqui adicionar onRegisterPress. Então o que a gente vai fazer, vai chamar o action creator que a gente vai criar, vamos chamar register user. Tá bom? Agora para registrar o usuário a gente vai precisar da mesma tipo de argumento que o login, precisado email e da senha. Então vamos lá adicionar aqui como objeto se você quiser ou pode ser separado depende da implementação. Salvar, senão eu estou usando email password mas não defini, tá dentro do props, então vou fazer a mesma coisa que eu fiz aqui, então vou esperar você fazer. E aí deu certo? Faz destruturação do email e do password que tá dentro do props. A gente vai usar o mesmo estado do redux, o mesmo as coisas, tá bom? Para registrar, mesmo do login do cada, exatamente o mesmo, só muda o action creator. Com isso vamos definir esse cara, ainda não temos register user, esqueci de se passar aqui. Vamos lá em baixo, tá bom? E vamos adicionar aqui, não é? E agora qual é o próximo passo? Adicionei aqui mas não está definido porque a gente não importou, vamos lá em cima import. Essa linha já tá ficando meio longa, vou botar em múltiplo. Register user, tá bom? Vamos lá, definir esse action creator, vamos lá pro actions index. Vai ser quase, vou botar no final export const qual o nome, register user, função que vai pegar o que é user info. Tá bom? Tá mesmo na maneira que a gente fez login, eu quero que você tente fazer isso também. A gente vai usar redux tank, retornar a função cujo argumento é o dispatch. Tá bom? A gente vai chamar o firebase.off, chamar a função create user with email password. Então vamos lá, vou esperar você fazer. E aí retornar a função dispatch, dispatch, som de flash. Vamos chamar o firebase off. E aí o que é agora? Vai chamar em vez de sign in, vai chamar create user with email password, tá bom? Create user with email and password. Aí passa o email e passa a senha. O email tá dentro do objeto user info e a senha também. Deixa eu aumentar a tela aqui. Selinha tá ficando muito longa. Se você quiser destruturar esse cara aqui, pode fazer aqui, vamos lá destruturar, como é que faz? Pega o email e pega o password dentro do objeto user info e dessa maneira não precisa mais digitar user info ponto. Tá bom? Agora eu vou botar o que? Then tem um response. Tem também esse ideia erro, vai dar um catch. Bom, porque o firebase vai retornar a promessa que é lidada com o then no caso de sucesso ou o catch se der algum erro. Tá bom? Então se der certo criar o usuário, vamos dar só um console log na response para ver o que acontece, que aqui o firebase nos dá como resposta. E se der o erro também, vou dar um console log. Só para a gente ver agora, tá bom? Vamos lá, ver o que acontece. Vamos deslizar. Fica cadastrar, vou ver o meu. Deixe eu dar um cadastrar, dei um erro aqui. Tá dizendo. O email não tá formatado. Vamos botar um email de pessoa diferente, porque a gente vai cadastrar o novo usuário. Sei lá. Tá dizendo agora que a senha tem que ter no mínimo 6 caracteres. 1, 2, 3, 4, 5, 6. Tá aqui a resposta, parece que deu certo. Não sei o que. O email do cara que a gente deu. Tem o ID do usuário aqui. Parece que deu certo. Vamos checar lá no firebase. Eu vou para o firebase console. Tô no meu projeto. Vou para a authentication, a autenticação. Tem uma lista de usuários aqui e verifico que o usuário heal appmail.com, o que eu fiz agora, está presente. Então funcionou. Deu tudo certo. Voltando para o que a gente queria. Vamos lá despachar as ações. Antes, no momento que fazer esse pedido, vamos dar um despach para ficar loading. Vamos só verificar o off reducer aqui. A gente tem um login user loading, login user success, login user fail. Não vou usar a mesma, vou usar o novo register user loading. Vou usar register user success e vou usar register user fail. Então vou despachar uma ação. Esse caso tipo vai ser register user loading, que vai ficar loading. A gente vai definir isso depois. Se der certo na cadastro, vou despachar ação tipo register user success, que sucediu. Se der erro, vou despach, type register user fail. Vou passar payload como error.message, que eu vi aqui, que tem no caso do erro aqui, o object error tem essa propriedade mensagem do erro. E salvar, só verificar o outro aqui. É quase a mesma coisa. Agora eu vou esperar você, por favor, passe o vídeo e define todas essas ações. Defina lá em cima para importar e define no arquivo types.js. E aí, deu certo? Vamos lá, defini. Vou lá em cima importar primeiro. Register user loading, vai ser user success, register user fail. Vamos definir dentro do arquivo types.js. E vou é copiar. Vou copiar assim para você ver esses três. Copiar, vou só mudar login aqui para register. Tá bom? Aqui criei, salvar. Vamos lá no off reducer agora. Vamos lidar com essas ações. Então, primeiro caso vai ser register user loading e o que aqui vai retornar desse novo estado. Se a gente clicar no momento que botar, clicar no botão cadastrar, a gente quer que mostre o spinner. Então, quais propriedades você vai mudar e adicionar ao novo estado? Vamos fazer um vídeo e complete essa e há outros três. Tá bom? Então, o estado anterior, da mesma maneira que a gente fez esse cara aqui, vai dar quase no mesmo. É o mesmo, né? A gente usa o loading para true e para o case register user, se for sucedido, eu quero fazer o quê? Limpar tudo. Se o case register fail, falhou, manda um mensagem de erro, pega o state. O mensagem de erro é o venda-ação payload, seta também o loading para ser false, senão não vai desaparecer aquele spinner e mostrar os botões novamente. Tá bom? Salvar? Vamos o quê? Importar esses caras lá em cima. Vamos só copiar esse e mudar isso para register. Não esqueça das vírgulas. Salvar. Ok? Vamos ver. Quando clica em cadastrar, vai aparecer o spinner porque não tem o set time out, né? Deixa eu botar o set time out para você ver que está funcionando ok? Vou lá para o action creator.