Aprenda a fazer autenticação de usuários no React Native usando o Firebase.
Passo-a-passo como configurar o seu aplicativo para rodar em Android e iOS ao mesmo tempo; usar o Redux; usar o React Native Router Flux; autenticar usuário usando email e senha com o Firebase. Aprenda a fazer os seus próprios componentes reutilizáveis.

Autenticação com o Firebase, React Native & Redux

Aprenda a usar o Firebase para fazer autenticação no seu aplicativo móvel. Utiliza React Native e Redux.

Autenticação com o Firebase, React Native, Redux (Aula Tutorial)

```markdown
# Resumo do Vídeo: Autenticação com Redux e Firebase no React Native

**Apresentador:** NBK Tutu

## Objetivo do Vídeo
Neste vídeo, vamos aprender sobre autenticação utilizando Redux e Firebase no React Native. O foco será em como realizar login e cadastro de usuários.

## O que é Firebase?
Firebase é um serviço de nuvem pertencente ao Google, que oferece:
- **Serviço de Autenticação:** Permite gerenciar usuários.
- **Banco de Dados:** Um banco de dados NoSQL semelhante ao MongoDB.

## Descrição do Projeto
O aplicativo que vamos desenvolver será simples, contendo:
- Uma cena com um formulário para login e cadastro, solicitando e-mail e senha.
- Ao clicar em "Entrar":
  - Se as credenciais forem válidas, o usuário será direcionado para uma tela com a mensagem "Bem-vindo".
  - Se não forem válidas, haverá a opção de cadastro de um novo usuário, que será criado no Firebase.

## Próximo Vídeo
No próximo vídeo, iniciaremos o nosso projeto.
```

fala galera, NBK Tutu está na área com mais uma série de vídeos
desta vez, a autenticação com o Redux e o Firebase no React Native
a gente vai aprender como entrar no sistema através de um login
e também como se cadastrar
para aqueles que não conhecem Firebase, é um serviço de nuvem
que agora já é parte do Google, Firebase
e vai permitir a gente usar o serviço de autenticação que eles têm
e também o serviço de banco de dados
que o Firebase tem um banco de dados, parece com o MongoDB, que é NoSQL
então o aplicativo que a gente vai fazer é algo como esse aqui, bem simples
mas vai ter muita coisa que vai acontecer quando a gente fazer o projeto
então a gente vai ter essa cena aqui com o formulário para entrar no sistema
ou para se cadastrar, então vai ter o e-mail e vai ter sua senha aqui
então quando você digitar esses, vai clicar entrar
e se as credenciais forem autênticas, você vai para outra cena que a gente vai mostrar a mensagem
bem-vindo, mas se não a gente pode se cadastrar e vai fazer criar um novo usuário no sistema
que está no Firebase e depois a gente pode entrar com esse novo usuário
então próximo vídeo a gente vai começar nosso projeto


0005-01 Autenticação com o Firebase, React Native, Redux (Aula Tutorial)

Geração do Projeto com o Comando react-native (init, run-ios, run-android)

# Resumo do Transcrição em Markdown

## Criando um Projeto React Native

1. **Início**:
   - Acesse o terminal.
   - Comando para criar um projeto: 
     ```bash
     npx react-native init AuthFirebaseRedux
     ```

2. **Estrutura do Projeto**:
   - Após a criação, uma pasta do projeto irá ser gerada.
   - Navegue para a pasta do projeto usando:
     ```bash
     cd AuthFirebaseRedux
     ```
   - Estruturas de pastas include:
     - `index.js` para iOS e Android
     - `package.json` (uso com NPM)
     - `node_modules`
     - Pastas Android e iOS.

3. **Versão**:
   - O vídeo utiliza React Native v0.37.

## Executando a Aplicação

- **Para iOS**:
  ```bash
  npx react-native run-ios
  ```
  - Isso abrirá o simulador do Xcode e o React Packager.

- **Para Android**:
  ```bash
  npx react-native run-android
  ```
  - Se abre o simulador Android com o Packager.

## Resolvendo Problemas

- Se o servidor de desenvolvimento não estiver rodando: 
  ```bash
  npm start
  ```
- Para problemas ao executar o simulador Android:
  - Abra o Android Studio, importe o projeto, e clique em "Run".

## Configurando o Editor

1. **Editor de Texto**:
   - Uso do Atom como editor.
  
2. **Criando Estrutura de Código**:
   - Criar uma pasta chamada `src` dentro do projeto.
   - Criar um arquivo `app.js` dentro de `src` como ponto de partida.
  
3. **Código Inicial em app.js**:
   ```javascript
   import React from 'react';

   const App = () => {
     return (
       // template do seu componente
     );
   };

   export default App;
   ```

### Conclusão
- Preparativos do projeto básicos estão finalizados, pronto para desenvolvimento adicional.

Vou para o meu terminal.
Aqui no terminal, vou criar o projeto com o comando React Native, init e o nome do projeto.
E vou dar o nome à autenticação com Firebase Redux.
Tá bom?
Isso vai gerar os arquivos para o nosso projeto.
Então, eu já fiz porque demora um pouquinho.
Então, quando terminar, vamos continuar.
Depois que terminar, vai ter a pasta do projeto.
Vamos dar a CD e entrar na pasta do projeto.
Vou dar os arquivos, aqui o index do iOS, o index do Android.
Tem um package JSON que estamos usando no NPM e o Modules do Node.
E as pastas para o Android e para o iOS.
Tá bom?
Só um detalhe, eu estou usando React Native v.0.37 neste vídeo.
Tá bom?
Agora vamos rodar a aplicação.
Se você está usando o iOS, React Native, Run, iOS.
Tá bom?
Eu acabei de rodar esse comando e abriu o meu simulador do Xcode aqui.
E também esse React Packager, essa tela do terminal, React Packager.
Se você está usando o Android, é React Native, Run, Android.
Tá bom?
E se tudo dá certo, vai abrir o simulador do Android.
Com também, com o Packager.
No meu caso, às vezes dá problema.
Eu já tive o problema no passado que o Run Time Development Server
não estava rodando, se você tiver esse problema, dá o NPM Start e um novo terminal
para rodar o React Packager.
Tá bom?
E se ainda não estiver funcionando, no meu caso, por exemplo,
para rodar o Android, dá erro quando eu faço React Native, Run, Android.
Então, para esses casos, se você não conseguir executar o simulador usando esses comandos aqui,
minha sugestão é que você abra o programa,
o respectivo programa para a sua plataforma.
Por exemplo, para o iOS, eu abro o Xcode, né?
Então, você pode abrir o Xcode e abrir o projeto com o Xcode
e rodar o simulador de lá.
No meu caso, eu não tenho problema com o Xcode, mas eu tenho um problema com o Android.
Então, o que é que eu faço?
Eu abro o Android Studio, né?
Abro o Android Studio, abro o projeto lá, nesse caso aqui, e dá o Play aqui.
Clica no Play, no Run App, rodar, né?
E vai perguntar qual o dispositivo que você quer usar,
se você não tiver um, é só criar.
E então vai dar na tela do amulador.
Então, por isso, vamos voltar tudo rodando agora.
Tem o meu iOS, tem o meu Android, simuladores aqui.
Então, vamos abrir o editor de texto da parte de nosso projeto e começar a trabalhar.
Vou aqui para o Atom, eu uso o Atom.
Abrir aqui, primeira coisa que eu vou fazer, vou criar uma pasta,
chamada src, dentro do nosso projeto.
O código fonte vai estar dentro dessa pasta.
E, seguida, vou criar um novo arquivo dentro de src,
que vai chamar de app.js, vai ser o ponto de partida, depois do index aqui.
Então, para o app.js, vamos dar um import React,
que a gente já precisou do React.
Vamos fazer o componente funcional, variável, igual a uma função,
esse caso eu vou fazer a função de flash,
e vou exportar no final, export the fault app,
para disponibilizar esse app para outros arquivos.
Aqui dentro da função, eu tenho que retornar o template do


0005-02 Geração do Projeto com o Comando react-native (init, run-ios, run-android)

Template do Componente App e o Registro com o AppRegistry

# Summary of Transcript

The speaker discusses the process of setting up a React Native app component. Here’s a breakdown of the steps:

1. **Component Setup**:
   - The speaker creates a template for the app component by adding a `View` and duplicating `Text` components for demonstration.
   - They emphasize the need to import these components from React Native.

2. **Initializing the App**:
   - The speaker directs to the `index` file for both iOS and Android, starting with iOS.
   - They delete existing content to set up a fresh starting point for the application.
   - Utilization of the `AppRegistry` from React Native is highlighted, which is required to register the app component.

3. **Imports**:
   - They import `AppRegistry` and the newly created `App` component, specifying the correct path to the `src` directory.

4. **Registering the Component**:
   - The `AppRegistry.registerComponent` method is used, where the project name is specified along with a function that returns the app component.

5. **Testing**:
   - After saving the changes, the speaker runs the iPhone simulator to check for errors. The output "oi, oi, oi, oi, oi" confirms that the app component is functioning correctly.

6. **Android Setup**:
   - The speaker notes that the same code from the iOS index file will be copied into the Android index file (`index.android.js`) to ensure consistent functionality across platforms.

7. **Final Note**:
   - The speaker asserts that application development can commence in the `src` folder, without concern for platform differences (Android vs iOS). They verify that everything is running smoothly on both the iOS and Android emulators.

Overall, the transcript provides a step-by-step guide on configuring a foundational setup in React Native, covering component setup, registration, and initial testing on both iOS and Android platforms.

Então vamos retornar o template para esse componente app.
O que eu vou fazer?
Eu vou adicionar um view, tá bom?
E dentro da view você tem uns componentes de texto e vou duplicar só para parecer alguma
coisa.
Então como a gente está usando view e text a gente tem que importar que são componentes
do React Native.
Import.
Vamos tirar de dentro do module do React Native, então precisa do curly braces aqui de estruturar
a view e o text from React Native.
Bom?
Então a gente já está ok, vamos salvar o componente e o que a gente vai fazer agora?
A gente vai para o index do Android iOS aqui, eu vou começar do iOS, vamos deletar tudo,
tá bom?
E vamos começar a iniciar o ponto de partida do aplicativo.
Primeiro a gente vai precisar do app registry que é parte do React Native.
React Native, tá bom?
Esse componente app registry vai servir para chamar a gente, vai chamar a função register
component que vai dar o ponto de partida para o aplicativo.
Note que a gente não precisa importar nada do React, só do React Native.
Então vai o app registry e agora a gente vai também precisar importar o app, então
vamos dar import do componente que a gente fez agora, do app, vamos chamar de app from,
onde é que está localizado?
Está dentro da pasta src que é ter que ter o ponto barra, porque está no diretório
presente.
Barra src, a app.
Então precisa da extensão do ponto js e assim.
E a gente vai chamar a app registry ponto register component, o nome do componente vai
ser o nome do projeto, nesse caso a autenticação com Firebase Redux, tá bom?
Eu criei o projeto com esse nome, então eu tenho que ir usá-lo.
E o segundo argumento vai ser uma função, vou dar a função de flash e vai retornar
o componente app, deixa eu aumentar a tela aqui, vai retornar esse cara aqui, então
só digitar app, tá bom?
Ponto em vírgula para finalizar.
Então esse componente app register que está dentro do React Native, vai registrar o componente
que é esse cara aqui, esse componente aqui, o app vai ser o ponto de partida do aplicativo,
tá bom?
Vamos salvar, só rodar aqui o meu simulador do iPhone para ver se não deu erro.
Então o ponto de partida está oi, oi, oi, oi, oi, que funcionou que é o componente
app, né?
Então tá tudo certo, quando a gente terminar esse cara vamos copiar todo o código aqui
e colar no mesmo coisa no Android, no index.android.js, vou remover tudo e vou colar a mesma coisa
do index.ios.js, porque vamos rodar tanto como no iOS, como no Android, então vai ser
o mesmo coisa.
E agora a gente pode começar a escrever a aplicação dentro dessa pasta src e não vai
importar se é Android ou iOS.
Só para demonstrar, vou pro meu amulador do Android, vou download, atualizei, está
posicionando também no Android.
Então tá tudo bem.


0005-03 Template do Componente App e o Registro com o AppRegistry

Instalação do Redux e a Definição do Reducer Inicial

```markdown
# Resumo da Configuração do Redux

O próximo passo na configuração do projeto é instalar e configurar o Redux. 

## Instalação do Redux

1. **Abrir o terminal** e limpar a tela.
2. **Instalar Redux**:
   ```bash
   npm install --save redux
   ```
3. Verificar se o Redux foi adicionado ao `package.json`. A versão instalada é 3.6.
4. **Instalar React-Redux**:
   ```bash
   npm install --save react-redux
   ```
5. Verificar `package.json` novamente; a versão do React-Redux instalada é 4.4.6.

## Estrutura do Projeto

1. Navegar para a pasta `src` e criar os seguintes diretórios:
   - `components`
   - `actions`
   - `reducers`

2. **Criar arquivos** `index.js` dentro das pastas `actions` e `reducers`.

## Configuração de Reducers

1. Importar `combineReducers` do Redux no arquivo `reducers/index.js`.
2. Criar um reducer inicial:
   ```javascript
   import { combineReducers } from 'redux';

   const rootReducer = combineReducers({
       // reducers will be added here
   });

   export default rootReducer;
   ```

   - O reducer deve ser uma função que recebe `state` e `action`.

3. **Estrutura básica do reducer**:
   ```javascript
   const initialState = {}; // Valor inicial do estado.

   const exampleReducer = (state = initialState, action) => {
       return state; // Retorna o estado atual.
   };
   ```

## Criar a Store

1. Importar `createStore` do Redux:
   ```javascript
   import { createStore } from 'redux';
   ```

2. Criar a store:
   ```javascript
   const store = createStore(
       rootReducer // Passar o rootReducer
   );
   ```

## Conectar Redux ao React

1. Importar o `Provider` do React-Redux:
   ```javascript
   import { Provider } from 'react-redux';
   ```

2. Envolver o componente principal com `Provider`:
   ```javascript
   <Provider store={store}>
       <App />
   </Provider>
   ```

Agora o aplicativo React está conectado ao Redux, permitindo o acesso ao estado da aplicação através do Redux em toda a aplicação.

## Teste

- O aplicativo foi testado em simuladores de iPhone e Android, e tudo funcionou corretamente.
```


Agora o próximo passo na nova configuração é configurar o Redux.
Primeiro eu vou para o terminal, deixo limpar a tela.
O que eu vou fazer? Vou desalar o Redux.
Vou dar npm, install e vou dar dash dash save, porque eu quero salvar com dependência no package.json.
Vou salvar o Redux.
Então vai demorar um pouquinho para assalar o Redux.
Deixa eu só checar o package.json para verificar se adicionou as dependências aqui.
Vou dar um package.json aqui.
Você nota que o Redux foi adicionado as dependências.
Note que é a versão 3.6.
Depois disso também vou precisar do react-redux para poder conectar o react com o Redux.
Vamos instalar outro modo.
Dash dash save react-redux.
Vamos ver.
Demora um pouquinho.
Vamos verificar o package.json.
Vai já aparecer o react-redux.
Vê se for 4.4.6.
Estou usando aqui.
Então instalamos os módulos, o Redux, o react-redux.
Estamos preparados para começar a configurar.
Primeira coisa que vou fazer, vou para pasta src e criar outras pastas.
Criar diretórios chamados components para botar todos os nossos componentes lá.
Vou criar também actions para pôr nossas ações.
Desculpa, criei um arquivo, é o diretório.
Criar um diretório, new folder, novo diretório, nova pasta, actions.
E também o reducers.
Pasta chamada reducers para pôr nossos reducers lá.
Dentro do actions, vou criar index.js para pôr nossos action creators.
Dentro reducers, também vou botar index.js.
Agora para reducers, vou digitar um código para inicializar todos os reducers.
Então, primeiro vamos importar combine reducers,
que é uma parte do módulo do redux.
Esse cara vai ser usado para combinar todos os reducers,
porque a gente vai ter vários reducers, então no final a gente vai combinar todos os reducers em um.
Só um.
Então import, vamos dar um export default e vamos chamar combine reducers.
Aqui a gente vai passar um object como argumento.
E vai ser alguma coisa, vai ser os reducers aqui, mas agora a gente não tem nada.
Então só vou botar state aqui e vou botar uma função de flash aqui e retorno um objeto vazio.
Tá bom?
Nesse caso o reducer é uma função, né?
A função do reducer sempre tem o argumento state e o... também tem action.
Nesse caso vou botar inicialmente, vou iniciar o state, o objeto vazio e em vez de retornar o objeto vazio, vou retornar o state.
Nesse caso, se você não entende isso aqui, deixa eu copiar aqui.
Esse aqui é a mesma coisa que digitar isso aqui.
Function, state, action.
Tá bom?
A mesma coisa.
Nesse caso eu estou definindo um valor inicial para o state.
Tá bom?
Inicialmente o state vai ser esse cara, vai ser objeto vazio que vai ser passado aqui, na verdade inicialmente vai ser assim.
Tá bom?
Se lembre que o reducer é sempre uma função que retorna parte ou uma peça do estado, do application state.
Então, vamos deixar isso aqui, só para configurar.
Deixar configurado tudo ok.
E depois a gente vai modificar para adicionar os nossos reducers.
Agora, vamos voltar a um app aqui.
Agora não tem nada configurado para o redux.
Então a gente tem que usar umas coisas.
Primeiro de tudo a gente tem que criar uma store, né?
O chamado redux store.
Para isso a gente vai precisar da função create store que está dentro do modelo do redux.
Então o que é que eu vou fazer?
Vou aqui, depois desse import aqui, vou dar um import.
Destruturado do create store que está dentro do modelo redux.
Tá bom?
E com isso eu posso criar uma store.
Vamos aqui, vou dar const, criar um variável chamado store e vamos criar o store.
Cadê? Create store.
Não é?
Mas quando a gente cria store tem que passar os reducers.
Agora não tem um reducer, vamos chamar de reducers e vamos definir.
Então, onde é que está os reducers?
Está dentro da pasta reducers no index.js.
Então vou importar reducers, que eu chamei reducers aqui.
Então tem que ser o mesmo nome.
From, onde é que está?
Tá dentro da pasta reducers, então mesmo direitório.
Reducers.
Como o nome do arquivo é index, não precisa digitar, tá bom?
É só falar assim, que vai automaticamente saber que tem que olhar no index.
Então vou olhar nesse arquivo, vai importar esse cara aqui.
Tá bom? E vai ser aplicado a essa store.
Tá ok?
Agora, o próximo passo é usar o componente de auto-ordem,
Higher Order Component chamado Provider, que é fornecido pelo model do React Redux.
Que ele model que vai permitir a gente conectar o Redux, o React ao Redux, né?
Então vamos lá.
Depois desse Great Store, vou importar o quê?
Provider do React Redux, tá bom?
Então esse componente aqui chamado Higher Order Component, H-O-C,
conectar até ordem, sei lá como é que fala em português.
Vai aprimorar o nosso componente, tá bom?
Pra injetar a store com propriedade.
Então vamos lá.
A gente vai fazer o quê? Vai mudar esse cara aqui, vai mudar o provider aqui.
E o provider vai ser o cara, né?
Vai dominar tudo, então tem que ter esses caras aqui com o filho do provider.
E a propriedade do provider é chamada Store.
A gente tem que passar a Store.
Como a gente criou uma Store aqui e chamou de Store também, a gente só passa esse cara aqui.
Esse cara aqui é esse cara aqui.
Tá bom? Passou a Store para o provider e agora o nosso aplicativo vai ter o Application State to Redux disponível
por toda a aplicação, todo aplicativo, né?
Vamos salvar aqui.
Vou testar.
Deixei o meu simulador iPhone.
A atualizar, tudo ok? Não teve erro.
Também vou no Android só para você ver.
RR aqui.
Tudo ok.
Deixa eu só abrir meu debugger aqui.
Debug de S Remotely, só para ver se não teve nada.
Tudo ok também.
Então vamos lá. Volta.
Tá bom?


