react-brasil/forum

:beer: Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) pra issues

forum's Issues

yup date

https://www.npmjs.com/package/yup#date

jquense/yup#324

Estou tentando utilizar, mas não está validando as datas inicio e fim.

const validaFormAnaliseQuimica = yup.object().shape({
    dataFim: yup.date()
      .when(
        'dataInicio',
        (dataInicio: Date, schema: any) => (dataInicio && schema.min(dataInicio, "A Data Final deve ser maior do que a data inicial"))
      ),
    corrida: yup.string()
      .matches(/^[0-9]*$/, 'Deve-se inserir apenas números')
  })

O que estou fazendo de errado ?

O me´todo Map não está definido?

Olá! Antes de criar essa issue, algumas dicas:

Pesquise no fórum

Será que a issue que você vai criar já não foi criada e/ou até respondida?

1. Utilize a função de busca no topo desse repositório (certifique-se de não estar em um fork)
2. Pesquise assuntos próximos, talvez sua dúvida possa ter sido respondida em alguma issue parecida

Código de Conduta

Como qualquer grupo de discussões, existem algumas regras que devem ser seguidas para proporcionar uma melhor experiência à todos.

• Respeite para ser respeitado. Não escreva algo que possa ofender alguém. Reflita se o texto não é agressivo/mal educado antes de enviar.
• Mantenha as críticas nas idéias e não nas pessoas.
• Não será permitido qualquer tipo de assédio ou discriminação relacionados a características ou escolhas pessoais, bem como bullying, sexismo, racismo ou qualquer outro tipo de ação que possa proporcionar constrangimento aos outros participantes.
• Comporte-se profissionalmente. Os participantes que violarem tais regras serão convidados a se retirar ou banidos dada a gravidade de suas ações.

Outros pontos

• Escreva o português de forma correta e bem pontuado.
• Evite sair do escopo inicial da issue. Caso necessário, crie uma nova issue e mencione o número da issue.
• Se precisar de ajuda em um código, forneça trechos, Gists (recomendamos Codepen pela facilidade de visualização), e lembre-se, ninguém tem a obrigação de resolver seu problema.
• Não seja um monólogo que só fala de si. Interaja com as respostas, cite pessoas, gere uma discussão saudável e construtiva. Afinal, quanto mais informações, mais rico nosso ambiente será e ajudará mais pessoas.

Como utilizar onChange

Senhores, estou com esse problema, como posso resolver ? Estou querendo trocar a variavel de acordo com o meu objeto

` Line 405: Parsing error: Unexpected token, expected "}"

403 | id='calendarIdaVolta'
404 | name='calendarIdaVolta'

405 | onChange={this.state[item.variavel]=> {
| ^
406 | this.setState({
407 | date: date
408 | });`

Objeto
const map = { dateOne: { stateKey: 'date', variavel: date, handler: this.onCalendarOne, }, dateTwo: { stateKey: 'date2', variavel: date, handler: this.onCalendarTwo, } }; const item = map[name];

Obrigado

Redux

O @hnordt criou uma thread no Slack que acabou gerando uma discussão bacana sobre Redux. Sugeriram trazer a discussão pro fórum. Como eu pretendo escrever uma newsletter sobre isso em breve, resolvi abrir isso aqui pra compartilhar algumas ideias. 😊

Na minha concepção, Redux é desnecessário em aplicações pequenas e não escala bem em aplicações grandes.

É importante frisar que esta é a minha humilde opinião baseada na minha experiência: cerca de 2 anos arquitetando e mantendo Redux em diversos projetos pequenos (Trama), alguns médios (Storia) e pelo menos um bem grandinho com vários apps compartilhando módulos do Redux (HelloMD). Além disso, eu mantenho um boilerplate que vem sendo usado como base por centenas de outros projetos.

Vou citar aqui os problemas que eu vejo (e que eu mesmo já tive) que normalmente são resultado de tentativas ineficázes de escalar com Redux.

Acoplar a estrutura do Redux à estrutura de componentes

A estratégia mais comum que eu vejo por aí é tentar encapsular os módulos do Redux usando a estrutura de componentes. Algo como nesta árvore:

src
└── components
    └── Post
        ├── components
        ├── containers
        ├── actions.js
        ├── index.js
        ├── reducer.js
        ├── saga.js
        └── selectors.js

A própria documentação do Redux desencoraja isso:

Because the store represents the core of your application, you should define your state shape in terms of your domain data and app state, not your UI component tree

— redux.js.org/recipes/structuringreducers...

Acontece que, muitas vezes, — especialmente antes da nova context API ser lançada — fazia total sentido usar o Redux para controlar alguns estados da UI, como um LoginModal, por exemplo, que deve poder ser aberto de qualquer outra parte do app.

Isso gera um problema de arquitetura do qual você não consegue se livrar de uma forma simples usando Redux.

O engenheiro vai sempre se perguntar: eu coloco esses arquivos dentro da pasta do componente? Coloco junto com os outros estados globais? Coloco as actions fora e o reducer dentro?

