#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:
- Hook API (makeStyles)
- Styled components API (styled)
- Higher-order component API (withStyles)
#VemProReact
Live Debug!
🤘
#VemProReact
Bayon Scripts
yarn add --dev @bayon/scriptsPara instalar:
Referências para estudos:
#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:
yarn add @bayon/smarts @bayon/i18n @react-keycloak/web keycloak-js react-router-domPara instalar:
#VemProReact
Bayon i18n
yarn add @bayon/i18nPara instalar:
Arquivo de referência das traduções:
Referências para estudos:
#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!
#VemProReact #JEP #8
By Softplan Planejamento e Sistemas
#VemProReact #JEP #8
High Order Components; @bayon Styles API; @bayon/scripts; @bayon/smarts; @bayon/i18n