0005-04 Instalação do Redux e a Definição do Reducer Inicial

Instalação do Middleware Redux Thunk

# Resumo do Vídeo sobre Configuração do Redux com Redux Thunk

No vídeo anterior, foi realizada a configuração básica do Redux, mas ainda não foi incluído nenhum middleware. O apresentador menciona que usou o **Redux Promise** em vídeos anteriores para lidar com requisições assíncronas, mas desta vez utilizará o **Redux Thunk**. 

## O que é o Redux Thunk?

O **Redux Thunk** permite que os *action creators* retornem uma função em vez de um objeto. Esta abordagem é útil para realizar requisições assíncronas ao Firebase, uma vez que precisamos aguardar a resposta para saber se a autenticação foi bem-sucedida ou não.

## Passos para Configuração do Redux Thunk

1. **Importação do `applyMiddleware`**: O apresentador explica que é necessário importar a função `applyMiddleware` do Redux.
   
2. **Criação da Store**:
   - Ao criar a store, são necessários três argumentos:
     - O primeiro argumento é o **reducer**.
     - O segundo argumento é o **estado inicial** (que pode ser um objeto vazio).
     - O terceiro argumento é o `applyMiddleware` com o middleware que desejamos aplicar, que neste caso é o **Redux Thunk**.
   
3. **Instalação do Redux Thunk**: 
   - O apresentador orienta sobre como instalar o Redux Thunk utilizando o npm:
     ```bash
     npm install redux-thunk
     ```
   - Ele destaca a importância de sempre verificar as versões, pois atualizações podem causar problemas.

4. **Importação do Redux Thunk no código**: Após instalar, o próximo passo é importar o Redux Thunk no arquivo da aplicação:
   ```javascript
   import thunk from 'redux-thunk';
   ```

5. **Aplicação do Middleware**: Com o Redux Thunk importado, o apresentador finaliza a configuração para garantir que tudo funcione corretamente.

## Considerações Finais

O apresentador encoraja os espectadores a testarem a configuração nos simuladores tanto no iOS quanto no Android, garantindo que tudo esteja operando corretamente.

O vídeo passado a gente configurou Redux e está quase tudo configurado, é certo que
a gente não configurou nenhum Merylware, né?
Se você viu meus vídeos de introdução Redux, naquela série de vídeos eu usei
o Redux Promise para lidar com pedidos acíncronos.
Os HTP acíncronos quando enviar a ação do Action Creator.
Nesse caso a gente vai fazer, vai usar outro Merylware, chamada Redux Thunk, tá bom?
A gente vai usar Redux Thunk, porque se você lembra Action Creators, os Action Creators
têm que retornar a uma Action, uma ação.
Mas no caso aqui a gente vai fazer um pedido acíncrono ao Firebase e vai demorar um pouquinho
para receber resposta.
E como a gente vai precisar saber se deu certo a autenticação ou se não deu certo, a
gente vai ter que fazer um Action Creator que seja acíncrono, né?
E como a gente só pode retornar uma Action, isso não vai dar certo, então a gente vai
usar o Redux Thunk.
Redux Thunk vai permitir você retornar uma função do Action Creator em vez de só um
objeto de ação, tá bom?
A gente vai ver como é que é isso depois, mas agora a gente só está configurando,
então não se preocupe se você não entendeu ainda, tá bom?
Para configurar o Redux Thunk, eu só vou importar a função Apply Metalware, tá bom?
Que é parte do Redux.
Então como a gente vai fazer isso?
É simples, vai importar do Modo Redux Apply Metalware, somente isso.
E para aplicar ou adicionar esse Metalware à sua Store, a sua aplicativa, basta a Go
na Create Store e dá mais argumentos.
Nesse caso, o primeiro argumento é o Reducer, o segundo argumento vai ser o Estado Inicial
que não precisa, então vou botar o objeto vazio.
Agora o terceiro argumento é o Apply Metalware, Apply Metalware, mas qual é o Metalware que
a gente quer?
É o Redux Thunk, tá bom?
Mas esse cara a gente ainda não tem, então precisamos instalar o módulo e importar.
Então vamos lá, vou ao meu terminal, vou dar uma limpeza aqui, o que é que eu vou fazer?
NPM, install, vou salvar no meu Dependence, vai ser Redux Thunk.
Então vamos esperar um pouquinho, a instalar o módulo Redux Thunk, que é o Metalware
que é o Redux.
Vamos aqui no meu package, .json, JSON, tá aqui adicionado as Dependences, Dependences,
Dependency, Redux Thunk, versão 2.1, tá bom?
Eu sempre falo as versões porque o software vai ter versões novas e às vezes essas versões
novas, algumas coisas mudam, às vezes drasticamente, que faz tudo não funcionar na nova versão,
então se você tiver problema por favor instale essa versão que eu estou usando.
Se você não sabe fazer isso, NPM install e sempre você pode adicionar a versão com
o valor arroba, arroba, versão por exemplo 2.1.0, deixa eu aumentar aqui para você ver.
Então se você tiver algum problema instale a versão que eu também instalei, nesse caso
2.1.0 usando a arroba e o número da versão, depois do nome do módulo, tá bom?
Isso, assim.
Tá bom?
Vamos continuar.
Instalei o Redux Thunk, vamos importar dentro, vamos voltar a app, vamos importar o Redux
Thunk agora, eu vou adicionar import, Redux Thunk.
Mas não tem esses caros aqui, porque é o módulo Redux Thunk, a gente quer importar
o módulo, não queremos importar um objeto que está dentro do módulo, então não precisa
distruturar nada, Redux Thunk.
Agora esse cara vai estar disponível, então pode usar aqui, definimos, e apply middle
air que veio do Redux, tá bom?
Então é só isso para configurar e apply, aplicar esse middle air Redux Thunk, salvar,
vamos ver se não deu pau aqui.
Tudo ok no iOS, também no Android, cadê meu simulador da RR aqui?
Tá bom, tudo ok?


0005-05 Instalação do Middleware Redux Thunk

Instalação do react-native-router-flux e Definição de Cenas Sob um Roteador

# Resumo do Transcript

O palestrante fala sobre o progresso no desenvolvimento de um aplicativo do zero, explicando que a configuração inicial levará algum tempo, mas que será mais rápida depois. Ele enfatiza a importância de aprender a criar tudo desde o início.

## Principais pontos abordados:

1. **Configuração Inicial**:
   - Começaram o aplicativo sem usar boilerplate, o que é uma boa oportunidade de aprendizado.
   - Ajustaram o ponto de partida no index do Android para suportar tanto iOS quanto Android.

2. **Diretórios e Estrutura**:
   - Criaram a estrutura básica do aplicativo, incluindo pastas para ações, componentes e reducers.
   - Explicaram o propósito dos reducers como funções que retornam partes do estado da aplicação.

3. **Configuração do Redux**:
   - Configuraram o Redux, incluindo o middleware Redux Thunk e a injeção da store usando um Higher Order Component (HOC).

4. **Navegação**:
   - Próxima etapa da configuração: implementar a navegação com o `react-native-router-flux`.
   - O palestrante recomenda instalar a versão 3.37 do `react-native-router-flux`.
   - Criação do arquivo `router.js` para gerenciar as rotas, com rotas para as telas de login e principal (main).

5. **Definição de Componentes**:
   - A estrutura de rotas será estabelecida no componente de `router`, com chamadas para os componentes que ainda precisam ser definidos.
   - Criar os arquivos `loginForm.js` e `main.js` como componentes que precisam ser implementados.

6. **Injeção do Router**:
   - O próximo passo é injetar o router dentro da aplicação principal, antecipando que pode haver erros se os componentes ainda não estiverem definidos.

O palestrante conclui mencionando que ainda há trabalho a ser feito na definição dos componentes para os quais as rotas se referem.

---

Essa é uma visão geral do que foi discutido no vídeo sobre o desenvolvimento do aplicativo.

estamos de volta só queria dizer que no começo vai demorar um pouquinho demora
um pouquinho para a gente configurar as coisas mas depois vai mais rápido né
então espero que tenha paciência para a gente configurar tudo porque a gente
começou o aplicativo do zero tivemos que instalar tudo do zero sem nenhum
boilerplate né então mas é também bom para você revisar e aprender como fazer
tudo do zero então espero que esteja gostando dos vídeos então é que a
gente fez até agora então a primeira coisa que a gente fez foi
ajustar esse ponto de partido no index android a gente fez esse cara aqui que
são os dois iguais para a gente poder disponibilizar o aplicativo para as
duas plataformas ao mesmo tempo do is e o android a gente criou a app que vai ser o
ponto principal para a gente escrever aplicativo que a gente fez a gente criou
a parte da actions que vai ter todos os action creators e os tipos de ações
criou a parte de componentes componentes para ter todos os componentes que a gente
vai usar também criamos a parte de reducers que vai ter os reducers né
reducers são apenas funções que retornam uma parte do application state ou
chamado reducer né os dados e também aqui a gente começou e finalizou a
configuração do redux com a importação do modo redux tank usando o
apply middleware aqui como terceiro argumento da função create store
também se lembra que a gente usou componente de auto-order higher order
component provider que injetou a store dentro do nosso aplicativo
tá bom e agora o que a gente vai fazer então temos mais uma peça de
configuração para fazer esse caso vai ser a navegação se você voltar aqui
vamos lá para o sketch pad tem outra cena tem duas cenas de login tem a
cena do bem-vindo que a página que precisa que vai ser somente acessado se
você tiver autenticado assistente é o né para fazer essa navegação embora que
só tenha duas cenas né eu vou usar o react native flux né router flux né o
modo react native router flux eu demonstrei o uso do react native router flux
no meu minha série de vídeos introdução ao redux
sou se você quiser ver esse vídeo por favor
vai lá então esse cara aqui react native router flux faz a
navegação ficar muito mais fácil em vez de a gente usar o componente
navigator que é fornecido pelo react native é mais um camada de
abstração que adicionada a usar o modo mas fica tudo mais fácil então vamos lá
primeiro coisa que a gente vai fazer instalar o módulo npm install save
sabá como dependência react native router flux a bom deixou aumentar aqui
em largar a tela então esse cara aqui a gente vai usar como navegação vamos
voltar o package da g.gson aqui cadê o cara demora um pouquinho vai instalar
o que que é isso que funcionou a ria que nem o rato flux aqui então estou usando
react native router flux versão 3.37 tá bom então se a versão mudar por favor
tem um cuidado toma cuidado porque versão por exemplo se você já tiver na
versão foco quando você estiver assistindo esse vídeo vai dar pode dar
porque as coisas mudaram mas favor instala versão 3.37 tá bom
então instalamos vamos lá voltar a tom que a gente vai fazer a gente vai
pasta src criar um novo arquivo chamado router ponto js
que vai ser nosso router vai ser nosso arquivo para que vai incluir todos as
rotas nosso aplicativo primeira coisa que a gente vai fazer importar o react
importe o react sempre assim né form react também vamos precisar de algumas
coisas do react router flux tá bom mas vamos fazer isso depois vamos só fazer o
componente o componente que a gente vai fazer chamado componente de rotador
const chamar variável aqui vou chamar router component é muito importante
você adicionar esse componente porque o router é um componente que já é parte
do react native router flux então a gente precisa fazer nosso próprio
componente e vou adicionar esse aqui para diferenciar porque o nome não sei o
mesmo então vamos definir com função de flash só um componente funcional
sempre retorno template qualquer coisa que seja que a gente vai retornar e no
final export default o nome do componente para disponibilizar para outros
arquivos nesse caso vai ser o app da outra js depois a gente vai fazer isso mas
agora vamos lá vamos importar do react native router flux então vai ter a
primeiro de tudo router que a gente vai usar o componente de rotador do react
native router flux nome é um pouco longo mas vamos lá e também vamos
precisar da sim é como se fosse a rota né é muito parecido com o react router do
react web mas aqui a gente chama sim em vez de route então vamos lá
primeira coisa no template bota router
ok e vai definir as rotas ou sim dentro desse cara quanto sem cenas de a gente vai
ter vamos olhar no sketch aqui vai ter uma e duas então você pode chamar esse cara
de login e pode chamar esse cara de sei lá página principal ou main então vamos lá
então para sim componente sim vai ser self close né só fechar o mesmo tempo e
as propriedades são que são aqui que vai ser a chave vai ser
uma chave que a gente vai usar como a função nome da função para ser chamada
para mudar de cena então vai ser vamos chamar de login
login e o componente vai ser o que qual o componente que você vai usar a gente
ainda não tem né então mas vamos chamar de login
e o login for né formular login por exemplo vamos chamar sim e o outro argumento é o título
se você quiser que apareça na barra de estar na barra assim aqui de baixo da hora vai ter
uma barra com o título se você quiser e se apareça só botar title e alguma coisa que
você quer se apareça por favor
entre suas cadanças mas vai estar muito longo sei lá vamos botar login só logo esse texto aqui
se você quiser que seja sendo inicial você pode pôr initial com propriedade que quer
true ou falso então não precisa falar explicitamente true é só botar inicio
normalmente se você não tiver nexo a primeira rota vai ser a inicial por exemplo se você
tivesse outra aqui e não tivesse esse cara a inicial seria esse primeiro então vamos botar
aqui botar inicial deixa eu aumentar aqui da outra cena deixa eu botar isso para baixo vai ser
a tela principal vou botar vou chamar de main tá bom main componente vai ser sei lá main
o título botar bem também vou não se esqueça de fechar a tag do componente e é só isso
definimos a nossa sina mas não temos esses caras né então vamos fazer o componente agora
e deixa eu dar um que vamos lá para o componente o criar novo arquivo chamado login form
js também vou criar o main.js esses dois caras vamos definir os componentes
para o main só é uma mensagem então vamos lá tem duas outras gente pode seguir a gente pode
definir o componente agora ou depois então vamos deixar esses caras aqui então só criamos
o arquivo vamos definir depois vamos voltar o router e focar nesse cara a gente não tem
definir então vamos importar import qual nome login form from onde é que tá está dentro do
pasta component mesmo diretório ponto bar component login form não precisa extensão js
mesmo coisa para o main port main from component main então aqui você importa todos os componentes
que vai precisar para as rotas né tudo ok e o que a gente vai fazer agora
e vamos para o app e injetar o router na aplicativo em vez de ter isso oi eu não sei o que vou
recortar esse vídeo aqui e vou adicionar o router que vai ser esse cara aqui do arquivo router ponto
js tá bom vamos importar e talvez depois de reducers
router from mesmo diretório router então também portando esse arquivo aqui tá bom salva como
o router vai definir a inicial como o login vai para esse componente aqui mas não tem nada então
provavelmente deve dar um erro na parecida lá vamos ver o que acontece tá lisando
é que está o que é que o router de fio renderer é então a gente tem que definir vamos definir
Esses...
componentes!!


0005-06 Instalação do react-native-router-flux e Definição de Cenas Sob um Roteador

Implementação do Rascunho da Página do Formulário e da Página Inicial

# Resumo do Transcrição

Neste vídeo, o apresentador explica como criar um formulário de login utilizando React e Redux. Aqui estão os principais pontos:

1. **Estrutura do Componente**:
   - O componente é definido como uma classe (`LoginForm`) que estende `React.Component`.
   - O estado da aplicação (application state) será gerenciado pelo Redux, sendo necessário armazenar informações de e-mail e senha.

2. **Importações Necessárias**:
   - Importação do React e do componente necessário para class components.
   - Importação dos componentes `View` e `Text` do React Native.

3. **Implementação do Formulário**:
   - Dentro do método `render`, um template simples é retornado como placeholder para o formulário de login.

4. **Configuração do Roteamento**:
   - O roteador inicializa com a cena de login.
   - Um título "login" é adicionado ao cabeçalho, que pode ser removido para testes.

5. **Problemas e Correções**:
   - Um problema de "View is not defined" é corrigido com as importações adequadas.
   - Foi adicionado um espaço no topo do `Router` para evitar que o conteúdo do formulário fique detrás do cabeçalho.

6. **Criação do Componente Main**:
   - Um novo componente funcional chamado `Main` é criado, exibindo uma simples mensagem de "Bem-vindo".
   - A implementação do roteador é atualizada para usar o `Main` como a cena inicial, antes de retornar à `LoginForm`.

7. **Próximos Passos**:
   - O apresentador menciona que no próximo vídeo, irá abordar o estado do Redux e sua integração com o Firebase.

Este vídeo é uma introdução ao desenvolvimento de um formulário de login com React e Redux, focando na configuração de componentes e gerenciamento básico de states.