Essas dúvidas normalmente indicam uma arquitetura fraca. O que não é exatamente um problema. Afinal, nós estamos sempre trabalhando com tecnologias novas e requisitos que mudam com o tempo. Acertar a arquitetura no dia zero não é nem algo que deve ser perseguido.

Por isso, escolher tecnologias que facilitem refatoração é fundamental. Nesse sentido, Redux é uma péssima escolha. Dependendo do tamanho e da atual fragmentação do seu app, pode ser extremamente difícil identificar quais reducers e/ou sagas estão ouvindo determinada action, e qualquer mudança aí pode quebrar algum fluxo de forma silenciosa.

Organizar o Redux em módulos auto-contidos

Os módulos do Redux de uma aplicação devem ser considerados um processo separado, com entradas (actions) e saídas (selectors). Para o resto da aplicação, o que acontece no meio disso (thunks, sagas, middlewares etc.) não deveria importar.

Um simples teste de integração do Redux poderia ser descrito assim:

1. dispatch an action
2. wait
3. check state

Dito isso, a melhor forma de estruturar o Redux dentro de uma aplicação é mantê-lo isolado do resto da aplicação (numa pasta store, por exemplo).

Se tiver isso em mente, você pode eventualmente migrar de React pra Vue, pra Angular, ou mesmo pra Vanilla JS, e continuar usando a mesma store. Basta que os bindings (react-redux, por exemplo) sejam alterados.

No entanto, mesmo que isso resolva o problema de acoplamento, organizar reducers, sagas, actions, selectors e middlewares ainda é um problema.

Qualquer tentativa de separar — e portanto escalar — reducers, sagas e middlewares é uma ilusão. No final, só vai existir um de cada. Por outro lado, não é viável lidar com todo o estado de uma aplicação grande em um único reducer.

Você pode usar ducks, redux-modules ou outra abordagem. A realidade é que não dá pra garantir que os módulos sejam realmente auto-contidos. Eles eventualmente vão precisar se comunicar entre si.

E mais uma vez isso gera um problema de arquitetura do qual você não consegue se livrar de uma forma simples usando Redux.

Separar por tipo: actions, reducers, sagas etc.

Essa é a forma como o Spectrum é estruturado, por exemplo, e provavelmente uma das mais comuns entre os iniciantes. Hoje, se eu fosse trabalhar com Redux, usaria ela.

No final, dentro de cada pasta, ainda vão existir módulos. Essa estrutura, no entanto, nos dá uma maior liberdade nessa modularização, já que você pode agrupar actions de uma forma, e reducers de outra. O que faz mais sentido, já que um reducer pode responder a actions que não necessariamente estariam agrupadas.

Ainda assim, isso continua não resolvendo os problemas relacionados ao acoplamento com a UI. Mesmo o pessoal do Spectrum teve que criar actions e um reducer pra controlar o estado do modal, onde eles inclusive armazenam props. Na HelloMD, nós fizemos algo muito parecido.

O que eu uso hoje?

Eu criei o Constate com o objetivo principal de resolver meus problemas com escalabilidade no gerenciamento de estado.

A partir dessas experiências, eu pude classificar o estado de uma aplicação em três tipos, considerando a forma como eles são definidos: local, local-global e global.

Era de fundamental importância que eu pudesse migrar de local para local-global com facilidade, e que o global fosse usado só quando realmente necessário.

Além disso, eu precisava de uma única biblioteca que me permitisse fazer isso tudo com todo o tooling disponível no Redux (devtools, time travel etc.).

Local

É aquele onde você usa setState e this.state no próprio componente, normalmente relacionados à UI. Por exemplo:

• Modal
• Dropdown
• Tabs

No Constate, isso é feito assim:

<ModalContainer>
  {({ open, close, isOpen }) => (
    <>
      <Button onClick={open} />
      <Modal isOpen={isOpen} onRequestClose={close} />
    </>
  )}
</ModalContainer>

Local-global (ou contextual)

É a maior parte do estado global. É aquele que você quer programar como se fosse local, mas quer que várias partes do app tenham acesso (o que gera a necessidade de separar redux em módulos). Por exemplo:

• Modal
• Notification (Snackbar)
• Authentication
• Resources (Fetch)
• Entities (Normalization)

No Constate, isso é feito assim (perceba que é só uma prop a mais —context):

<Provider devtools={process.env.NODE_ENV === "development"}>

  <ModalContainer context="my-modal">
    {({ open }) => <Button onClick={open} />}
  </ModalContainer>

  <ModalContainer context="my-modal">
    {({ close, isOpen }) => (
      <Modal isOpen={isOpen} onRequestClose={close} />
    )}
  </ModalContainer>

</Provider>

Global

É o que você escreve com o objetivo de fazer estados local-global se comunicarem.

Por exemplo, se você quiser manter em um contexto a última action disparada em qualquer outro contexto, isso poderia ser feito assim no Constate:

