#VemProReact #JEP #6

#VemProReact

Correção da atividade!

cd workspace
npx create-react-app usuario-dashboard

usuario-dashboard

cd usuario-dashboard
yarn add @bayon/commons

@bayon

yarn add apollo-boost apollo-link-context react-apollo graphql

Apollo Client

#VemProReact

Correção da atividade!

Dados.js

#VemProReact

Correção da atividade!

LotacaoPrincipal.js

#VemProReact

Correção da atividade!

App.js

import React from 'react';

import Dados from './Dados';
import LotacaoPrincipal from './LotacaoPrincipal';

const App = () => (
  <>
    <Dados />
    <LotacaoPrincipal />
  </>
);

export default App;

#VemProReact

Correção da atividade!

apolloClient.js

#VemProReact

Correção da atividade!

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

import { ApolloProvider } from 'react-apollo';
import apolloClient from './apolloClient';

import App from './App';

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <App />
  </ApolloProvider>, 
  document.getElementById('root')
);

#VemProReact

Correção da atividade!

queries.js

import gql from 'graphql-tag';

export const GET_DADOS = gql`
  {
    usuario {
      id
      nome
      documento
      genero
      contato {
        telefone
      }
      cargo {
        descricao
      }
      email
    }
  }
`;

...

#VemProReact

Correção da atividade!

queries.js

...

export const GET_LOTACAO_PRINCIPAL = gql`
  {
    usuario {
      lotacao_principal {
        foro {
          id
          descricao
          municipio {
            nome
          }
        }
      }
    }
  }
`;

...

#VemProReact

Correção da atividade!

App.js

#VemProReact

Correção da atividade!

Quando devo usar 1 <Query />?
Quando devo usar 2 <Query />?

#VemProReact

Correção da atividade!

Como tratar estado de loading?
Como tratar estado de error?

#VemProReact

Live Code!

🤘

#VemProReact

React Fragment

import React from 'react';

const Columns = () => (
  <>
    <td>Hello</td>
    <td>World</td>
  </>
);

Cada componente só pode retornar um elemento
Permitem agrupar uma lista de filhos sem adicionar nós extras ao DOM

import React, { Fragment } from 'react';

const Glossary = ({ items }) => (
  <dl>
    {items.map(item => (
      // Sem a `key`, React irá disparar um aviso
      <Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.description}</dd>
      </Fragment>
    ))}
  </dl>
);

Exemplos:

#VemProReact

Logical NOT (!)

n1 = !true               // !t returns false
n2 = !false              // !f returns true
n3 = !''                 // !f returns true
n4 = !'Cat'              // !t returns false

Double NOT (!!)

n1 = !!true                   // !!truthy returns true
n2 = !!{}                     // !!truthy returns true: any object is truthy...
n3 = !!(new Boolean(false))   // !!truthy returns true: why?
n4 = !!false                  // !!falsy returns false
n5 = !!""                     // !!falsy returns false
n6 = !!Boolean(false)         // !!falsy returns false

#VemProReact

Logical AND (&&)

a1 = true  && true       // t && t returns true
a2 = true  && false      // t && f returns false
a3 = false && true       // f && t returns false
a4 = false && (3 == 4)   // f && f returns false
a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
a6 = false && 'Cat'      // f && t returns false
a7 = 'Cat' && false      // t && f returns false
a8 = ''    && false      // f && f returns ""
a9 = false && ''         // f && f returns false

Executado da esquerda para a direita
Se a lógica der true, retorna o último valor
Se não, retorna o primeiro "não verdadeiro"

Exemplos:

#VemProReact

Logical OR (||)

o1 = true  || true       // t || t returns true
o2 = false || true       // f || t returns true
o3 = true  || false      // t || f returns true
o4 = false || (3 == 4)   // f || f returns false
o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
o6 = false || 'Cat'      // f || t returns "Cat"
o7 = 'Cat' || false      // t || f returns "Cat"
o8 = ''    || false      // f || f returns false
o9 = false || ''         // f || f returns ""
o10 = false || varObject // f || object returns varObject

Executado da esquerda para a direita
Retorna o primeiro valor "não falso"
Se não houver, retorna o último

Exemplos:

#VemProReact

Nullish coalescing (??)

Executado da esquerda para a direita
Retorna o primeiro valor diferente de null ou undefined
Se não houver, retorna o último

o1 = null      ?? "default for A"  // returns "default for A"
o2 = ''        ?? "default for B"  // returns ""
o3 = 42        ?? 0                // returns 42
o4 = 0         ?? true             // returns 0
o5 = undefined ?? ''               // returns ''
o6 = null      ?? undefined        // returns undefined
o7 = false     ?? undefined        // returns false

Exemplos:

#VemProReact

Optional chaining

Executado da esquerda para a direita
Retorna o valor da prop quando existir
Se não houver, retorna o undefined

Exemplos:

const usuario = { contato: { telefone: "(48) 3027-8000" } }

o1 = usuario?.contato?.telefone                     // returns "(48) 3027-8000"
o2 = usuario?.contato?.celular                      // returns "undefined"
o3 = outro_usuario.contato?.telefone                // throws Uncaught ReferenceError
o4 = usuario?.telefone ?? usuario?.contato?.tefone  // returns "(48) 3027-8000"
o5 = usuario?.contato?.phone ?? ""                  // returns ""

#VemProReact

Dúvidas?

#VemProReact

Atividade!

Implementar usando apenas 1 Query
Fazer o tratamento de loading
Fazer o tratamento de error
Definir o campo ID (do usuário) como somente leitura
Definir todos os campos, do LotacaoPrincipal, como somente leitura
Criar uma Mutation para editar os dados que ficaram abertos no formulário vinculada a um botão Salvar
Adicionar um Toast de sucesso a Mutation
Adicionar um Toast de erro a Mutation
Tratar o loading da Mutation no botão Salvar

#VemProReact

Obrigado!