Então, essa página vai ser a página do formulário.
Esse cara aqui, essa cena.
Como a gente vai precisar amazenar informação sobre o e-mail e a senha,
a gente vai ter que usar o application state do Redux.
Por causa disso, vamos definir esse componente como componente de classe.
Tá bom? Então, vamos começar. Import React.
Vamos React, mas como é componente de classe,
vamos também importar o componente que está dentro do modo React.
Vamos distruturar assim.
Vamos definir a classe. LoginForm, que é o nome do componente,
sempre extends component para derivar o componente.
Vamos definir a função render, que é presente em todos os componentes
de classe do React.
Sempre retorna o template.
E vai ser alguma coisa.
Vamos só pôr um alvio aqui e dizer...
esse é o form de login.
E alguma coisa mais.
Só para servir de placeholder.
Vai saber que está funcionando.
No final, vamos exportar export default.
LoginForm, exportar o componente.
Então, assim, não vai dar problema com o React Native Router.
Ah, deu erro aqui.
View is not defined.
View não está definida.
Por que? Porque a gente esqueceu de importar
os componentes view e text do React Native.
Então, vamos lá, import.
O que? Vamos distruturar view e o text que está dentro do componente React Native.
Com isso, vamos lá e atualizar novamente.
O senote que está funcionando agora.
Só para você ver o que é que o navegador,
o React Native Router flux está fazendo aqui.
Então, eu vou para o arquivo Router.
A cena inicial é login, não é?
Componente loginform apareceu aqui, mas também apareceu essa barra com o título.
Na verdade, porque eu adicionei esse title login.
Se eu remover isso, salvar, vamos ver o que acontece.
O senote que é barra ainda aparece, mas não tem nenhum título.
Então, vou voltar, dar o login.
Esse cara é o que aparece aqui.
Centralizado na barra, o título, no header.
O senote que o conteúdo do formular está de trás da barra, aqui, header.
Então, para consertar esse problema,
um jeito é de você ir no Router,
no componente que a gente definiu,
e adicionar a propriedade aqui para o componente Router.
Eu acho que sim, style, para adicionar um estilo.
Está vendo um espaço de, antes do componente,
por exemplo, pode assinar padding top de 65.
Nesse caso, esse objeto, objeto com estilo,
eu estou adicionando padding para o topo.
Então, do topo, vai adicionar um espaço de 65.
Vou salvar, ver aqui o que acontece.
Agora, a gente vê tudo que é parte do login form,
esse é o form de login, e assim por diante.
Então, agora está tudo legal,
deixa eu checar o emulador do Android.
R e R.
Aqui também está OK,
embora que tenha mais espaço aqui para o Android,
mas está OK para o iOS.
Acabou?
Então, agora vamos definir também a cena do main.
Vamos lá para o main.
Main, como é o componente que não tem nada.
Talvez a gente pode começar com o componente funcional
e depois fazê-lo um componente de classe.
Não sei, agora só tenho um mensagem bem-vindo
para esse componente main, então só vou fazer isso.
Import React, componente funcional, com React.
E vou dar const main para o nome do componente,
definir a função de flash,
retorno templates, nesse caso é só um texto.
Bem-vindo.
Pois assim, pode botar um view se quiser,
mas eu só vou deixar o texto aí.
Export default main.
E, só isso, né?
Salva.
Então, oh, também esqueci de importar text do React Native.
Import text
from React Native.
Salva.
E agora vamos testar se está funcionando.
Vamos lá para o router.
Aquivo do router, em vez de fazer o login em seu inicial,
eu posso fazer o main em seu inicial.
Tá bom? Eu movi o initial do login para o main, né?
Então vamos salvar e ver o que acontece.
Agora o main vai ser até o inicial,
vai ser bem-vindo, mensagem.
Tudo ok? Aqui é o título main,
que vem dessa propriedade que a gente definiu.
E está tudo ok.
Vamos retornar o...
Vamos remover o inicial daqui e...
pôr de volta no componente login para seu inicial.
E a gente...
voltar para...
Tudo ok? Tá bom?
Então no próximo vídeo a gente vai...
começar a olhar no estado do Redux e ver como a gente vai fazer o spawn
para conectar com o Firebase.
Então vamos lá.


0005-07 Implementação do Rascunho da Página do Formulário e da Página Inicial

Explicação do Reducer de Autenticação

# Resumo do Transcrito

No trecho discutido, o foco é em como armazenar dados no estado do Redux, especificamente para uma cena de login. Aqui está um resumo das principais ideias apresentadas:

## Estado Inicial do Redux

- O estado do Redux será estruturado em um objeto que inclui:
  - `email`: Inicialmente vazio.
  - `password`: Inicialmente vazio.

## Funcionamento do Redux

- Ao digitar no campo de email:
  - Chamamos um *action creator*.
  - Disparamos uma ação que informa ao reducer sobre a modificação do email.
  - O reducer atualiza o estado com o novo valor do email.
  - Isso é feito a cada caractere digitado.

- O mesmo processo se aplica ao campo de senha:
  - Um *action creator* diferente para atualizá-la.
  - O reducer responde atualizando o estado conforme o usuário digita.

## Possíveis Adições ao Estado

- Considerações para incluir:
  - Mensagem de erro para autenticação falha.
  - Estado de carregamento para indicar a espera por uma resposta do servidor.

## Implementação

- O desenvolvedor sugeriu começar pela construção do reducer:
  - Criar um arquivo chamado `offReducer.js`.
  - O reducer será uma função exportada como padrão.

Esses pontos fornecem uma visão organizada do processo de gerenciamento de estado no Redux para um cenário de login. A estrutura e funcionalidade foram enfatizadas, juntamente com a importância dos *action creators* e do reducer na atualização do estado.

Então agora a gente precisa pensar como é que tipo de dados a gente vai armazenar no estado do Redux, né?
Nesse caso a gente tem a cena de login, a gente tem que digitar o email e digitar o acenha, né?
Então vai ter que armazenar o email, armazenar a senha, tá bom?
Então eu só vou botar aqui como objeto o que a gente quer que esteja no estado do Redux.
Nesse caso eu vou chamar isso de offReduce, alguma coisa assim.
E quando chamá-lo vai retornar o estado, essa peça de estado vai ser esse cara.
Então vai ter o email, né?
Initializar para vazio, também vai ter password, a senha, ah fica auto capitalizando, vai ser inicialmente vazio.
Então esse é o estado inicial que a gente vai ter.
E quando a gente digitar alguma coisa aqui, a gente vai chamar um action creator, tá bom?
É importante esse detalhe, quando a gente digita qualquer coisa, por exemplo no email,
vai chamar a função action creator que vai mandar uma ação dizendo para o reducer que a gente modificou o email.
Então reducer vai retornar o novo estado com qualquer coisa que você digitou.
Por exemplo, se eu digitei, sei lá, alguém, eu estou digitando e enquanto a gente estiver digitando,
o reducer vai ficar mandando o novo estado.
Cada caracter que eu digito vai ser enviado de novo, por exemplo, eu digito alguém,
arromba em, esse cara vai mandar aqui, quando eu estou digitando lá no formulário, por exemplo, aqui, formulário,
eu digito isso aqui, esse cara vai ser enviado pelo action creator, vai ser uma ação que vai ser enviada a todos os reducers,
mais isso é off reducer, vai ser um que vai lidar com isso e vai a enviar o novo estado com o email,
se alguém arromba em. E quando eu digitar a, a mesma coisa vai acontecer, esse cara vai ser enviado
via uma ação e o reducer vai pegar a ação e vai atualizar esse email.
Na verdade, vai criar um novo estado com o letra a, avogado, adicionado, tá bom?
E na maneira que a gente vai digitar, vai ficar mandando e vai ficar atualizando e mandando esse novo estado
que vai ser injetado ao componente, é bom?
Mesma coisa para o password, para a senha, vai ter outra função, outro action creator, né?
Quando eu falar action creator, eu vou referir a isso, é bom?
Que vai mandar action, sempre retorno a action, e se eu digitar o password assim,
se eu usar um, vai mandar para, vai chamar action creator, por exemplo,
mude o password, mude a senha, e vai ser mandado como action, o reducer vai receber essa action
e vai mandar o novo estado com o password atualizado para 1.
E a maneira que eu digito, vai fazer a mesma coisa, mesmo processo,
vai ficar mandando de 3, vai aparecer, vai atualizar aqui 3 e assim por diante, tá bom?
É claro que vai ter também erro se a gente não for autenticado,
nesse caso, depois a gente vai adicionar error, mensagem de erro,
e também talvez uma loading para dizer que a gente está carregando,
ainda está esperando a resposta do servidor, tá bom?
Nesse caso, vai ser false, true or false, nesse caso, vou estar em Defines,
alguma coisa assim, não depende, tá bom?
Então vamos lá e começa a fazer isso.
Vou fazer vou ao primeiro e vou ao reducer aqui.
Eu vou começar do reducer, você poderia começar da action creator,
vou começar do reducer, tá bom?
Eu vou criar um arquivo chamado of reducer.js, tá bom?
Reducer é só uma função, então você só precisa export default uma função, tá bom?
Eu posso botar function ou qualquer coisa, pode usar a função em flash, tá bom?


0005-08 Explicação do Reducer de Autenticação

Implementação do Reducer de Autenticação

# Resumo do Transcrição

Neste trecho, o autor discute a implementação de um `reducer` usando JavaScript, utilizando um exemplo prático para explicar o processo.

## Estrutura do Reducer

1. **Definição Inicial**:
   - O `reducer` receberá dois argumentos: `state` e `action`.
   - Inicialmente, será definido um estado inicial (`initialState`) como um objeto com propriedades:
     - `email` (inicialmente vazio)
     - `password` (inicialmente vazio)
     - `errorMessage` (inicialmente vazio)
     - `loading` (inicialmente `true` ou `false`)

2. **Retorno de Estado**:
   - É mencionado que o `reducer` deve sempre retornar o `state`, que pode ser uma nova cópia do estado.

3. **Tratamento de Ações**:
   - A estrutura do tratamento de ações é feita através de um `switch` baseado no tipo da ação (`action.type`).
   - São mencionados vários casos, além de um `default` para retorno do estado, se necessário.

## Combinação do Reducer

- O autor menciona a necessidade de combinar este `reducer` com outros, registrando-o como `offReducer` no `index` do reducer.
- O estado combinado pode ser acessado em componentes por `state.off.email` e `state.off.password`.
- A implementação também inclui o uso de `mapStateToProps`.

## Testes

- O autor termina a descrição verificando se a implementação está funcionando corretamente sem erros.

Este resumo captura os principais pontos discutidos sobre a estrutura e funcionamento do `reducer` no contexto apresentado.

Eu vou usar um zone de flash em vez de falar de function, vou colocar flash aqui, tá bom?
Sempre do reducer o primeiro argumento vai ser o state e segundo argumento action, ação.
Normalmente você inicializa o state aqui com o valor inicial.
Essa é a parte do novo version JavaScript, no s5 não tem essa definição de valor inicial.
Vou colocar initial state que é uma variável que eu vou definir aqui, const initial state.
Vai ser aquela coisa que a gente discutiu aqui, tá bom?
Esse cara aqui, então vamos lá, vamos botar primeiro a gente vai precisar amazenar o email.
Vamos inicialmente ser vazio e o password que a senha também vazio.
E depois a gente vai lidar com o erro, então vou só botar mensagem de erro como vazia também.
Ou a gente pode botar no, depende de como a gente vai fazer esse sistema.
Vou botar loading, vou deixar no por enquanto, talvez a gente mude.
Vai ser true ou false dependendo se estiver carregando ou não.
Tá bom? Esse é o state inicial que vai estar aqui.
Assim como está a gente precisa retornar o estado.
Um detalhe do reducer é que a gente sempre precisa retornar o estado, né?
Embora que seja um novo estado, uma cópia nova do estado.
Então sempre retorne, pelo menos sempre retorne o state.
Tá bom?
E depois a gente vai ter casos de tipo de ação, então vou botar um switch aqui.
Proaction.tip, aqui vai ter os casos, case, case, case, case, case, case, case, case, case, case.
Mas sempre o default, se quiser, não quiser deixar esse return state fora do switch,
você pode pôr na default aqui.
Depende de você.
Então tu faz estar aqui fora e não ter default como estar aqui dentro, como parte do default.
Vou deixar aqui dentro, tá bom?
Só assim salvar, tá tudo ok no reducer.
Claro que a gente vai ter outros estados que a gente vai precisar do tipo de ação
para lidar com retornar ao novo estado, mas vamos deixar isso para depois.
Tá tudo ok aqui.
Então o que a gente vai fazer agora?
A gente fez o nosso reducer, mas a gente precisa combinar com todos os outros.
Então vou no index do reducer.
Vou importar aqui, import, reducer, reducer, mesmo diretório.
E aqui vou tirar essas coisas aqui, vou botar authentication, e vai ser o quê?
Off reducer, só isso.
Então vou definir essa chave que vai se referir ao reducer, off reducer,
que esse cara aqui vai retornar a sua função aqui, tá bom?
Toda vez que a gente quiser acessar esse cara aqui, por exemplo, vai ter que se referir a
state.off.email ou password, por exemplo, state.offpassword.
E a gente vai usar isso no map, como é map state to props, né?
Se você se lembra dentro do componente, tá bom?
Tudo ok, a gente combinou.
Vamos só testar aqui para ver se me deu erro.
Tudo ok.
Tá bom?


0005-09 Implementação do Reducer de Autenticação

Componente Próprio de Botão no React Native

# Resumo do Vídeo

Neste vídeo, o apresentador está desenvolvendo um formulário utilizando React Native, focando na criação de componentes reutilizáveis.

## Agradecimento e Introdução
- O apresentador solicita aos espectadores que se inscrevam no canal do YouTube NBK Tutor.
- Ele menciona que está disponível no Twitter e GitHub como NBK-HOPE.

## Desenvolvimento do Formulário
- O foco atual é criar um formulário que envolve:
  - **Text Input**: Para digitar informações.
  - **Label**: Para mostrar texto.
  - **Botão**: Usando Touchable Highlight ou Touchable Opacity.

### Criação de Componentes Reutilizáveis
- O apresentador enfatiza a importância de criar componentes reutilizáveis para melhorar a estrutura do código.
- Ele planeja criar três componentes:
  - **Button**: Para o botão.
  - **Input**: Para a caixa de texto.
  - **Spinner**: Para mostrar carregamento.

### Estrutura de Pastas
- Uma nova pasta chamada `common` será criada dentro da pasta `src` para armazenar os componentes reutilizáveis.

## Implementação do Componente Button
- O componente `Button` é criado como uma função que utiliza `TouchableOpacity`.
- Vários aspectos do componente são discutidos:
  - Propriedades `onPress` e `children` para personalizar o funcionamento e texto do botão.
  - Estilização do botão e do texto, utilizando `StyleSheet` do React Native.

### Erros e Correções
- O apresentador identifica que esqueceu de importar o componente `Text`.
- Ele também observa que o texto do botão deve ser definido corretamente entre as tags do componente.

## Conclusão
- O apresentador ainda não testou o componente no simulador, mas se prepara para isso, enfatizando que há mais desenvolvimento a ser feito.

## Ações Futuras
- O vídeo segue para a integração do botão no formulário de login e ajustes adicionais de configuração e estilização.