function onUpdate({ context, type, state, setContextState }) {
  if (context !== "lastAction") {
    setContextState("lastAction", {
      context,
      type,
      state: state[context]
    })
  }
}

<Provider onUpdate={onUpdate}>
  <Container context="lastAction">
    {({ context, type, state }) => (
      ...
    )}
  </Container>
</Provider>

Enfim, seria legal que vocês deixassem suas ideias, opiniões, experiências etc.

Como criar um pdf do resultado de uma consulta

Boa noite!
Estou tentando criar um relatório em PDF com o resultado de uma consulta, porém estou sem norte algum para fazer!
Poderiam me nortear!
Obrigado!

Método do Map não está Definida?!

Boa tarde!!

Estou com um projeto para de um processo seletivo. Eu estou tendo este problema, mas eu realmente não estou conseguindo entender por que isto está acontecendo e não consigo encontrar a solução para isto. Bom eu sei que o método map só funcionar com variáveis de Array, no entanto o código eu declarei uma variável chamada catalogo[] e nele está os três parametros que é preciso ser declarados ,

https://github.com/brunopeople/teste-profite/tree/brunopessoa

Como atualizar setState dentro de uma função assincrona

Olá, estou aprendendo React Native e estou tendo algumas dificuldades na atualização do setState e do bind. Bom, meu problema é o seguinte:

Vou fazer uma busca em um WebService SOAP e preciso atualizar a lista de itens na tela. Até o momento, se eu der console.log na Array interna da função de enviaRequest, eu consigo visualizar todos os dados, mas não consigo atualizar no setState criado no constructor da página.

Não sei se é o correto, colocar no próprio botão de Input no evento onSubmitEditing o envio da função que fiz para a request. Vi alguns tutoriais criando uma função só para atualizar o setState recebendo o retorno de outra função, mas mesmo assim não consegui fazer.

Vou colocar o código anexado.
envia.txt

Espero que me ajudem.

Obrigado.

`

constructor(props) {
    super(props);
    this.state = { text: '' };
    this.state = { itens: [] };
    Loading.load( () => this.setState({ text: 'Pesquisar Itens', loaded: true }) );
}

clearInput = () => {
    this.setState({ text: '' })
}    

enviaRequest = () => {
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', webServiceURL, true);

    xmlhttp.onreadystatechange = function () {
        
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {  
                
                // array de saída
                let objs = [];   

                let DOMParser = require('xmldom').DOMParser;
                let doc = new DOMParser().parseFromString(xmlhttp.response, 'text/xml');
                      
                // recebe valores do xml acima         
                let ID = doc.getElementsByTagName('ID');
                let ITEM = doc.getElementsByTagName('ITEM');
                    
                for (var i=0; i < ID.length; i++) {
                    // atualiza array de saída
                    objs.push({
                        id: ID[i].textContent,
                        item: ITEM[i].textContent,
                    })
                }            
                // atualiza state (com erro)                  
                this.setState({ itens: objs });                 
            }
        }        
    }
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xmlhttp.send(soapMessage);  
}

render() {
    return (
        <Fragment>   
            {   this.state.loaded  ? 
                <View style={CSS.ContainerApp}>     
                    <TextInput {...this.props} 
                        returnKeyType="search"                           
                        onSubmitEditing={ () => this.enviaRequest() }
                    />                  
                    <View>
                        <ScrollView>                                
                            { 
                                this.state.itens.map(item => ( <Text key={item.id}>{ item.item }</Text> ))   
                            }
                        </ScrollView>
                    </View>                        
                </View> 
            }                                      
        </Fragment>
    );        
}

`

Melhor arquitetura para SSR?

Na sua opinião, qual melhor arquitetura para construir uma aplicação React com SSR?

Por arquitetura quero dizer:

1) Organização de arquivos e pastas;
2) Tecnologias utilizadas;
3) Gerenciador de estado global;
4) Requisições(cliente e servidor);
5) Sistema de rotas(com middlewares, preload de dados,..);
6) Estilização de componentes;
etc..

TypeError: Cannot read property 'toLocaleString' of undefined

Estou tentando retornar o valor do preço de um produto com o formato de R$ 20,00 BRL, daí eu estou utilizando a função toLocaleString, mas está dando como undefinida?? e não sei por que?

https://github.com/brunopeople/teste-profite/tree/brunopessoa

Componentes Cross-Platform

Alguém já teve experiência com ou estudou sobre reutilizar componentes react tanto para web quanto para Native ⁉️

Discussão que começou numa thread do Slack:
https://react-brasil.slack.com/archives/C2FML7RQX/p1536703929000100

No meu caso, não estou interessado em fazer uma mesma app que eu consiga buildar para diferentes plataformas(web, mobile, desktop, vr, etc..), MAS sim uma lib de componentes para que projetos de diferentes plataformas possam importá-lo e assim manter uma consistência visual(obedecendo um designsystem por ex..).