#VemProReact #JEP #8

#VemProReact

Correção da atividade!

const authLink = setContext((_, { headers }) => {
  const lotacao = localStorage.getItem('lotacao');
  const token = localStorage.getItem('jep_token');

  return {
    headers: {
      ...headers,
      lotacao,
      authorization: `Bearer ${token}`
    }
  }
});

apolloClient.js:

#VemProReact

Correção da atividade!

File structure:

#VemProReact

Correção da atividade!

const [openDadosPessoais, setOpenDadosPessoais] = useState(true);
const [openDadosContato, setOpenDadosContato] = useState(false);
const [openDadosFuncionais, setOpenDadosFuncionais] = useState(false);

...

<Collapse
  expanded={openDadosPessoais}
  onChange={() => setOpenDadosPessoais(open => !open)}
>
  <CollapseTitle positionIcon="end">
    Dados principais
  </CollapseTitle>
  <CollapseContent>
    <Grid container spacing={3}>
      <Grid item xs={1}>
        <Input
        
...

Dados.js:

#VemProReact

Correção da atividade!

const generoOptions = [
  { value: "FEMININO", label: "Feminino" },
  { value: "MASCULINO", label: "Masculino" }
];

...

<Select
  name="genero"
  label="Gênero"
  placeholder="genero"
  size="small"
  options={generoOptions}
  value={generoOptions.find(({ value }) => usuarioForm?.genero === value) ?? null}
  onChange={e => {
    setUsuarioForm(currentUsuario => ({
      ...currentUsuario,
      genero: e.value
    }));
  }}
  disabled={loading}
/>
        
...

Dados.js:

#VemProReact

Correção da atividade!

Dados/index.js
SelectCargos.js
debounce.js

#VemProReact

High Order Components

Na teoria:

São uma forma de reaproveitar alguma lógica entre os componentes
São uma função que recebe um componente e retorna um novo componente
Permite a composição de componentes
Podem ser similares às Hooks

#VemProReact

High Order Components

Na prática:

import { withStyles } from '@bayon/commons';

...

const Dados = ({ classes, usuario }) => {

...

};
        
...

export default withStyles(styles)(Dados);

import { withTranslation } from '@bayon/i18n';
import { withStyles, withToast } from '@bayon/commons';

const withCommon = (styles) => (Component) =>
  withToast(withTranslation(['common'])(withStyles(styles)(Component)));

export default withCommon;

#VemProReact

Bayon Styles API

Referências para estudos:

http://bayon.softplan.com.br/commons/components/styles-api

Hook API (makeStyles)
Styled components API (styled)
Higher-order component API (withStyles)

#VemProReact

Live Debug!

🤘

#VemProReact

Bayon Scripts

yarn add --dev @bayon/scripts

Para instalar:

Referências para estudos:

http://bayon.softplan.com.br/core/bayon-scripts

#VemProReact

Bayon Scripts

Para usar:

...

"scripts": {
  "start": "bayon-scripts-lib start",
  "build": "bayon-scripts-lib build",
  "lint": "bayon-scripts-lib lint",
  "test": "bayon-scripts-lib test",
  "coverage": "bayon-scripts-lib test --coverage"
},

...

{
  "singleQuote": true
}

package.json

.prettierrc

#VemProReact

Bayon Smarts

Componentes inteligentes do Bayon
Tem regras de negócio aplicadas
Vamos focar no Auth
É muito usado nos projetos SAJ 6

Referências para estudos:

http://bayon.softplan.com.br/smarts/

yarn add @bayon/smarts @bayon/i18n @react-keycloak/web keycloak-js react-router-dom

Para instalar:

#VemProReact

Bayon i18n

yarn add @bayon/i18n

Para instalar:

https://git-unj.softplan.com.br/saj/unj/unj-saj6/unj-saj6-dicionarios/unj-saj6-dicionario-react/blob/master/lang/pt-BR/common.json

Arquivo de referência das traduções:

Referências para estudos:

http://bayon.softplan.com.br/core/bayon-i18n

#VemProReact

Bayon i18n

import { withTranslation } from '@bayon/i18n';

...

const Dados = ({ t, usuario }) => {

...<p>{t('CHAVE_DA_TRADUCAO')}</p>

};
        
...

export default withTranslation(['common'])(Dados)

Para usar:

import { BayonI18NextProvider } from '@bayon/i18n';

...

<BayonI18NextProvider>
  <App />
</BayonI18NextProvider>

...

#VemProReact

Dúvidas?

#VemProReact

Atividade!

Adicionar um Header (sem menu)
Atualizar o @bayon/commons para a última versão
Aplicar alguma(s) das Styles API e melhorar o layout
Instalar o @bayon/scripts e resolver os erros de lint de todos os arquivos* (.prettierrc, /dev e /lib)
Implementar um componente Auth com a função USR_USUARIOS_ACESSAR para controlar a visibilidade dos dados do usuário
Implementar um componente Auth com a função USR_USUARIOS_ALTERAR para controlar a edição dos dados do usuário
Fazer a validação dos campos obrigatórios no formulário
Substituir o texto do botão "Salvar" pela tradução SAVE

#VemProReact

Obrigado!