Antes de continuar, eu gostaria de contar com seu apoio para continuar a fazer vídeos.
Por favor, subscreva o meu canal do YouTube,
NBK Tutor.
Amei-te-o, disponível nas redes sociais do Twitter e no GitHub,
como o usuário NBK-HOPE, NBK Hope.
Muito obrigado e vamos continuar.
Então, a gente acabou de definir o reducer para a autenticação.
E agora a gente tem que começar a fazer esse formulário.
Agora não tem nada, então se note nosso sketch aqui no wireframe,
vai precisar de quê?
Vai precisar do text input para digitar alguma coisa.
Vai precisar do text para mostrar texto.
Nesse caso vai ser o etiqueta, o label, para esse cara.
Vai precisar de touchable highlight.
Talvez eu use touchable opacity.
Vamos ver, um botão, sensible talk.
E é isso.
A gente poderia usar esse componente do jeito que a gente está.
Mas, na verdade, o que você quer fazer?
Normalmente a gente cria os nossos próprios componentes para o botão, para o input,
para o spinner.
Então, a gente vai começar a fazer os nossos próprios componentes
que vão usar o text input.
Se for o componente input, vamos usar o touchable opacity.
Talvez, se for o componente de botão e assim por diante.
Então, para ilustrar isso, a gente vai precisar do quê?
Nesse caso, deixa eu só fazer um novo aqui, aqui.
A gente vai precisar de...
Eu vou criar um componente chamado pattern para ser esse botão aqui.
Também vou fazer input para ser esse caixa de texto.
Vou fazer spinner, talvez, que vai ser um ícone de carregando, que vai aparecer.
Quando a gente clica, talvez, entrar o carrastar, vai ficar processando e enviar o pedido.
E, em vez de botão ainda aparecer, vai aparecer um spinner que vai ficar significando,
que está carregando ainda e essas coisas.
Então, vamos começar.
Vou para o meu editor de texto, o que?
Pasta src dentro do componente.
Vou criar outra pasta chamado comas.
A gente quer re-usar, utilizar novamente esses componentes.
Então, vamos criar common, criar button, vou criar input, vou criar spinner.
Então, a razão de gente ter uma pasta como é que esses componentes serão re-usáveis.
Então, você pode usar quantas vezes quiser e, talvez, até você pode importar para outros projetos no futuro.
Então, vamos ter esses componentes re-usáveis, re-usable components, inglês,
que vai servir de como se fosse os building blocks,
os blocos de construção para construir nosso aplicativo, ou outros que virão no futuro.
Então, vamos definir aqui o button.
Vamos botar aqui import react,
from react.
Vamos fazer componente funcional, tá bom?
O botão.
Então, vou fazer const button, uma função de flash.
Retornar o template aqui e export, default, button no final.
Nesse caso, eu vou usar qual?
Tem várias maneiras de fazer um botão src-fotoque no react, né?
Tem um touchable highlight, tem um touchable opacity.
Então, qual que a gente vai usar?
Vamos ver.
Vamos ver aqui.
Você pode escolher qualquer um quiser.
Eu vou escolher touchable opacity porque não fica aquele negócio do background, do fundo preto,
quando a gente clica.
Tá bom?
Então, vou usar touchable opacity.
Fecha.
Então, se você se lembra, o botão acertível, touchable opacity, vamos importar do react native.
Touchable opacity é parte do react native, tá bom?
E sempre tem um on press, né?
O que acontece quando você toca o botão, tá?
Nesse caso, eu vou receber o on press, como uma propriedade injetada a esse componente, tá bom?
O que a gente quer usar o botão assim, por exemplo?
A gente quer usar button on press, a gente vai passar qualquer coisa, a função que seja o on press desse cara.
Então, para fazer isso, a gente vai usar as props que foram dados.
Nesse caso, quando você cria um novo botão assim e passa essa propriedade on press,
vai aparecer dentro desse argumento aqui da função de flash, como props, né?
E esse cara vai ser acessado como props.onpress, né?
Recordar aqui, pô, aqui.
Vai aparecer assim, tá bom?
Mas como eu posso destruturar esse cara, se eu quiser?
Se não quiser digitar props, eu posso tirar esse props daqui e botar on press aqui, tá bom?
Mesma coisa.
Então, esse cara, passado com propriedade, vai ser aqui.
Esse cara aqui, vai aparecer aqui.
Tá bom?
Dentro do botão, a gente vai ter alguma coisa, o texto, né?
Vamos botar um text.
E a gente pode definir de várias maneiras como esse texto aqui vai ser injetado no componente.
A gente pode botar, talvez, uma etiqueta assim, click me, uma coisa assim.
Essa é uma das maneiras.
Como propriedade, eu posso também botar como um filho do componente,
maneira que eu vou digitar assim, por exemplo.
A gente pode fazer assim.
Por exemplo.
Então, essa é outra maneira.
Então, eu vou fazer dessa maneira, tá bom?
Então, eu vou botar o texto que é dentro, entre as tags, entre os componentes, vou botar aqui dentro.
Tá bom?
Mas como é que eu vou pegar essa informação e pôr aqui dentro desse texto?
Se não é propriedade.
Não é propriedade.
Mas tem um detalhe aqui.
Todo componente, você pode ter acesso aos filhos, aos children, né?
Esses caras aqui, usando props.children, tá bom?
Nesse caso, vai estar dado aqui no props.children, tá bom?
Vai ser props.children, esse cara aqui.
Como eu já destruturei esse cara, eu também vou destruturar children.
Então, não precisa digitar props.children, tá bom?
É assim que a gente vai pegar esse cara aqui.
E é assim que a gente vai usar o botão.
Esse componente prop que a gente está criando.
Se a gente também deve adicionar uns estilos aqui para esses caras.
Então, a maneira de fazer isso, vamos ver aqui.
Vamos adicionar o estilo para o texto.
Ah, esqueci de um detalhe, desculpa.
Esse children aqui tem que estar dentro do color libre.
Então, não vai ser substituído pelo valor da variável.
Se botar children, vai aparecer o texto children,
em vez do valor da variável children.
Então, esqueci desse detalhe.
Bom?
Então, com isso, deixa eu só comentar esse negócio,
que é só de referência para você ver como a gente vai usar esse componente.
Outra coisa, estilos. Vamos lá.
Vamos dar um estilo do texto.
Style. Vamos botar styles.
Sei lá, que a gente pode chamar de qualquer coisa.
Eu vou chamar, sei lá, textile.
Uma coisa assim.
Tá bom?
Ou text, style. Defende você.
Tá aí o estilo. Não definimos ainda.
Vamos também adicionar o estilo para o touch.
Vou para a próxima aqui.
Vou botar style.
Styles.
Vamos botar o quê?
Bota um style, sei lá.
Tá bom?
Agora a gente tem que definir essa variável, chamando styles.
Vamos aqui const styles.
Vamos usar stylesheet.
Stylesheet do react native.
stylesheet won't create.
Passe um objeto com todos os estilos.
Esse caso, button style.
Passe um objeto.
Ainda não defini.
Vírgula ou outro estilo, textile.
Ainda não defini. Deixa aí.
Tá bom?
São detalhes, a gente tem que portar stylesheet.
Vamos aqui.
Stylesheet import do react native.
Tá bom?
Agora, se quiser, pode definir seu próprio style.
A gente não sabe ainda como é que vai parecer esse botão.
Vamos definir alguma coisa aqui, sei lá.
Vamos para o textile font size, o tamanho do text para esse cara.
Vamos para, sei lá, um pouco.
Talvez a 18, 16, sei lá.
Você escolhe.
Vou botar a 18 aqui para ver o que acontece.
Talvez seja muito grande, não sei.
Também a gente pode fazer o texto do botão ser negrito, font weight, bold, por exemplo.
Se quiser mudar a cor, pode usar color.
Se quiser centralizar o texto do botão, você pode usar o align self.
Para ser center.
Tá bom? Uma das maneiras.
Agora para o botão, vamos adicionar o estilo.
Só rapidinho aqui.
Vamos ver.
A gente pode adicionar uma borda.
Se quiser.
Um.
E arredondar, sim.
Para arredondar as bordas.
Bota quatro.
Se quiser uma margem, sei que sabe, se quiser uma margem na direita, esquerda, essas coisas.
Vamos só deixar assim.
Ainda não vemos como vai aparecer.
Então criei o botão, botei um estilo inicial.
Vamos testar esse componente.
Vamos aqui, vou no meu simulador, o Xcode.
Para testar isso, vou no meu login form, tá bom?
E vou importar aqui.
Import.
Button from.
Está dentro do diretório common.
Assim.
Vamos usar aqui dentro.
Entre esses re-re-re eu vou botar o button.
Dessa maneira.
Tá bom?
Detalhe que a gente tem que mandar o WordPress, que a gente não...
Eu vou botar uma função de flash aqui, retorno no, então não vai acontecer nada.
Atualizando.
Ah, text not the fine.
Por quê?
Vamos voltar o botão?
O que a gente esqueceu?
De importar o text, né?
Então vamos adicionar.
Text aqui, se notar.
Adicionei o text importado do react-native.
Salva um b.
Tá aí.
Se não acho que tem um botão, mas não tem nada, porque a gente não pode text.
Se notar aqui a gente tem que usar assim e botar o texto do botão entre as tags, né?
Então vamos lá, vamos botar aqui.


0005-10 Componente Próprio de Botão no React Native

Implementação da Página do Formulário com Button e Input

# Markdown Summary

## Summary of Transcript

The transcript is a tutorial on creating a button and an input component in React Native. Here's a breakdown of the main points discussed:

### Button Creation
- A button labeled "Entrar" is created.
- The button's style is modified, including border radius, text alignment, and font settings.
- Padding and margin are added to improve spacing.
- A second button "Cadastrar" is created similarly.

### Input Component Creation
- React is imported to create an input component.
- The `TextInput` component is utilized from React Native.
- Properties such as `value`, `onChangeText`, and `placeholder` are used to manage the input.
- The input is styled with font size, height, padding, and margins for better appearance.
- A label for the input is included, and its styles are defined.

### Additional Points
- Components are returned inside a `View` to manage layout as React requires a single parent element.
- The transcript highlights the importance of destructuring props for cleaner code.
- Errors (such as missing imports) are addressed during the coding process.
- The video ends with the promise of further explanation on how to align the label and input side by side in future content.

---

This summary captures the essential aspects and progression of the tutorial shown in the transcript.

do botão entre as tags, né? Vamos lá, vamos botar aqui. Eu vou tirar esse barra e vou botar
barra, botando aqui e vou botar o texto. Eu vou de botar o quê? Eu vou botar entrar, tá bom?
Entrar, vamos lá.
Tá aí, aparecendo o botão. Deixa eu clicar para aparecer nada, né? Fica só um pouco
branco, assim, transparente, mas não acontece nada porque o WordPress retorna novo. Então,
vamos ver o estilo aqui só para dar uma revisada. Então, o estilo do botão é button style,
que a gente aplicou para o tote ball passage. Tem uma borda de 1, que esse cara aqui, e é
redondado em radius de 4, né? Eu sei notir que não é retangular, a borda é redondada,
redondada, retangulares, tá bom? Dentro do texto, do botão aqui entrar, a gente deu
a line self center para centralizar esse texto, tá bom? Em vez de aparecer aqui, na esquerda,
aparece no centro. E também é negrito e com fonte 18. Se você quiser adicionar mais style,
por favor. Agora, com o botão, talvez a gente adicione um padding para não ficar tão grudado
como os bordos, então, vou botar no button style. Talvez um padding no topo para ver 10,
padding no bottom de 10, vamos ver o que acontece.
Em cima e embaixo, né? Aí tá melhor assim, né?
E aí?
Como esse botão tá grudado aqui no direita esquerda, se você quiser botar a margem, margin left,
de, sei lá, 4, 5, 6, 5, margin right, 5 também, para não ficar colado com a tela, o lado da tela,
tá? E um pouquinho de espaço.
Você pode também definir a color de fundo com black ground color e assim por diante.
Eu vou deixar assim, talvez a gente mude o estilo depois, quando a gente precisar. A gente fez o
botão, agora a gente vai fazer os outros componentes, o input, por exemplo. Antes disso,
botão aqui de cadastrar, como a gente tinha no nosso wireframe, entrar e cadastrar, tá bom?
Então, o que eu vou fazer? Eu vou aqui, eu vou tirar esses negócios aqui, ou talvez deixe aí só para ver
o que acontece e botar cadastrar. Copie aí, senão, copiei o button, on press, não tem nada ainda,
e tá aqui o texto.
Não é que tá grudado, a gente vai lidar com o estilo depois, tá bom?
Vamos lá, vamos fazer um input agora. Esse input vai ser o cara que, a caixa de texto, né?
Vamos lá, import, react, from react. Vamos fazer com que funciona agora, tá bom?
Vamos lá. Input, vai ser props, tem algumas propriedades injetadas,
retorno o estilo, no estilo, vai ser o template, né? Algum coisa, a gente vai usar o text input, tá bom?
Vamos usar o text input.
Descaso e vamos lá. Export, default, input. Coisa assim.
Então, vamos importar text input, que a gente ainda não tem, do react native, né?
Dentro do modo do react native, destruturar o text input.
No modo text input, o text input tem um key.
Em várias opções, a gente pode adicionar, tem placeholder, tem o estilo, tem um value, one change text, né?
Mas o que a gente se importa é o mais é esse key, é o value, né?
E é o on change text.
Então, toda vez que a gente diga alguma coisa nova, chama essa função que é on change text,
que é vai se passar com propriedade.
E o valor, a gente pode ligar ou linkar o valor desse caixa de texto com alguma coisa, alguma variável.
Tá bom?
Nesse caso, eu vou passar como props, então vou botar props.vari,
e props.onchange text, tá bom?
Deixa eu aumentar a tela pra você.
Então, como eu tô usando props.algumc coisas, props.out,
mais de uma vez, eu talvez destrutura dentro do props.
Então, em vez de falar props, eu vou destruturar o value, onchange text, assim,
em vez de tirar isso, eu vou remover.
Eu apertei comando D no Atom, que eu tô usando Mac, pra acelercionar os dois no mesmo tempo, e dela tá.
Tá bom?
Então, vamos dar um estilo também, style, style.algumc coisas,
sei lá, input style.
Como essa linha já tá ficando longa, eu vou quebrar em múltiplo.
Quebrim um, adiciona de intentação, assim, o diante, esse cara aqui vai ficar alinhado com esse
text input Open Tag, do abrir aqui, que eu tinha abrido.
Tá bom?
Vamos lá, adicionar o estilo, vamos const styles,
vamos usar styles.setup.create, passo um objeto,
e com o estilo, input style, forward style.
Ainda não sei ainda mais, quero importar esse cara dentro do reactnative,
importado do reactnative.
Tá aí, salvar.
Vamos definir esse estilo aqui, sei lá, o que a gente quer?
Vamos adicionar um font size, sei lá,
botar um era 18, né?
Vamos botar 20, sei lá, o que acontece?
Ah, desculpa, não, é, 20.
Vamos ver se parece alguma coisa.
Não tinha borda, né?
Ah, porque a gente não usou ainda, tem a gente definiu o componente,
vamos lá usar, vamos lá, o dog inform, importar aqui, import, input from common input, né?
Fiz ok?
Vamos usar aqui, antes desse botão que eu botar input,
not to precis to do value também,
precisar o value, alguma coisa, vou dar um change text, alguma coisa, né?
Sei lá, vou estar
alguma coisa aqui só pra ver, alguém, email, com,
um change text, nada ainda, vou estar no, função retorno.
Então tá aqui, alguém, email, com, sei o que,
mas parece que não a gente tá nada, porque tá,
então a gente tem que definir a altura do componente,
se você quer botar um height, vou ver se o que acontece, botar a altura de 30.
Eu botei, vou no input, no estilo, botei uma altura só pra ver, tá bom?
Então agora tem uma altura, você note aqui, agora dá pra digitar, né?
Você note que quando eu delato, ele volta o valor anterior, porque o ontem anti-text não
tá definido e o valor é sempre a constante, alguém, email, com, que a gente passou, sempre esse valor.
Pode adicionar height, tem também esse line height, quero ver o que acontece,
vou botar um line height aqui de 30 pra ver se dá no mesmo.
Então flex 1,
ainda tá um problema, né?
Qualquer maneira, eu removi isso, deixa o line height aí, botar de volta pro height só pra ver,
a gente pode mudar o estilo depois pra ficar melhor.
Se quiser isso não, pare pro esquerdo e direito também, como a gente fez o botão, pode pôr, tá bom?
Padding left,
quanto é que a gente pôs? Vamos botar aqui, padding left, ah 5,
ó,
ah, sei, ok, aqui na verdade é o padding pra dentro do caixa de texto,
se tivesse uma borda ia ficar muito colado com a borda, se quiser adicionar isso, vou botar um 5,
5 também.
Ah, esqueci de o quê? Padding right, ah, fiz um erro aqui, né?
Type, erro de escrita, né?
Aí tá melhor aqui, zulke, tem um padding ali,
nem que tenha borda, não dá pra ver, mas é melhor.
Então tá funcionando, a gente volta pro estilo depois, tá bom?
Mas uma coisa que a gente tem que fazer, vamos voltar aqui, a gente nota que tem esse etiqueta aqui,
level do lado do estilo, a gente pode fazer separado ou pode botar tudo dentro do input,
depende de você. Então o que é que eu vou fazer? Vou botar junto, tá bom?
Se a gente passar como propriedade nesse level aqui, a gente vai adicionar do lado desse cara.
Como a gente vai fazer isso? Vamos voltar aqui, do lado do text input, eu vou botar um text,
que vai ser o level, né?
É etiqueta, sei lá, vou botar email aqui, mas a gente vai mudar antes,
a gente vai pegar isso do propriedade.
Então a gente vai chamar esse cara de level,
note que a gente tá retornando dois componentes, isso não é permitido no react,
você tem que retornar somente um, então vou botar um view pra
botar esses dois caras, e agora a gente tá retornando somente um view,
mas tem vários dentro, então tem que pôr view se retornar componentes múltiplos, né?
Na gente, esse texto aqui, a gente pode pegar da propriedade,
então vou fazer uma propriedade chamada props,
vamos passar o label, tá bom?
E vai ser do props label, eu vou reenvoie esse props,
destruturando aqui, eu vou botar o label.
Também se a gente adicionar style, styles, vou botar label,
style, por exemplo, label style, ah, esqueci de botar isso,
de adicionar os curly braces, não vai substituir o valor da variável.
Vamos definir o style, label style, sei lá, vou botar um font size de que? 20 também.
Se quiser adicionar padding ou alguma coisa, sei lá, vou botar padding.
Left, 20, vamos ver o que acontece, vou atualizar, tá bom?
Mas não tem um label, então vamos adicionar, vamos botar no login form.
Vamos do login form.
Esse cara tá ficando muito long, então vou quebrar em nines separados aqui, tá bom?
Vou botar aqui label, vai ser alguma coisa, sei lá,
qual era aqui, email, email.
Salvar, vou atualizar.
Ah, view not defined, você já sabe que é o problema, né?
Esquecemos de importar, vamos botar para o input, a gente não importou o que?
View, primeiro é esse.
Nós também que a gente nem importou o text, que nem chegou ainda, que passou aqui.
Então vamos botar view e text, do react native.
Salvar e vamos ver.
Aí, pareceu o email aqui, o texto e pareceu a caixa de texto para digitar.
O problema é que eles não estão lado a lado, né?
Por quê?
Vamos aprender, descobri no próximo vídeo.


0005-11 Implementação da Página do Formulário com Button e Input

Conserto de Estilo Deixando Rótulo e Caixa de Texto Lado a Lado

# Resumo do Transcript

O texto discute a disposição de elementos em uma interface usando Flexbox. A configuração inicial possui uma `flex direction` definida como "column", fazendo com que os itens (neste caso, um campo de e-mail e uma caixa de texto) sejam organizados verticalmente. O autor propõe alterar a `flex direction` para "row" para que os elementos apareçam lado a lado.

## Principais Pontos

1. **Padrão Flex Direction**:
   - O padrão é `column`, resultando na disposição vertical dos elementos.
  
2. **Alteração para Row**:
   - Para que os elementos fiquem lado a lado, a `flex direction` deve ser mudada para `row`.

3. **Definindo Estilos**:
   - Sugere-se criar um estilo para a view (por exemplo, `container style`) onde a `flex direction` será ajustada.

4. **Distribuição do Espaço com Flexbox**:
   - O autor explica como dividir o espaço em partes:
     - O label deve ocupar 1/3 do espaço (com `flex 1`).
     - A caixa de texto deve ocupar 2/3 do espaço (com `flex 2`).

5. **Cálculo e Aplicação**:
   - Ao aplicar os valores de `flex`, a soma total será 3 partes (1 para o label e 2 para a caixa de texto), resultando na disposição desejada.

O conteúdo se concentra na modificação do layout usando Flexbox para que os elementos sejam dispostos horizontalmente em vez de verticalmente.

Então, o e-mail e a caixa de text não estão lado a lado.
Por quê?
Por causa daquela view aqui, essa view tem puxido padrão a flex direction column, tá
bom?
Deixa eu botar comentário aqui.
Flex direction column é o padrão.
Isso significa que os itens vão aparecer em cada linha, por exemplo, e-mail vai ser um
item e depois na outra linha vai aparecer o outro item e assim por diante.
Se a gente quiser que esses caras apareçam lado a lado na mesma linha, tem que mudar
flex direction para row, tá bom?
É isso que a gente vai fazer para esse view aqui.
Então vamos lá, vou recortar esse negócio.
Se você quiser, podemos definir o style aqui mesmo ou fazer um estilo para view, tá
bom?
Então vamos lá, style, sei lá, vou botar styles, ponto o que?
View style, por exemplo, container style, qualquer coisa.
Vamos definir esse cara.
Container style, vamos aqui, container style.
Lembra que recortei flex direction?
É aqui que a gente vai por.
Salvar e vamos ver o que acontece.
E agora, cadê?
Eles apareceu a caixa de texta.
Então a gente tem que usar o flex.
Se você não sabe do flexbox, então esse cara aqui está ocupando tudo.
A gente tem que fazer com que o label ocupe, por exemplo, um terço do espaço de toda
a linha e para caixa de texta, a gente ocupa dois textos.
Então se você somar tudo, tem três partes, né?
Dividem três partes, um, dois, três.
Então adicione flex um para o email e flex dois para a caixa de texta.
Significa que se na linha tiver três partes, o flex dois vai dizer que ocupe dois textos
de todo o total, né?
Então flex dois para a caixa de texta.
Aqui no input style, que é a caixa de texta, vou adicionar flex dois e para o container
style vou adicionar, desculpa, e para o label style vou adicionar flex um.
No dois, mais um é três, então vai ser três partes.
O input caixa de texta vai ocupar dois textos e o label vai ocupar um terço.
Tá bom?
É isso que apareceu.


