#VemProReact #JEP #7

#VemProReact

Correção da atividade!

App.js

#VemProReact

Correção da atividade!

Dados.js

<Input 
  fullWidth={true} 
  name="id" 
  label="ID" 
  placeholder="id" 
  size="small" 
  value={usuarioForm?.id || ''} 
  disabled={true} 
/>

LotacaoPrincipal.js

#VemProReact

Correção da atividade!

mutations.js

import gql from 'graphql-tag';

export const UPDATE_USUARIO = gql`
  mutation(
    $id: String!
    $nome: String!
    $documento: String!
    $genero: USR_e_genero_type!
    $contato: USR_contato_input_type_input
    $cargo: USR_cargo_input_type_input
  ) {
    update_usuario(
      input: {
        id: $id
        nome: $nome
        documento: $documento
        genero: $genero
        contato: $contato
        cargo: $cargo
      }
    ) {
...

...
      id
      nome
      documento
      genero
      contato {
        email
        telefone
      }
      cargo {
        id
        descricao
      }
    }
  }
`;

#VemProReact

Correção da atividade!

Dados.js

<Mutation 
        mutation={UPDATE_USUARIO} 
        onCompleted={({ update_usuario }) => {
          setUsuarioForm(update_usuario)

          enqueueToast('Usuário atualizado com sucesso!', { type: 'success' });
        }}
        onError={() => {
          setUsuarioForm(usuario);

          enqueueToast('Não foi possível atualizar o usuário!', { type: 'error' });
        }}
      >
        {(updateUsuario, { loading }) => (
          <>
            <form
              onSubmit={e => {
                e.preventDefault();

                updateUsuario({ variables: usuarioForm });
              }}
            >
...

#VemProReact

Correção da atividade!

Dados.js

...
<Button 
  type="submit" 
  loading={loading} 
  disabled={loading}
>
  Atualizar os dados do usuário
</Button>
...

#VemProReact

localStorage

É um objeto do tipo Storage
Dados válidos e acessíveis para todas as abas (do mesmo domínio)
Não expiram
Não é limpo ao fechar o navegador ou reiniciar o PC

#VemProReact

localStorage

Atribuir valores:

localStorage.setItem('chave', 'valor'); // RECOMENDADO

localStorage['chave'] = 'valor';
localStorage.chave = 'valor';

Recuperar valores:

localStorage.getItem('chave'); // RECOMENDADO

localStorage['chave'];
localStorage.chave;

#VemProReact

sessionStorage

Similar ao localStorage
Também é um objeto do tipo Storage
Dados válidos e acessíveis somente na aba atual
Expiram (quando o navegador/aba é fechado)
Uma nova aba gera uma nova sessão

#VemProReact

sessionStorage

Atribuir valores:

sessionStorage.setItem('chave', 'valor'); // RECOMENDADO

sessionStorage['chave'] = 'valor';
sessionStorage.chave = 'valor';

Recuperar valores:

sessionStorage.getItem('chave'); // RECOMENDADO

sessionStorage['chave'];
sessionStorage.chave;

#VemProReact

Estrutura de pastas

Depende do cenário/projeto
Existem algumas abordagens possíveis
O que funciona melhor, geralmente, é um misto de separação por responsabilidade e domínios
Estamos definindo oficialmente um padrão Softplan

Na teoria:

#VemProReact

Estrutura de pastas

Na prática (projeto Dashboard Usuário):

Podemos ter uma pasta para os arquivos principais e essenciais (core)
Podemos ter uma pasta para os components
Podemos transformar um arquivo de componente
em pasta e ter outra pasta components lá dentro
Podemos ter uma pasta para os services (GraphQL)
Podemos manter alguns arquivos na raiz

#VemProReact

Dúvidas?

#VemProReact

Atividade!

Mover token e lotacao para o localStorage
Criar as pastas core, components e services/graphql, movendo os arquivos necessários para cada uma
Criar 3 divisões no componente Dados para melhor organizar os campos
Transformar o campo gênero em um Select, exibindo apenas opções válidas (fixo)
Transformar o campo cargo em um Select, exibindo apenas opções válidas (dinâmico)
Definir os campos ID, nome, documento e gênero como obrigatórios
Resolver ou justificar todos os erros e warnings exibidos no console do navegador

#VemProReact

Obrigado!