0005-12 Conserto de Estilo Deixando Rótulo e Caixa de Texto Lado a Lado

Componente Próprio de Spinner Com o Uso de ActivityIndicator

```markdown
# Resumo do Transcript

O transcript discute a implementação de um componente de carregamento (spinner) em um aplicativo utilizando React Native. 

## Tópicos Principais

1. **Estrutura Inicial**:
   - Começar com a configuração de campos de e-mail e senha.
   - Mencionar um spinner que deve ser implementado.

2. **Implementação do Spinner**:
   - O spinner deve ser utilizado para indicar que uma busca está em andamento, em vez de apenas mostrar a palavra "carregando".
   - A utilização da propriedade `ActivityIndicator` do React Native é sugerida para representar o estado de carregamento.

3. **Configuração do Componente Spinner**:
   - Importar `ActivityIndicator` do React Native.
   - Definir que o tamanho do spinner pode ser ajustado via props ou utilizar um valor padrão ("large").
   - Sugestão de centralização do spinner usando estilos específicos (`justifyContent` e `alignItems`).

4. **Teste do Componente**:
   - Importar e utilizar o spinner em um formulário de login.
   - Realizar ajustes necessários no import e no estilo para evitar conflitos que causariam problemas de exibição.
   - Confirmar que o `ActivityIndicator` aparece corretamente ao testar.

Este é um resumo da criação e estilização de um componente spinner em um projeto React Native.
```

Vamos continuar, depois se a gente quiser a gente pode ensinar mais estilos, tá bom?
Então a gente tem um e-mail e tem alguma coisa para digitar.
Agora, a gente também vai ter outro para o password, né, para a senha.
Primeiro, vamos ver o spinner aqui. Deixa aqui de lado por enquanto, tá bom?
Depois a gente vê como vai acontecer um botão para o spinner. A gente vai fazer um negócio que você não sabe o spinner é.
Você deixa estar fazendo uma busca.
Esse negócio aqui, essa imagem de carregando, esse aqui, tá bom?
Esse negócio que vai aparecer. A gente quer fazer isso em vez de mostrar somente a palavra carregando.
Vamos lá.
Vamos mudar o report react, from react.
Tá bom? Vamos fazer com o spinner, eu defini props e exportar default spinner, né?
A gente vai retornar o template. Mas o que a gente vai retornar?
Vamos retornar o chamado activity indicator, tá bom?
É um negócio de react native aqui, se você for activity, deixa eu clicar aqui get started.
Activity indicator, esse componente aqui.
Vai mostrar de carregando, tá bom?
E um corte que você quiser olhar, mas o modo é activity indicator dentro do react native.
Então vamos lá.
Vamos colocar activity indicator.
Você tem uma propriedade do tamanho, size, se quiser adicionar.
Depende de você se você quiser adicionar com propriedade para o usuário poder selecionar o size ou não, tá bom?
Deu.
Se você quiser, pode pôr o size aqui, se não quiser, só põe assim, tá bom?
Eu vou botar a sódia, só para aparecer.
Então o size vai ser do props.size.
Se for dado ou não, se não for dado, eu vou botar o padrão.
Por padrão vai ser Lorde, tá bom?
Esse aqui diz, se esse aqui for definido, use esse valor, se não use Lorde.
Então vai ser dentro do props.
Se quiser dar uma destruturada para não poder falar props.pode fazer.
Então vamos ver lá isso.
Esse size aqui é esse size aqui.
Então você vai precisar importar esse cara do react native.
Activity indicator.
Do react native, tá bom?
No maneiro que está aqui, esse cara pode parecer qualquer local.
Não vai ter nenhum estilo assim de alinhado esquerdo e direito, alguma coisa.
Mas se você quiser adicionar alinhamento, a gente pode botar um view aqui.
Vamos para o view com o estilo spinner style, sei lá.
Importa view do react native.
E aqui define o estilo const style, style sheet, create.
Passa um objeto, folha de estilos, spinner style.
Se quiser dar um justify content, senta para centralizar o cara.
Se não te justifica content, se o flex direct por padrão é column, esse cara vai alinhar verticalmente no centro.
E para alinhar horizontalmente, você usa line items.
E dá um flex zoom só de leve aqui.
Vamos ver o que acontece.
Vamos voltar aqui para o nosso login form para testar o componente.
Vamos importar aqui port spinner, from common spinner.
Use ele em algum local, sei lá, vou colocar aqui spinner.
Não vou dar size, vai padrão ser default.
O default vai ser o large, se não der com propriedade aqui.
Vamos lá testar.
Ah, style sheet não definido, esqueci de importar style sheet.
Aqui, desculpa, style sheet do react native.
Vamos lá.
Está aí, aparece esse cara aqui, está vendo?
Se não acho que está em cima dos re-re-re, não sei o que.
Porque o flex, o outro cara não tem flex, então está dando um conflito aí.
Mas está ok.
Tudo cool.
Isso que é o active indicator, só para indicar que está carregando.
Está bom?


0005-13 Componente Próprio de Spinner Com o Uso de ActivityIndicator

Aprimoração de Código: destructuring e Módulo de Componentes Reutilizáveis

# Resumo do Código

Neste discurso, o autor aborda melhorias no código, especificamente na maneira como os componentes `button`, `input` e `spinner` estão estruturados e importados. 

## Melhoria na Importação de Estilos

1. O autor começa falando sobre a utilização de estilos em um arquivo `styles.txt` e sugere a destruturação para simplificar as importações.
2. Exemplifica removendo importações repetidas e utilizando destruturação para os estilos.

## Destruturação dos Componentes

1. Repete conceitos de destruturar no componente `input`, removendo importações desnecessárias.
2. Aplica a mesma lógica ao `spinner`, com a opção de manter a importação se o uso for mínimo.

## Agrupando Componentes em um Módulo

1. O autor propõe criar um módulo chamado `common` para simplificar importações dos componentes.
2. Instruções para criar um arquivo `index.js` que exporta todos os componentes (`button`, `input`, `spinner`) com uma sintaxe que usa exportação de objetos, ao invés de exportações default.

## Exemplo de Exportação

- Os componentes devem ser exportados de forma a referenciá-los por chaves:
  ```javascript
  export const button = ButtonComponent;
  export const input = InputComponent;
  export const spinner = SpinnerComponent;
  ```

## Importação Simplificada

1. Após as alterações, os componentes podem ser importados de uma só vez a partir do módulo `common`:
   ```javascript
   import { button, input, spinner } from 'common';
   ```

2. O autor verifica que as mudanças estão corretas e o sistema continua funcionando sem erros.

## Conclusão

A melhoria proposta facilita a manutenção do código e simplifica as importações, mostrando a eficácia de boas práticas de programação.

Antes de continuar eu gostaria de ir por maiorar o nosso código aqui.
Nesses componentes que a gente fez, a gente fez button, fez input e fez spinner.
Vamos para o button aqui.
Se dá uma olhada aqui, eu estou usando styles.txt, botbuttonstiles.txt.
Se você usar mais de uma vez pode destruturar também.
A mesma maneira que eu fiz aqui você pode fazer com os styles.
Por exemplo, pack.const destruturar, botstiles.txt.
Está onde? Está dentro dos styles.
Então, botstiles aqui.
Então, não precisa mais digitar style.txt.
Vou pegar, selecionar todos e remover.
Fica melhor assim, né?
Só isso.
Vamos fazer a mesma coisa com os outros.
Só para ver, vamos testar se ele não deu o pau.
Se ele não deu o erro aqui, testando.
E ainda está funcionando.
Vamos voltar, vamos fazer a mesma coisa com o input.
Vou no input.
Se esse cara está usando três vezes, vamos lá.
Antes do return, mudar const.
Destruturar container style.
Label style.
E o input style.
Do styles, né?
Esse cara aqui.
Esse cara aqui é esse.
Vamos passar e vamos remover esse cara aqui.
Não precisa mais.
Está aí.
Mesma coisa com o spinner.
Se quiser.
Ah, nem estou usando muito, mas se quiser deixar, só eu fiz uma vez, pode deixar, né?
Está bem?
Então, outra coisa que eu queria fazer é te mostrar como
usar esse,
fazer nossos componentes
serem destruturados de algum módulo.
Fazer o módulo para a gente.
Porque a maneira que a gente está importando aqui,
a gente tem que importar cada componente.
É uma linha,
mas seria legal a gente poder fazer isso aqui, né?
A mesma maneira que fazer lá.
Para fazer isso, o que é que eu vou fazer?
Eu vou pegar esses caras, todos, dentro do common,
e vou botar dentro de um módulo, chamado common.
Para fazer isso, como é que eu vou fazer?
Primeiro, eu vou fazer um index.
Index.js.
Aqui que a gente vai exportar todos os caras
com um módulo todo, tá bom?
Então, eu vou precisar do button
input e spinner.
O que a gente vai fazer? A gente vai dar export,
star, tá bom?
Star significa tudo.
Vamos exportar do...
do arquivo, do button, do input,
e do spinner, cada linha, tá bom?
Então, from, qual é o arquivo do button?
Mesmo diretório, button.
Faz a mesma coisa com o input.
Star from input.
Sport star from...
spinner.
Mas tem um detalhe, você tem que modificar os arquivos
para exportarem, não default,
mas exportarem como se fosse a chave, tá bom?
Você tem que exportar com a chave button,
chave input, chave spinner.
Tá, vamos no button aqui,
no final não pode mais fazer default,
desse jeito aqui,
para poder funcionar do jeito que a gente quer.
A gente tem que fazer assim, export,
passa um objeto, tá bom?
Exportar um objeto cuja aqui a chave,
o propriedade button,
vai ser esse cara aqui, o componente,
vai ser o button.
Então, eu estou me referindo a chave button,
vai referir ao button, que esse cara é esse
componente aqui, tá bom?
Faz a mesma coisa em todos os outros
arquivos dentro de como.
Como eu estou usando o S6,
não preciso de estar duas vezes a mesma coisa,
posso tirar esse negócio que vai ser a mesma coisa, tá bom?
Mas não se confunda,
se que é a mesma coisa que esse.
Então, vamos botar na mesma linha, se quiser,
assim, fica mais melhor de se ver.
Faz a mesma coisa com o input,
no final, fez de fazer default,
faz um objeto cuja chave é input,
e o valor é também input.
Mesma coisa em spinner.
Passa um objeto exportado com a chave spinner,
e o valor também é o spinner.
Dessa maneira, esse index aqui
vai exportar tudo e vai dar um objeto assim,
por exemplo, vai estar button, vai ser o button,
vai dar o input, vai ser o input,
e vai dar o spinner, e o spinner, né?
Que esse cara vai ser ferido,
e o button vai dar o input,
e o spinner, e quando a gente for importar,
a gente só importa assim, import,
button from common.
E é assim que a gente vai fazer nos outros arquivos.
Então, vamos lá,
vou recortar isso,
tirar isso aqui, deixa aí, salvar,
vou voltar o login form e ver se tem esses três caras,
o que é que eu vou fazer?
Import button, import input,
e o spinner tudo ao mesmo tempo from common.
Como é no index, não precisa digitar index.
Desses jeitos e sal, então,
não precisam digitar muitas vezes a mesma coisa.
Só fazer isso, button input spinner do common.
Vamos salvar, ver se não deu algum erro.
Ainda funcionando, tudo ok,
então ficou muito melhor de importar os nossos componentes.
Por isso é só por esse vídeo.


0005-14 Aprimoração de Código: destructuring e Módulo de Componentes Reutilizáveis

Caixa de Texto para a Senha, Conexão de Redux com connect e mapStateToProps

```markdown
# Resumo do Transcript

O criador do canal de YouTube **NBKTutor** pede apoio para continuar a fazer vídeos e menciona suas redes sociais, incluindo o Twitter e GitHub sob o nome **NBKHOP**.

## Desenvolvimento do Aplicativo

- **Aprimoramento do Código:** O código foi refinado para facilitar a importação de módulos com uma única linha de código.
- **Elementos Criados:** Foram criados um input para email, um input para senha (password), e botões de "Entrar" e "Cadastrar". Também foi mencionado um spinner que não será utilizado ainda.
- **Remoção de Texto:** O criador removeu textos desnecessários do componente `loginform.js`, mantendo apenas os inputs necessários.

## Funcionalidade dos Inputs

- **Input de Senha:** O problema em que a senha era visível foi abordado. A propriedade `secure text entry` foi adicionada ao input de senha para ocultar o texto digitado.
- **Redux Integration:**
  - O estado do aplicativo é gerenciado pelo Redux.
  - Para conectar o componente ao Redux, foi mencionado o uso da função `connect` do `reactRedux`.
  - Foram definidas funções como `mapStateToProps` para conectar os inputs do formulário ao estado do Redux, permitindo que os valores de email e senha sejam utilizados diretamente do estado gerenciado.

## Ação para Alterar o Estado

- **Criando Action Creators:** Para atualizar o estado do Redux com os novos textos digitados nos inputs, será necessário criar um action creator.
- **Implementação da Função:** A função do action creator foi iniciada, que irá manejar a mudança do estado do login e email com base no texto de entrada.

## Nota Final

O código ainda não está completo, e o criador do vídeo fornece instruções sobre os próximos passos para concluir a implementação do formulário de login e sua integração com Redux.
```

Antes de continuar, eu gostaria de contar com seu apoio para continuar a fazer vídeos.
Vou falar sobre o subscreva ao meu canal do YouTube, NBKTutor.
Também estou disponível nas redes sociais, NBK Hope, no Twitter e também no GitHub, NBKHOP.
Então, muito obrigado e vamos continuar.
A gente terminou a dar uma aprimorada no nosso código.
A gente aprendeu a fazer o nosso módulo para fazer o import muito mais fácil e só em uma linha.
Agora, a gente pode prosseguir para continuar a fazer o aplicativo.
A gente fez esse input, a gente fez o botão button e a gente também fez o spinner.
Vamos fazer essa cena e continuar.
Entrar, carastrar, email e assim.
Vamos só deixar isso certinho.
Vamos remover esses textos do loginform.
Agora estou no loginform.js, removi esses textos, deixei o input para o email também.
Vou dar outro input para o password, para a senha.
Vou quebrar a linha label, vou chamar de password.
Se você quiser para chamar a senha.
E o value vai ser alguma coisa que eu vou definir depois, se eu quiser botar alguma coisa agora.
Só para deixar algo lá.
Onde change text, ainda não definimos, vamos botar no e fechamos o input.
Um botão de entrar, botão de cadastrar, remove esse texto aqui, esse spinner também, não vamos precisar ainda.
Vamos dar um refresh, atualizar e ver o que acontece.
Está tudo ok aqui, nem que esteja o estilo não é muito legal, mas você vê que já está funcionando.
Há uma coisa a notar, que a senha aqui não está mostrando a senha.
Isso é um detalhe que a gente precisa ajeitar no nosso input.
Então, vai para o input aqui.
Para o text input, tem uma propriedade chamada secure text entry,
que se você adicionar para o value para ser true,
se você só adicionar isso aqui, a mesma coisa de true, não precisa dizer true, é implícito.
Se eu adicionar, por exemplo, você vai ver o que acontece com o nosso input.
Fica parecendo não, não mostra mais.
Para isso, que a gente só quer para a senha, a gente pode passar esse cara com uma propriedade,
secure text entry do props, props want secure text entry.
Nesse caso, a gente pode destruturar do props aqui.
Vamos adicionar aqui, secure text entry.
Você não acha que a linha está ficando um pouco longa, mas vamos deixar aqui.
Tira esse cara e, por padrão, se não passar em text entry, eu vou botar como se fosse false.
Eu vou botar falso, se eu não passar secure text entry.
Vamos ver o que acontece. Todos vocês falsos, então vai aparecer.
Mas para o password, a gente não quer que apareça.
Vamos lá no password, adicione no final secure text entry.
Por padrão, é true, então não precisa digitar true, é implícito.
Eu adicionei lá e vamos ver se funciona.
Muito legal, agora o password assim não aparece.
Valeu.
Agora a gente pode prosseguir para ajeitar esses on change text e o valor.
Então esse value vai ser, na verdade, o valor no Redux, tá bom?
Você nota que a gente fez antes, deixa eu cadê a tela aqui que a gente fez, esse cara aqui.
Note que a gente vai ter o application state do Redux.
Do auth reducer, vai retornar ao novo estado com essas propriedades aqui.
Então esse valor aqui do email vai ser ligado a esse cara e esse do password vai ser ligado a esse cara.
Note que são todos do Redux.
Então para a gente injetar como propriedade esses valores a gente vai precisar conectar o React ao Redux.
Como é que faz isso?
Você se lembra? A gente usa a função chamada connect.
Então vamos aqui no topo importar connect do reactRedux, tá bom?
E no final vamos export a file, adicione o connect e o argumento final aqui é o login.
Note que tem dois parentes, tem esse aqui e tem esse aqui para o componente, não componente.
Primeira função mapDispatch, desculpa, mapStateToProps, tá bom?
Então vamos definir, mapStateToProps vai ser a função de flash e o argumento é sempre state, né?
E o que a gente quer? A gente quer retornar um objeto que tenha o email e que tenha o password, tá?
Note que quando a gente tem o state, eu te falei um tempo atrás que a gente se afere ao email e ao password assim, né?
Por quê? Porque a gente olha no reducer index, tem essa chave auth, então vai ter state.auth.
O estado que é passado do reducer, né? Que nesse caso vai ser esse cara aqui, vai ser o email e o password.
É por isso que a gente tem que dizer assim, então para poder injetar como props dentro do componente loginform,
a gente vai retornar um objeto cujas chaves vão ser o que?
Vamos botar o email e vamos botar esse cara aqui, vamos recortar, vai ser o state.auth.mail e o password vai ser o que?
Vou dar um tempo para você fazer aí. Tá bom? É a mesma coisa, né? Esse cara aqui.
Então é só assim, então vai injetar o email, vai injetar o password e a gente vai poder ligar esse cara com o formulário aqui, esses inputs.
Então para fazer isso, eu vou aqui, tenho um email, tenho um password como chave, dando propriedades, então aqui dentro do vale vai ser o que?
Esse, do prop.mail, esse cara aqui é esse cara aqui que a gente injetou com propriedade, que na verdade é o estado do redux, dentro do estado do redux.
E a mesma coisa com password, vou esperar você vai fazer. Que vai ser aqui?
Certo, this.prop.password, tá bom? Salvar, então agora vai estar ligado ao redux. Tá bom?
Agora, se você fizer isso, vai estar sempre vazio, que se lembra que a gente definiu o initial state para email e password para ser um string vazio,
então não tem nada, então você sempre vai ficar vazio, ainda que você digite, vai ficar vazio. Por que? Porque o ontem de text não está definido.
Tá bom? A gente vai ter que criar um action creator que vai mandar uma action para mudar o estado do redux, para a coisa que a gente digitou, a novo texto, tá bom?
O novo texto. Então, nesse cara aqui, a gente vai ter que usar o que? Criar um action creator. Mas, e quando a gente criar action creator, a gente vai dar o que?
A gente vai usar this, tá bom? Vai usar this, do props.
A gente pode chamar de qualquer coisa, sei lá. Login, change, login e mail. Qual que é a coisa que você quiser chamar? Tá bom?
Ou só change e mail. Vou chamar change login e mail. Tá bom? Vou chamar essa função. E a ontem de text sempre tem o text aqui também.
O que é coisa que você digitou é o argumento dessa função.


0005-15 Caixa de Texto para a Senha, Conexão de Redux com connect e mapStateToProps

Implementação do onChangeText do Campo de Email Através do mapDispatchToProps

# Resumo do Transcript

Neste trecho, estamos discutindo a implementação de um action creator para alterar o email de login em uma aplicação. A seguir, estão os passos principais abordados:

1. **Definição do Action Creator**:
   - O action creator, chamado `changeLoginEmail`, será responsável por processar o texto digitado pelo usuário, que representa o novo email.

2. **Uso de `mapDispatchToProps`**:
   - É necessário injetar o action creator como uma propriedade do componente usando `mapDispatchToProps`.
   - Pode-se utilizar um atalho, passando um objeto com o nome do action creator (neste caso, `changeLoginEmail`).

3. **Importação do Action Creator**:
   - O action creator deve ser importado de um arquivo chamado `actions index.js`.
   - O uso do ES6 permite simplificar a destruturação do objeto, não sendo necessário repetir o nome da chave.

4. **Chave do Action Creator**:
   - O nome da chave injetada pode ser alterado, mas neste caso, opta-se por manter o mesmo nome `changeLoginEmail` para simplificação e clareza.

5. **Próximos Passos**:
   - O próximo passo é definir a função do action creator dentro do arquivo de ações (`actions index.js`).

Este processo é uma parte importante do gerenciamento de estados em uma aplicação React, utilizando Redux para a manipulação de ações e estado.

Então, a gente vai passar com um argumento para o change login email esse texto, dessa
maneira, tá bom?
O que está acontecendo?
Esse cara aqui vai ser o action creator, criador da ação.
E quando a gente chamar, vai passar o texto que a gente digitou.
Esse cara aqui é o argumento da função de flash, que é a coisa que a gente digitou.
E a gente vai mandar uma action que vai ter a coisa que a gente digitou, o texto.
E esse cara vai ser pego no af reducer aqui e vai retornar ao novo state com esse cara
atualizado, esse email ou o password.
Tá bom?
Então, vamos definir esse action creator.
Primeiro de tudo, ainda que não esteja definido para usar ele como propriedade do componente,
a gente precisa injetar usando o map dispatch to props.
Nada final, você vai lá e digita o map dispatch to props.
Ou você pode usar um atalho que é só passar um objeto com o nome do action creator, change
login email, ok?
Depois você pode passar o objeto, change login email, que vai ser o quê?
Esse aqui vai ser a chave que será injetada como props e vai ser o change login email que
a gente vai importar.
Vamos importar esse cara.
Import o quê?
Change login email.
Eu vou destruturar o que a gente vai fazer assim.
Vamos...
Vai estar dentro do actions index, tá bom?
A gente vai fazer assim.
Vamos botar index, não precisa digitar index.
E assim.
Esse cara a gente não definiu ainda, mas vai estar dentro do actions index.js, tá bom?
Então, esse cara, change login email, vai ser esse aqui, tá?
E vai ser injetado como essa chave aqui.
Esse aqui poderia ser qualquer nome.
Poderia ser esse negócio aqui.
Queria chamar esse cara, tá bom?
E a gente vai ser ID quando queria chamar esse, por exemplo, algo.
Se eu botar o nome algo, eu tenho que chamar aqui dentro, desco, props, algo, tá bom?
Nesse caso eu não quero, eu quero o seu mesmo nome, então vou voltar o mesmo nome.
Change login email.
Como eu estou usando a versão s6, eu não preciso digitar se o valor for o mesmo do
propriedade do objeto.
Então, vou tirar assim, porque é muito melhor.
Tá bom?
Esse aqui é o atalho pro map dispatch to props.
Vamos definir esse action creator agora.
Vou para o index do actions aqui, tá bom?
Vamos lá definir qual é o nome da função.
Vamos lá export.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.
Vamos lá.


0005-16 Implementação do onChangeText do Campo de Email Através do mapDispatchToProps

Action Creators para Mudarem os Campos de Email e de Senha

# Summary of Change Login Email and Password Functionality

## Overview
In this transcript, we explore how to implement action creators for changing the login email and password in a JavaScript application, particularly focusing on Redux.

## Key Steps

1. **Creating Action Creator for Login Email:**
   - Define a function `changeLoginEmail` that takes a new email as an argument.
   - This function returns an action, which is a plain JavaScript object containing:
     - `type`: A string indicating the action type (e.g., `CHANGE_LOGIN_EMAIL`).
     - `payload`: The new email.

2. **Constant Definition:**
   - Define a constant `CHANGE_LOGIN_EMAIL` for the action type to ensure consistency and avoid typos across the application.

3. **Types File:**
   - Create a file `types.js` to organize and export action types.
   - Use `export const` to define the action types in this file.

4. **Using Action Creator:**
   - Import the action type from `types.js` in the appropriate files, such as the login form component.

5. **Handling Actions in Reducer:**
   - In the reducer (e.g., `authReducer`), import the action type and handle the action.
   - When the action type matches `CHANGE_LOGIN_EMAIL`, return a new state object containing all previous state properties, but modify the `email` property to the `action.payload`.

6. **Return New State:**
   - Always return a new state object in reducers to ensure immutability.

7. **Testing Functionality:**
   - Test the implemented functionality by typing in the email field and checking the state updates.

## Adding Similar Functionality for Password

1. **Create Action Creator for Password:**
   - Follow a similar process to define `changeLoginPassword` and its action.

2. **Update Types File:**
   - Define `CHANGE_LOGIN_PASSWORD` in `types.js`.

3. **Implement Reducer Logic:**
   - In the reducer, handle the new action type `CHANGE_LOGIN_PASSWORD` similarly to how `CHANGE_LOGIN_EMAIL` was handled.

4. **Connect to Component:**
   - Inject the password change function into the component using `mapDispatchToProps`.

5. **Testing:**
   - Ensure that typing into the password field updates the corresponding state.

## Conclusion
This process outlines how to define action creators for changing login credentials in a Redux-based application, covering constants, action types, reducers, and component integration.

--- 
>Note: This summary captures the main points of implementing the login email and password functionality in a Redux application based on the provided transcript.

export const, o nome da função change login email, qual o argumento?
vai ser o novo email, né?
e eu esqueci do igual, tá bom?
então a gente vai...
esses caras são chamados action creators, só uma função e vai ter que retornar uma ação
e nesse cara a gente vai export const, se a gente export sem um default, vai criar objeto assim
com as chaves assim, sendo o email, não sei o que, né?
na verdade é isso que acontece
e assim por diante, é bom?
é isso que a gente vai fazer
então vamos lá, a gente vai pegar esse email que é o texto digitado
a gente vai retornar uma action, action é só um objeto JavaScript que tem um tipo e tem um payload
tipo vai ser o quê?
vamos lá, change login email, vamos criar essa constante
a payload vai ser só o email, esqueci da vírgula
então o tipo de ação normalmente é one string, tá bom?
e a gente normalmente põe de capital letra de forma, né?
change login email
mas a gente...
tipicamente pega esse cara, faz uma constante, tá bom?
const, change login email e declara com o mesmo nome
vai ser a mesma coisa, como a string, change login email, tá bom?
e define esse tipo de ação
normalmente a gente pega esse cara e põe um arquivo chamado types
eu vou criar um arquivo chamado types.js dentro do actions
e aqui que eu vou declarar a constante, tá bom?
eu declaro aqui const e export, export const, tá bom?
export const esse cara
e daí para usar isso do action creator eu vou dar um import
ok import change login email from actions
desculpa, from types
do mesmo direto
e aí pode usar esse cara, salvar, tá bom?
deixa eu botar o nome aqui
import action types
tipos de ação
cadê?
dá o cd já
6
criadores de ação
tá bom?
então, action creator retornam action
essa ação é despachada para todos os reducers
mas o action reducer é o que a gente vai usar
vai no author reducer, esse cara a gente se importa com action
então, no caso de que action.type seja change login email
a gente vai fazer alguma coisa
mas note que a gente não tem importado esse
então vai aqui import
import change login email
da onde?
from
acima
dois pontos, não se esqueça
e tá dentro do actions
dentro do types
pra usar
e nesse caso o que a gente vai fazer?
change login email, a gente vai retornar um novo estado
estado é só um objeto, tá bom?
vai pegar todas as propriedades do estado passado
assim que a gente faz
e vai adicionar o que?
ou modificar o que?
nesse novo objeto, novo estado
o email, né?
vai ser a coisa que passou
action.payload
tá bom?
e botar um ponto e um vírgula
note que esses três pontos
significa você pega o objeto do estado
pega todas as propriedades
adiciona ao novo objeto
que é esse cara aqui todo
e modifica o email pra ser
action.payload
e no final esse cara vai estar modificado
sempre retornamos
o novo estado
não se esqueça, novo estado
sempre retornado do reducer
não pode modificar o estado atual
a gente tem que retornar sempre o novo estado
dá um return aqui
não precisa de break que eu já tô retornando
detalhe, salvar
e vamos ver o que
vai acontecer
definindo o action creator
já tá sendo usado no login form
que a gente deu setup
configuração, vamos testar
o que que deu errado aqui?
não existe
o problema aqui é
do que?
esse importo tá errado
do change login email dentro do login form
tá dentro do que?
do componente
da gente ter que do um nível acima
na pasta actions
do index, não precisa de digitar index
esqueci dois pontos
salvar, vamos lá
vamos tentar digitar
alguma coisa no email
tá funcionando né?
tudo bem agora
então o que que tá acontecendo?
então
vamos olhar aqui
no momento que você digita
alguma coisa
a onchange tax
essa função vai ser chamada
tá bom? deixa eu botar aqui
vai chamar essa função
o texto é o que você digitou
no novo texto
vai chamar action creator com texto
esse cara aqui, é esse cara que a gente definiu
a gente tem um email
retornação
chamada change login email
e vai passar esse texto que a gente digitou
nesse caso vai ser a, a, d, s
não sei o que
esse cara vai ser despachado, essa ação pra todos os reducers
mas o auth reducer
que vai se importar
porque a gente tem o case login email
nesse caso a gente vai retornar
o estado que era antes
nesse caso era só o email password
vazio
com o email modificado
agora o email vai ter a coisa que a gente digitou
action.payload
se você voltar pro action creator
a gente deu payload com o email
a coisa que a gente digitou
então tá aqui
então esse cara aqui
vai ser a, s, d, no, sei o que
o estado né
por isso que tá aparecendo aqui
toda vez que a gente digita isso acontece
ah detalhe também que quando
a gente faz isso e retorna
novo estado
o componente login form
vai se renderizar de novo
vai chamar render novamente
e por causa disso
quando bate nesse value aqui
vai olhar no
no estado do redux
e o email como estava
a, s, d, no, sei o que
vai ser o valor agora
sempre assim
chama esse cara
modifica o estado porque o estado foi
modificado
a render function, função vai ser chamado
novamente e vai dar o novo
valor aqui, estado des props
email, certo?
mesma coisa com password
então vou deixar com mais exercício
vou esperar você fazer isso
o que é que eu quero que você faça?
faça a mesma coisa
aqui no
para password para senha
define o one change text, faça um action creator
muito similar a esse aqui
muito parecido
não se esqueça de importar
aqui e no final
e definir no
actions aqui, também tem que ir
no reducer
e adicionar o caso para esse caso
você vai ter que ter outro tipo de
action, então crie outro tipo de
action aqui nesse arquivo
tá bom?
eu vou esperar para você fazer e a gente
vai continuar
e aí deu tudo certo?
vamos lá
então vou voltar
aqui no app
desculpa, login form
esse one change text aqui
vai ter o texto
e a gente vai chamar
props
change login password
vamos definir esse cara
vamos injetar como
propriedade adicionando aqui
no map dispatch props
no final do connect
change
login password
note que a linha tá muito longa então vou
quebrar esse cara em linhas assim
e
vai ficar melhor
esse aqui é o map dispatch props
nesse cara a gente tem que
importar, note que isso aqui é a mesma coisa
que isso né? por isso que a gente tem só o nome
é a mesma coisa que isso, esse aqui que a gente
precisa importar
só adicionar aqui
change login password
from actions, agora a gente tem que definir
vamos lá
vou para actions index
export const
change login password
password
retornar a ação action
qual tipo? change login
password, a gente tem que definir
payload vai ser o password
que a gente passou, vamos definir esse cara aqui
vamos lá para action types
export const
change
login password
password
mesma coisa, change login
oh desculpa, password como a string
salva, volta para
action creator index aqui e
importa, change
login password
password aqui
estou dentro do index do actions, terminei
vamos para o reducer agora
auth reducer
a gente vai precisar importar
a nova ação também
change login
password, tipo de ação
e vamos ao novo caso
case, change
login password
a gente vai fazer o que? retornar
o estado que estava antes
mesma propriedades com o password
modificado action.paload
e assim
vamos ver se está funcionando
digital password aqui
tudo ok
dá para delatar, isso é o que
tá bom, tudo ok


0005-17 Action Creators para Mudarem os Campos de Email e de Senha

Projeto de Firebase e Sua Configuração no JavaScript

# Resumo do Tutorial sobre Firebase

Neste tutorial, o apresentador guia os espectadores na configuração inicial do Firebase para autenticação. O processo é o seguinte:

1. **Acessar o Firebase**:
   - Acesse o console do Firebase em [firebase.console.firebase.google.com](https://firebase.console.firebase.google.com).
   - É necessário ter uma conta do Google.

2. **Criar um Novo Projeto**:
   - Crie um novo projeto, nomeando-o (ex: "Autenticação com Firebase").
   - Aguarde enquanto o projeto é criado.

3. **Habilitar Autenticação**:
   - Navegue até "Autenticação" e depois "Método de Sign In".
   - Habilite a autenticação com e-mail e senha, salvando as alterações.

4. **Configurações do Web App**:
   - Adicione a configuração necessária para o Firebase no aplicativo web.
   - Use a versão 3 do Firebase SDK, que é a versão utilizada no tutorial.

5. **Configuração no Código**:
   - Inicialize o Firebase nas opções do aplicativo.
   - Mude o componente funcional do aplicativo para um componente de classe, que permite a utilização do ciclo de vida (Lifecycle).
   - Implemente o método `componentDidMount` para iniciar o Firebase.

6. **Instalação do Firebase**:
   - Use o terminal para instalar o Firebase com o comando:
     ```bash
     npm install firebase
     ```
   - Confirme a instalação e a versão correta no `package.json`.

7. **Importar Firebase**:
   - Importar Firebase no seu arquivo, pronto para usar na aplicação.

Na próxima sessão, o apresentador seguirá com a implementação do login.

Então, depois de tanto tempo para configurar as coisas, a gente vai finalmente dar uma
olhada no Firebase.
Então, vamos lá, vamos no navegador.
Eu vou para Firebase console.firebase.google.com.
Vai lá, você tem que ter uma conta do Google.
Quando você for nesse, vai ter uma prisão de criar um novo projeto.
Eu vou criar um novo projeto.
No meu caso, está em inglês, mas no seu caso, deve estar em português.
Criar um novo projeto, vou dar um nome ao projeto.
Nesse caso, qual é o projeto que eu tinha?
Qual era o nome?
Authenticação Firebase Redux.
Authenticação com Firebase Redux.
Ah, não pode ser tão longo.
Vou fazer assim.
Authenticação com Firebase.
Dê qualquer nome que você quiser.
Seja de razão, não sei o que.
Criar projeto.
Vai demorar um pouquinho para criar o projeto.
E a gente vai fazer, vai habilitar a authenticação com o e-mail e a senha nesse caso.
Quando você já fizer tudo e der certo, o que você vai fazer?
Vai na Authentication, a authenticação aqui, nesses caras aqui, ícone.
Aí, Sign In Method, método de logá, Sign In.
Aí, vai ter e-mail e password, tá bom?
Você vai clicar aqui, editar e vai habilitar.
Habilitar, e salvar.
Nesse caso, vai habilitar a authenticação com o e-mail e a senha.
Depois disso, vai aqui, nesses settings, não sei o que.
Você tem que adicionar aqui Firebase no web app, escolher esse web app.
Não importa que a gente é mobile, não sei o que.
Então, vai lá e vai te dar um negócio que é que a gente se importa com essa configuração, né?
Authenticação, não sei o que.
A PA aqui.
Note que eu estou usando a versão, se noto 3, pode 6, que a gente vai usar, eu acho.
Note que a versão do Firebase SDK antes da versão 3 é diferente.
Então, a gente está usando a versão 3, tá bom?
Que é dessa maneira.
Eu quero que você copie esse código aqui.
Não precisa do script, não sei o que, porque é para web app, a gente está usando esse
cara aqui para o mobile, né?
Vamos lá para o nosso projeto, voltar.
Vai para o app, com a Toyota S, dentro do SRC, diretório.
Aqui, o que a gente vai fazer?
A gente vai primeiro inicializar o Firebase com nossas opções, nossas configurações.
Para isso, a gente vai ter que usar o componente de Lifecycle.
Mas agora não dá para usar por quê?
Porque o app é componente funcional.
Então, a gente vai ter que modificar esse app para esse componente de classe.
Tá bom?
Então, vamos lá.
A gente tem com as apps, vamos fazer class app, extends component, e não precisa mais
descartar aqui.
Não precisa dessa ponto e vírgula.
E esse return vai ser o cara do render, né?
Render e bota o return dentro.
Bom?
Modifica o app para esse componente de classe, extends component, tem que portar do react.
Componer aqui nessa linha.
Salva.
A função render retorna esse cara.
Deixa eu ajustar a indetação.
Tá bom?
Aí.
Tá bom?
Agora é componente de classe.
Agora posso definir o component whale mount ou component dead mount, se você quiser.
E quando com montagem, a gente vai dar aquele código do Firebase, tá bom?
Então, component whale mount do app, a gente vai iniciar o Firebase.
Vamos dar uma indetação, vamos mudar esse var para const que a gente está usando, s6.
Esse aqui é o objeto de configuração do seu Firebase.
Tem todas a API aqui, não sei o quê.
O RL do banco de dados e essas coisas.
Aí define esse configuração e passa para a função initialize app do Firebase, que
é um módulo que a gente tem que instalar.
Vamos lá.
Vamos lá aqui.
No terminal, clear, npm, install ou só i, save, tá bom?
Firebase.
Note a versão 3, vamos já confirmar que a versão antes do 3 é diferente as coisas,
tá bom?
Vou verificar meu package JSON.
Tá, Firebase, versão 3.6.1, tá bom?
Installado tudo ok, vamos voltar ao app e vamos importar Firebase.
Antes do Redux Tank, port Firebase from Firebase.
Certo, agora vai funcionar, importamos.
Esse vai inicializar a aplicativa com o nosso configuração do Firebase para a gente poder
usar Firebase.
Tudo certo?
Próxima sessão a gente vai fazer login.


0005-18 Projeto de Firebase e Sua Configuração no JavaScript

Autenticação com o Firebase Através do signInWithEmailAndPassword

```markdown
## Resumo da Conversa sobre loginform.js

### Estrutura e Função do Botão "Entrar"

1. **Configuração do Botão "Entrar"**:
   - O botão chamará a função `onLoginPress` ao ser clicado.

2. **Implementação da Função `onLoginPress`**:
   - Criar a função `onLoginPress` dentro do componente, que será chamada ao clicar no botão.

3. **Uso do `this` e Binders**:
   - É necessário o uso de binders para garantir que `this` referencie o componente correto.

### Chamada do Action Creator

4. **Chamada do Action Creator**:
   - A função `onLoginPress` irá disparar um action creator para realizar o login, assumindo que existe um `loginUser`.

5. **Argumentos Necessários**:
   - Para o login, serão necessários `email` e `password`.
   - Os dados podem ser passados como um objeto: `{ email: this.props.email, password: this.props.password }`.

6. **Destructuring para Props**:
   - É sugerido usar destructuring para simplificar o acesso às propriedades.

### Injeção e Definição do Action Creator

7. **Injeção do Action Creator**:
   - É necessário injetar `loginUser` nas props usando `mapDispatchToProps`.

8. **Definição do Action Creator**:
   - A função `loginUser` deve ser definida em `actions`, retornando uma função que faz uma chamada assíncrona à Firebase para autenticação.

9. **Uso do Redux Thunk**:
   - Usar Redux Thunk para permitir que o action creator retorne uma função que envia uma ação depois de realizar uma operação assíncrona (login via Firebase).

### Chamada à API Firebase

10. **Chamada à Firebase**:
    - A função `signinWithEmailAndPassword` é utilizada para autenticar, passando `email` e `password`.

11. **Tratamento de Promessa**:
    - Usar `.then` e `.catch` para lidar com a resposta da autenticação, logando a resposta ou erro no console.

### Teste da Implementação

12. **Testando a Autenticação**:
    - Criar um usuário no Firebase para testar o login.
    - Ao clicar em "entrar", chamar o `onLoginPress`, que aciona o action creator e faz a autenticação.

### Problema Relatado

13. **Erro Encontrado**: 
    - Recebido o erro "this.props.loginUser is not a function".
    - Revisar se a key foi injetada corretamente, se o action foi exportado corretamente e se não há erro nos types.

```


Vamos para o arquivo loginform.js.
Vamos configurar esse botão aqui, entrar.
Quando a gente entrar, vamos chamar a função.
Nesse caso, vamos fazer uma função,
vamos entrar press, onLoginPress, alguma coisa assim.
Dentro do componente, vou criar uma função, onLoginPress.
Tá bom?
Que vai ser a função que a gente vai chamar quando clicar no botão entrar.
Pode usar a função de Flash ou pode usar só assim, des.
OnLoginPress, tá bom?
Detalhe, a gente vai ter que, talvez, botar binders,
ou seja, a gente usar a palavra-chave des dentro da função
para se referir ao componente ter que botar binders.
Eu deixei só de caso a gente tenha problema.
O que vai acontecer quando a gente chama onLoginPress?
A gente vai chamar um action creator para logar.
Então, a gente vai assumir que tem,
vai fazer de conta que tem.
Então, des.props, tá bom?
Eu estou usando a palavra-chave des, então, eu tenho que fazer o binders.
Porque se eu botar sem binders, o des vai ser o componente-botão.
Não vai ser o componente-login.
Então, preciso binders para setar, ajustar o contexto da palavra-chave des
dentro dessa função para se referir ao loginform.
Des.props, vamos botar login-user, alguma coisa assim,
para o action creator, tá bom?
E para logar, a gente vai precisar do que? Emel e do password.
Tá bom?
Você pode passar esses como dois argumentos separados
ou como um objeto com as chaves email e password.
Tá bom?
Então, do jeito que eu vou fazer, eu vou fazer um objeto.
Vamos passar o objeto aqui.
Vai ter o email que vai ser o quê? Des.props.email.
Vai ter o password que vai ser o quê? Des.props.password.
Se lembra que esse password email está injetado do redux
via esse maps.t2props.
E note que também é o valor do input. Des.props.maps.email, né?
Tá bom? Vou só quebrar uma linha aqui.
Assim.
Vou chamar o action creator para logar o usuário.
Note que eu estou usando des.props várias vezes,
então eu posso dar um destructuring.
É igual a des.props para remover esse cara.
Fica amanhã melhor, né?
Como eu tenho chave e o valor mesmo nome,
eu posso remover assim e vai dar no mesmo.
Muito mais fácil, né?
E nem preciso quebrar a linha.
Tá bom?
Tá bom.
Agora vamos adicionar esse login user.
Primeiro para usar como login user, a gente tem que injetar como props.
Então, onde é que a gente vai injetar?
Isso. Maps despatos de props lá embaixo.
Adiciona. Login user.
Mas a gente não tem esse cara ainda.
Vamos lá importar.
Login user.
Ah, mas a gente não definiu.
Vamos definir. Detudo actions.
Actions. Export const login user.
Vai ter um objeto, né?
Um password.
Email e password, né?
Vamos botar, sei lá, user info.
Uma coisa assim.
O que vai acontecer aqui?
A gente tem que chamar Firebase para autenticar.
Tá bom?
Mas isso vai demorar um pouco porque é o pedido acíncrono.
Então, a gente vai usar o Redux Tank, finalmente, né?
Em vez de retornar uma ação agora,
eu vou retornar uma função.
Então, Redux Tank permite você,
em vez de retornar só uma ação, retornar uma função.
Então, eu vou return a função assim.
O argumento da função é o dispatch, na verdade.
Então, vai ser assim.
Return dispatch. Retornar a função, né?
O que a gente vai fazer?
A gente vai fazer o pedido Firebase, né?
Então, eu vou usar o módulo Firebase
off.sideinwithemailandpassword.
É longo.
É esse nome aí.
Tá bom? Mas a gente não importou Firebase ainda, né?
Não é? Então, vamos lá no top.
Import Firebase from... o quê?
Firebase.
Tá bom?
Salva aqui, vou voltar.
A gente chama essa função aqui.
Então, Firebase.off
vai retornar no objeto que tem funções
para logar, para cadastrar essas coisas.
Então, chama esse cara e chama essa função
signinwithemailandpassword
para logar, para entrar com o email e o password.
O argumento é primeiro o email,
que vai ser userinfo.email
e o segundo é userinfo.password,
que tá passado com esse cara aqui, né?
E o resultado dessa coisa toda
vai ser retornar uma promessa.
Tá bom?
Para lidar com promessas, a gente usa
ponto then.
Then e o resposta aqui,
response no seu quê?
Vamos dar uma olhada o que acontece com a response.
Vou dar um console log, tá bom?
E se não descer, a gente dá um catch
para o erro, né?
Vou dar um console log também,
para ver o que acontece.
Se autenticar com sucesso,
vai dar esse console log da resposta.
Se não, vai dar esse erro.
Para a gente testar isso, vamos lá.
Vamos lá, de volta no Firebase,
vai para o console do Firebase,
ponto global, ponto com, tá bom?
Eu quero que você vá lá,
selecione seu projeto,
eu já estava lá, mas
autenticação com Firebase.
Vai no authentication,
clica aqui, autenticação,
vai no add user,
adicionar o usuário,
para adicionar o novo cara.
Por exemplo, sei lá,
usar marco,
meio ponto com, password, um 2, 3, 4, 5, 6,
vou adicionar esse cara para testar.
A gente tem esse usuário marco, né?
Não sei o que, vamos lá.
A gente salvar aqui,
tudo definido,
ver se não tem erro aqui ainda, a gente não testou.
Cadê meu Google Chrome para o debugger,
para ver o que acontece.
Demorando, hein?
Tá aí, agora vamos lá,
digitar aqui marco,
meio ponto com, note que tem capitalização aqui,
a gente pode desitabilitar depois, tá bom?
Ah, aqui, saco.
Tá aí.
1, 2, 3, 4, 5, 6,
vamos clicar em entrada, no momento que clicar em entrar,
vai fazer o que? Vamos lá, login form,
salvar aqui, no momento que você clicar,
entrar, vai chamar essa função,
login press, que chama o quê?
Chama o action creator com email, password,
e vai dar no quê?
Vai dar no index do action,
login user, vai dar
Firebase off no seu quê?
Isso vai dar log1,
e vai dar o console log, vamos ver se o console log aparece.
Entrar.
This props login user, not a function,
o que é que aconteceu?
Vamos lá.
Login form, this props login user,
not a function.
Será que a gente fez tudo certo?
Injetou com props,
adicionou a key from actions,
deu no types,
export console login user,
tá tudo ok?
Mas por que deu isso?


0005-19 Autenticação com o Firebase Através do signInWithEmailAndPassword

Caso de Autenticação Bem Sucedida (dispatch e Mudança de Cena)

# Resumo do Transcrito

O usuário fala sobre a autenticação e manipulação de um sistema utilizando React Native e Redux. 

## Principal Tópicos Abordados:

- **Autenticação:** 
  - O usuário menciona a importância de garantir que os arquivos estejam salvos e que a autenticação esteja funcionando corretamente.
  - Após tentar entrar no sistema, alguém comenta sobre a necessidade de atualizar e verificar as credenciais.
  
- **Mudança de Cena:** 
  - Explica o processo de mudança de cena após a autenticação, usando `react-native-router-flux`.
  - Menciona a necessidade de chamar a ação para mudar a cena e a importância de importar os `actions`.

- **Formulário e Estado:**
  - O formulário é discutido, incluindo como limpar os campos após o login, utilizando Redux para despachar uma ação ao ter sucesso na autenticação.
  - O estado inicial é utilizado para limpar as informações do formulário.

- **Propiedades do Input:**
  - Há uma atenção especial a como o e-mail é tratado no input, especificamente sobre a capitalização automática.
  - O ajuste `auto-capitalize` é configurado para `none` no campo do e-mail para evitar a capitalização automática da primeira letra.

- **Tratamento de Erros:**
  - O usuário observa como o sistema lida com erros de autenticação, demonstrando a mensagem quando a senha é inválida.

## Conclusões:

O usuário demonstra um passo a passo sobre como configurar a autenticação, gerenciar estados e formularios, além de interagir com o sistema de forma intuitiva com reações sobre os resultados das ações executadas.

Provavelmente esqueci de salvar os arquivos, se o personal está aqui está tudo certo.
A gente fez as coisas certas, dá uma atualizada, vamos ver o que acontece.
O meu.com, tirar esse M aqui, entrar, deu nisso, é a resposta aqui.
Se notam não sei o que, várias coisas, o e-mail é esse, vermo?
Aqui é o seu, não tem foto, mas tem o seu usuário, a id de usuário, identificação,
que deve ser a mesma, vamos lá para o console, dzdo, dzdo, mesma coisa.
Então, mandou o usuário authentico mesmo, deu certo.
Legal, hein?
Agora, se a gente digitar alguma coisa que não seja,
vai dar em erro, vai dar esse negócio, message do erro, e o meu address, não sei o que, e essa coisa, muito legal.
Tá bom? Vamos deixar esse console logo aí, só para você ver o que é a resposta.
Então, a gente autoneticou, só falta a gente mudar para a outra cena.
Vamos lá, vai para o, onde? Action Creator, vai para o login aqui.
O que acontece se a gente autoriza e der certo?
O sucesso vai aqui para o caso do then, e a gente vai mudar de cena.
Se lembra como é que a gente muda usando react-native router flux?
Se você não viu meu vídeo de introdução Redux, vamos aprender.
Para a gente mudar de cena, a gente vai chamar actions.acquidacena.
Vamos lá voltar para aquele arquivo chamado router.
Você note que tem aqui para cada cena, então a gente quer ir para key main.
Pega a sua chave, actions.main, e chama como uma função, e é isso, só isso.
Vai mudar, muda de cena.
A gente tem que importar actions do react-native router flux.
Vai lá no cima, importe, distruturar actions from react-native router flux.
Só isso.
Vamos lá, muda de cena.
Vamos tentar novamente, marco mail.com, entrar, cadê?
Ah, esqueci, até vai estar o M, né?
Ei, e aí?
Estamos dentro do sistema, finalmente.
Você nota que o react-native router flux, adiciona esse botão de voltar também,
a gente pode ver o que aconteceu antes, mas deu tudo certo, autentificado.
Só voltar aqui para você ver algumas coisas que a gente tem que ajeitar.
Note que quando eu volto aparece o email e passo o ordem novo,
mas normalmente a gente tem que limpar esse formulário depois que a gente clica em entrar, tá bom?
Então para fazer isso, o que é que eu vou fazer?
Quando a gente der sucesso aqui, antes de mudar para a cena,
eu vou despachar uma ação.
Quando a gente está usando Redux Slunk, a gente pode chamar de dispatch e passo o objeto da ação, tá bom?
Vai ser o type, o quê? A gente vai botar login, user, sucesso, sucedido, tá bom?
Só isso.
Vamos criar isso, vou copiar.
Vai lá em cima.
Eu vou break a line aqui.
A gente vai importar do arquivo, login, user, sucesso, vamos definir dentro de types.
Vamos lá, vamos lá. Export const, login, user, sucesso.
É uma string com o mesmo nome.
Só isso.
Voltando ao index.
Definimos, importamos o tipo de ação logo em user, sucesso.
Despachamos quando foi autenticado.
Vamos lá no reducer, author reducer, para lidar com essa ação.
No caso de csk, a gente vai limpar o formulário.
Em vez de passar a state, não sei o quê, eu só vou retornar o initial state para limpar tudo.
Tá bom? Initial state vai retornar esse cara que está tudo vazio.
Só isso, muito simples.
E temos que importar isso. A gente vai aqui, deixa eu quebrar a linha, e importar esse cara.
Salvar, vamos testar.
1, 2, 3, 4, 5, 6.
Ah, esqueci esse M aqui, muito chato, vamos ajeitar isso depois, espera aí.
Entrar, ter uma entrada, voltando, formulário está vazio, muito bem.
Muito bem. Agora vamos ajeitar esse email aqui, rapidinho.
O problema é que está capitalizando o primeiro letro.
Para isso não acontecer, a gente vai lá no input, tá bom?
Esse cara tem uma opção chamada auto-capitalize, eu acho.
Só olhar no documentação do React Native, se esquecer, documentação do text input.
Salver.
E vai ser auto-capitalize, a gente vai setar para none, tá bom?
Vamos aqui, antes de secure text entry, a gente vai botar auto-capitalize, tá bom?
Se você não quiser que auto-capitalize, você põe none, tá bom?
Se você quiser que o usuário entry auto-capitalize, e se não entrar, vai por padrão ser none.
Depende de como você criar o sistema.
Se você quiser o padrão para ser capitalizado, você põe aqui diferente, né?
Se você olhar na página do React Native, vamos ver.
Cadê, cadê, cadê?
Quero não, text input.
Auto-capitalize.
Cadê auto-cap...
Está aí, acho que é o primeiro.
Esse cara aqui, você pode escolher o padrão para você.
Eu vou escolher none para não capitalizar nada, tá bom?
Mas se o usuário quiser mudar isso, é só passar com propriedade.
Eu vou adicionar aqui.
Auto-capitalize, vírgula.
Salva.
Padrão é none.
Bom?
Vamos testar.
Então, eu nem preciso passar auto-capitalize aqui no login form,
aqui no e-mail, porque o padrão que você tem lá é o none, vai lá para o none.
Então, vamos lá.
Finalmente, não capitaliza mais.
Yeah.
Alê-o.
Agora a gente vai mudar a ver.
Parece um erro.
Olha o erro.
Password invalid, não sei o que.
O user não tem password.
Muito legal, né?
A gente pode saber a mensagem do erro aqui.
Um, dois, três, quatro, cinco, seis.
Entrar.
Passou o objeto, o responso.
Tudo OK.
Bem-vindo.


0005-20 Caso de Autenticação Bem Sucedida (dispatch e Mudança de Cena)

Mensagem de Erro no Caso de Falha na Autenticação

# Resumo do Transcript

Este transcript discute a implementação de mensagens de erro ao autenticar usuários em uma aplicação usando Firebase. Aqui estão os principais pontos abordados:

## 1. Problema de Erro na Autenticação
- O usuário final não recebe informações claras sobre erros ao tentar fazer login.
- A solução proposta é mostrar uma mensagem de erro baseada na resposta do Firebase.

## 2. Implementação da Solução
- Foi identificado que no `AuthReducer` existe a propriedade `error`.
- Uma ação chamada `LoginUserFail` foi criada para lidar com falhas de login.
- Quando um erro ocorre, a mensagem de erro é capturada e despachada como parte do `payload`.

## 3. Atualização no `Reducer`
- No `AuthReducer`, foi adicionado um caso para `LoginUserFail`, que atualiza o estado com a mensagem de erro.

## 4. Atualização do Componente `LoginForm`
- O componente `LoginForm` foi modificado para injetar a propriedade `error`.
- A mensagem de erro foi adicionada ao JSX do formulário, melhorando a experiência do usuário.

## 5. Renderização Condicional da Mensagem de Erro
- O texto de erro só é renderizado se houver um erro a ser exibido.
- Uma função chamada `renderError` foi criada para controlar essa exibição.

## 6. Melhoria da Estética
- Foi sugerido alterar a cor do texto da mensagem de erro para vermelho e melhorar o estilo visual, centralizando o texto.

## Conclusão
O vídeo enfatiza a importância de fornecer feedback claro ao usuário sobre falhas, e como aplicar boas práticas no gerenciamento de estados usando Redux e Firebase.

---

Esse resumo cobre os pontos centrais do vídeo e fornece uma visão clara das alterações implementadas no código. Se precisar de mais detalhes ou de um foco específico, é só avisar!

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.


0005-21 Mensagem de Erro no Caso de Falha na Autenticação

Estado de Carregamento na Submissão do Formulário

```markdown
# Resumo da Implementação: Manipulação do Estado de Carregamento em Login

## Objetivo:
Implementar um mecanismo para ocultar botões enquanto uma requisição de login está em andamento e exibir um spinner para indicar que a ação está sendo processada.

## Passos da Implementação:

1. **Ação onLoginPress**:
   - Quando o botão de entrar é clicado, a função `onLoginPress` é chamada.
   - Essa função dispara a ação `loginUser` responsável por autenticar o usuário.

2. **Estado de Carregamento**:
   - O estado `loading` deve ser utilizado para controlar a exibição dos botões e do spinner.
   - Quando o botão é clicado:
     - O estado `loading` é setado como `true` para ocultar os botões.
     - Um spinner deve ser exibido durante o carregamento.

3. **Definição das Ações**:
   - Criar uma ação `loginUserLoading` em `actions/index.js` para despachar enquanto o login é processado.
   - Essa ação irá atualizar o estado para `loading: true`.

4. **Reduzir Estado**:
   - No `authReducer`, adicionar um case para `loginUserLoading` que altera o estado `loading` para `true`, sem modificar os outros estados.

5. **Renderização Condicional em `loginForm`**:
   - A propriedade `loading` deve ser injetada no `mapStateToProps` de `loginForm`.
   - Condicionalmente renderizar os botões ou o spinner com base no valor de `loading`.

6. **Manipulação de Respostas**:
   - Após receber a resposta do Firebase (sucesso ou falha), o estado `loading` deve ser alterado de volta para `false`, permitindo que os botões sejam exibidos novamente.

7. **Simulação de Carregamento**:
   - Para ilustrar a funcionalidade, pode-se implementar um `setTimeout` nas ações para simular um atraso na resposta do Firebase.

## Testes:
- Clicar no botão deve mostrar o spinner por alguns segundos e, em seguida, os botões devem reaparecer dependendo da resposta do servidor.
- Remover o `setTimeout` após testar para restaurar o comportamento normal.

Assim, a implementação fornece um feedback visual claro para o usuário enquanto o login está sendo processado, melhorando a experiência do usuário.
```

Outra coisa, uma outra coisa que a gente deve fazer aqui para o usuário final é quando
a gente clicar no botão entrar, por exemplo, vai demorar um pouquinho para fazer o pedir
HTTP para o Firebase e receber a resposta.
Então nesse período a gente não quer mostrar esses botões.
O modelo de fazer isso é como a gente, você se lembra que no estado que é dado pelo off
reducer tem essa propriedade loaden, é para isso que a gente vai usar.
Então quando a gente clicar em algum botão a gente vai dar setar o loaden para true,
verdade, que vai fazer esses botões desaparecer temporariamente e quando dá o sucesso aqui
ou dá o fail o loaden vai ser setado de novo para false e vai aparecer o botão de novo.
E enquanto estiver loaden verdadeiro a gente quer mostrar aquele spinner, esse cara aqui,
se lembra que teve o indicator, aquele negócio que fica rodando dizendo que está carregando.
Então vamos lá.
Primeiro a gente tem que, quando clicar o botão, mandar setar o loaden para true.
Então vamos lá.
Quando você clica no botão de entrar por exemplo, chama o onLoginPress, essa função
onLoginPress chama o actionCreate chamado loginUser.
Então vamos lá.
Está dentro do index do actions, está bom?
Eu já tenho aberto aqui.
Vai para o ações, actions, barra index.
Vamos lá para o actionCreate ou loginUser.
Então ele vai despachar esse loginUserSuccess somente depois de que seja sucedido.
Mas antes disso, enquanto não for sucedido a gente tem que despachar alguma ação assim.
Então antes de fazer o pedido para o Firebase, eu vou despachar uma ação do tipo loginUser
que a gente vai criar.
Se você quiser, pode adicionar loading.
Sempre assim, normalmente a gente tem o loginSuccess para sucedido, tem o fail e tem o loaden para
indicar o estado de carregando, carregamento.
Se você quiser adicionar, pode ser.
Então vou adicionar loaden.
Loading.
Para a gente ter que definir esse tipo de ação, vai lá em cima, importa.
Salva.
Vai para o que?
For types e define aqui.
Sports, const, loginUser loading, user orders.
Salva.
E agora vamos no reducer.
Está bom?
Volta, vai para o option authReducer.
Quando a gente caso seja loginUserLoading, o que a gente vai fazer?
Só retornar o estado como está, copia as propriedades do estado anterior e adiciona
loading com o true.
Está bom?
Manda o cara carregar.
Vamos importar lá em cima.
Salva.
E agora vai dar loaden quando a gente clica entrar.
Vamos lá tentar.
Então, por que não está fazendo nada?
Porque a gente esqueceu de adicionar a condição para esse cara desaparecer e aparecer as pinas.
Vamos lá para o loginForm.
E a gente só quer mostrar esses botões se o loading estiver falso.
Primeiro coisa que a gente vai fazer é injetar esse loading, essa propriedade.
Aqui no mapStateToProps, do loginForm, vai lá adiciona loading.
Está bom?
Então aqui no destruturamento, adiciona loading.
Vai tirar a door e adiciona loading aqui.
Agora a gente tem acesso via props para o loading.
Como esses dois botões aqui, a gente quer fazer um ifStaple, se o que?
Se thisPropsLoading, se for verdade, a gente não quer mostrar o botão, mas se não for
loading, a gente mostra esses caras.
Então se for loading, a gente vai mostrar o spinner, está bom?
O spinner, se lembra?
Sim, por diante.
Eu vou tirar esses caras dentro daqui e vou fazer a função.
É cortar desse ponto renderButton.
Vou chamar de renderButtons no plural.
E vou fazer essa função.
Vamos lá.
RenderButtons.
Ok, então se o propsLoading é verdadeiro, a gente vai mandar o spinner retornar, returnSpinner.
Se não, o que a gente vai fazer?
Vai retornar esses caras.
Return esses caras.
Tem um detalhe porque tem dois componentes, então a gente só pode retornar um.
Então eu vou adicionar essa view para poder funcionar.
Adiciona view e...
Está bom?
Então vamos lá, vamos ver se está funcionando.
Já a gente tem spinner aqui ou não?
Vamos ver lá em cima se a gente importou.
Ah, já está importado.
Então está ok.
Voltar aqui.
Entrar.
Se não, a gente vai aparecer o spinner, só fica nele, né?
O atual de novo.
Deu o spinner.
A gente só falta mudar esse spinner de volta para aparecer o botão quando a gente receber
a resposta do Firebase.
Então vamos lá no action creator.
A gente despacha o login user loading no momento que a gente vai fazer o pedido.
E quando der a resposta, você nota que a gente está despachando o login user success
ou está passando o login user fail.
Então quando a gente lidar com esses dois tipos de ação, a gente tem que fazer o que?
A gente tem que setar o loading para ser false, tá bom?
Então vamos lá no reducer, off reducer.
Tá bom?
E no caso de ser sucesso, você pode retornar o initial state.
Está tudo ok?
Mas no caso de chefeio, a gente tem que também adicionar loading false.
Vamos dar um refresh.
Se eu clicar entrar, vai abrir o spinner e quando receber a resposta do erro, a gente
vai mandar essa ação, tipo de ação e vai setar o loading para ser false e vai mostrar
os botões de novo.
Você quase não vê, né?
Para ilustrar esse exemplo, eu vou dar um set time out no action creator só para você
ver, você não tem que fazer isso.
Aqui quando a gente receber a resposta, eu vou dar um set time out de uns dois segundos
só vai despachar o sucesso ou a fail depois de dois segundos para você ver que está realmente
funcionando.
Eu pedi já tão rápido que você quase não vê o spinner.
Então só vou botar o set time out aqui para despachar a ação somente depois de dois
segundos no caso de sucesso e de fail.
Você não precisa fazer isso, tá bom?
É só para ilustrar o exemplo.
Vou clicar, você note um, dois e volta, tá bom?
Você está novamente um, dois, volta.
Vamos dar o sucesso, caso de sucesso para ver se está funcionando.
Sem a certa, entrar um, dois.
Está aí.
É.
Dois, três, quatro, cinco, seis.
Tudo ok?
Fui para lá, deu o spinner, botão apareceu de novo.
Tá?
Vou remover esse time out, voltar aqui como era antes.
Tá bom?
Tá bom?


0005-22 Estado de Carregamento na Submissão do Formulário

Cadastro de Usuário no Firebase Através do createUserWithEmailAndPassword

# Resumo do Transcrição

A conversa aborda a implementação da funcionalidade de registro de um novo usuário em uma aplicação. O autor planeja usar o mesmo formulário do login para o cadastro, modificando a lógica para criação de usuário. Abaixo estão os principais pontos discutidos:

## Principais Tópicos

1. **Criação do Botão de Registro**:
   - O autor sugere adicionar um botão de "cadastrar" no formulário de login.
   - A função `onRegisterPress` será adicionada para lidar com o registro.

2. **Uso de Redux**:
   - Os mesmos estados e inputs usados no login serão aplicados no cadastro.
   - Uma nova ação chamada `registerUser` será definida para gerenciar a criação do usuário.

3. **Implementação do Action Creator**:
   - O `registerUser` usará a função `createUserWithEmailAndPassword` do Firebase.
   - A função precisa receber o email e a senha do usuário, que serão extraídos de um objeto.

4. **Tratamento de Respostas**:
   - O código incluirá tratamento para sucesso e erro, usando `then` e `catch` para lidar com a resposta do Firebase.

5. **Actions e Reducers**:
   - Novas ações (`registerUserLoading`, `registerUserSuccess`, `registerUserFail`) serão criadas para gerenciar o estado do registro.
   - O reducer deverá lidar com esses novos tipos de ação e atualizar o estado da aplicação adequadamente.

6. **Feedback e Loading**:
   - Será implementado um estado de loading para quando o registro estiver em andamento, mostrando um spinner.
   - Ao finalizar o registro, o estado deverá ser atualizado para refletir o sucesso ou falha do processo.

7. **Teste e Verificação**:
   - O autor mencionou que testou a funcionalidade registrando usuários no Firebase e que tudo funcionou corretamente.

### Considerações Finais
O grupo está progredindo na implementação da funcionalidade de registro, com várias etapas definidas e uma abordagem clara para a integração com o Firebase e Redux. O uso de mensagens de erro e estados de loading melhora a experiência do usuário durante o processo de cadastro.

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.


0005-23 Cadastro de Usuário no Firebase Através do createUserWithEmailAndPassword

Término da Implementação do Cadastro de Usuário

# Summary

In this transcript, the speaker discusses debugging and enhancing a user registration feature in a web application. 

1. **Set Timeout Usage**: The speaker adds a `setTimeout` of 1.5 seconds to simulate loading when a user attempts to register. This is meant to demonstrate the appearance of a loading spinner.

2. **Error Handling**: The speaker identifies that error messages (like incorrect email format and password length) are displayed when registration attempts fail. They emphasize the importance of clearing error messages upon dispatching a loading action.

3. **Auth Reducer Update**: The speaker suggests updating the auth reducer to reset the error message when a load action occurs—specifically during login and registration.

4. **Notification of Success**: After the successful creation of a user, they propose displaying a success message prompting the user to log in with their credentials. This involves:
   - Adding a `success` message to the application state.
   - Implementing a function called `renderMessage` to display either error or success messages depending on the context.

5. **Refactoring**: The speaker plans to consolidate functionality by modifying `renderError` into `renderMessage`, which will handle both error and success messages.

6. **Action Creator Updates**: The speaker discusses modifying the `registerUserSuccess` action to include a success message and updates in the reducer to maintain this success message in the state.

7. **Testing**: The final steps involve testing the registration feature to ensure that the success message displays correctly after a user is created. There is also a step to remove the earlier added `setTimeout` as it is no longer needed.

Overall, the discussion focuses on improving user feedback during registration by effectively handling error and success states. 

---

This summary provides a clear overview without delving into each line of dialogue, focusing instead on the main points of the development process and changes suggested.

vai para a espina porque não tem o set time out, né?
Deixe-me botar o set time out para você ver que está funcionando, ok?
Vou lá para o action creator do register,
botar esse cara no set time out.
Bota um segundo e meio.
Não precisa digitar isso, eu estou lá digitando para demonstrar que o spinner está aparecendo.
Carregando.
Vamos lá salvar.
Vamos botar o...
Clicar e extraar.
Erro, né? Tudo ok. O eio está aparecendo.
Vou botar o meu e-mail, está dizendo que o e-mail não está formatado bem.
Agora está dizendo que o password tem que ser 6.
Mas se você notar uma coisa aconteceu lá, né?
Quando a gente deu cadastrar,
parece que o e-mail está errado, sei o quê.
No momento que eu ajudei o e-mail e cliquei em cadastrar,
você notar que a mensagem está aqui de erro.
Então, a gente deve limpar essa mensagem de erro no momento que a gente despachar a ação de loading, tá bem?
Tá bom?
Para aceitar isso, vamos voltar aqui para o auth reducer.
E quando dá o load, a gente também quer remover esse erro.
Então, eu vou botar Error para ser vazio.
No momento que dá o load do login e também do register.
Tá bom? Adicione isso.
Não adicione isso, a mensagem de erro vai ficar aparecendo do lá com o spinner.
Então, detalhe.
Vamos lá salvar.
Vamos tentar novamente testar, cadastrar para a semestras de erro, ajeite o e-mail.
Password must be 6 character long, não sei o quê.
Note que eu estou usando usuário que já existe.
E o meu address is already in use.
Então, mostrou o erro e deu certo.
Agora vamos criar uma pessoa que não existe.
Deu sucesso, limpou o formulário, tirou a mensagem de erro e tudo.
Tá tudo ok.
E aqui é a resposta, criou usuário e foi no Firebase Console.
E atualizar que pareceu o Jenny.
E deu tudo certo.
Então, o que eu quero fazer é mostrar uma mensagem aqui dizendo que você foi cadastrado com sucesso, por favor, entre os seus credenciais.
Tá bom?
Como a gente vai fazer isso?
A gente pode dar uma alerta ou pode montar a mensagem na tela aqui.
Uma maneira que a gente adiciona, do mesmo que tenha uma mensagem de erro, adicionar uma mensagem de sucesso e botar ela para ser verde.
Então, vamos fazer isso?
Vamos lá.
Aqui no estado, eu vou adicionar essa mensagem.
Sucesso.
E vou no login form.
E da mesma maneira que a gente adicionou essa mensagem de texto com uma função render error.
Eu quero que você faça a função render sucesso.
Né? Mensagem de sucesso, né?
This render error, this render sucess.
Você pode, na verdade, usar a mesma função?
Eu vou ver.
Talvez a gente pode mudar render error para render message.
E se tiver um erro, mostra o erro.
Se não, se tiver um mensagem de sucesso, mostra com a cor verde e assim por diante.
Então, vamos fazer isso.
O que eu quero que você faça é mudar o nome da função desse cara para render message.
Mensagem.
E dentro do render message, você vai checar se tiver o erro, mostra esse mensagem vermelho.
Se tiver, se não, se tiver um sucesso,
desse próprio sucesso, mande o mensagem de texto em verde.
Tá bom?
E aí, dá tudo certo? Vamos lá.
Vou mudar o nome para render message.
Ou alert, depende se você vai fazer alert.
Deve ser um nome melhor, mas vou dar message.
Message.
Render message, mudeu o nome.
This props error.
Else if this props success,
Return, ok.
Text com this props success, mensagem e estilo cor verde.
Tá bom?
Agora, a gente não tem sucesso ainda nas propriedades, porque a gente tem que injetar lá no final.
Map this patch to props, so, desculpa, map state to props, add some success.
Success.
Final auth.
Tudo ok? E para mostrar mensagem de sucesso,
a gente vai clicar lá no action creator do register user, cd, certo?
Then, você vai passar o register user sucesso, também vai passar um payload com uma mensagem de sucesso.
Nesse caso, pode ser, você, pode fazer aqui ou pode fazer dentro do off reducer, tá bom?
Se você não quiser fazer aqui, vamos deixar aqui, vamos lá para o register user sucesso, vamos fazer lá mesmo.
Here, dentro do off reducer, no register user sucesso, se for sucesso, eu quero que você adicione mensagem de sucesso, tá bom?
Success.
Você pode retornar ao initial state, assim.
E adicionar sucesso.
Cadastro.
Pode fazer uma mensagem, você foi cadastrado.
Cadastro.
Alguma coisa assim, cadastro foi ok entre seus credenciais.
Esqueci de fechar o objeto.
Tá bom?
Pode mandar uma mensagem assim.
Nem postado, mas também adiciona mensagem de sucesso, o cara acha ok, favor entre seus credenciais.
Então, a gente pode botar essa mensagem lá do, aqui, como payload ou pode deixar aqui.
Depende de você, normalmente a gente fez com erro, pegou do payload, então, se você quiser fazer isso com um exercício,
manda mensagem de sucesso como action.payload.
Vou salvar.
Testar.
Cadastro.
Nada.
Criar um usuário.
Deu eu, um dois três quatro cinco seis, cadastra.
Cadastro ok, por favor, entre seus credenciais.
Ana, meu ponto com.
Um dois três quatro cinco seis, entrar.
Tudo ok.
Volta para ver se não tem nenhum mensagem de sucesso.
Tudo bem.
Tá bom?
Vou remover o set time out.
Não precisamos mais do meu action creator.
Vou remover o set time out.
Não precisamos mais do meu action creator.
Bom.
