Galera como vocês fazem a questão de popups?

[wilsongomes-swe]

Bom dia Galera, tudo blz?

Gostaria de uma opinião sobre como fazer o fluxo de MessageBox em minha aplicação...
Eu criri um componente Dialog que recebe a mensagem e visible true ou false, mas ter de escrever este componente em todos os locais da app onde pode aparecer uma mensagem de erro ou de "Compra efetuada com sucess" por exemplo, está me deixando incomodado, sinto que estou indo contra o DRY (Don't Repeat Yourself).

Outro fluxo que penso seria colocar este componente por fora do conteúdo das rotas e alterar seu estados e sua mensagem por redux ou por context api (no projeto atual não usamos redux), mas usando este estado compartilhado não sei se seria a melhor opção também...

Outra forma que pensei seria talvez fazer por um hook, um hook que me retornasse o componente do alerta e os setStates de visibilidade e mensagem, assim eu não teria o componente escrito no código, e chamaria este hook.

Mas enfim, gostaria de opiniões e saber como seria uma maneira interessante de se fazer centralizando as lógicas do modal apenas nele e não repetindo ele em vários pontos ou ter q ter um componente de modal em todos os lugares q podem gerar mensagem seja de sucesso ou seja de erro.

O que acham? Como fazem? Como fariam?

Muito obrigado!
Abraços

[lucas-barbosa]

Eu particularmente gosto de usar o Swal2 para os alerts.
Em React, eu crio uma função que encapsula o alerta e chamo ela quando preciso, ex:

import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

const Alert = (args) => withReactContent(Swal)
  .fire({
    ...args,
    cancelButtonColor: '#E23337',
    customClass: {
      title: 'modal-title',
      content: 'modal-text'
    }
  });

export default Alert;

Aí quando eu preciso exibir uma mensagem de erro ou qualquer outro aviso, eu chamo a função:

Alert({
  icon: 'error',
  title: 'Erro',
  text: 'Não foi possível realizar a operação. Tente novamente mais tarde'
});

[ninetails]

Minha preferência quando criei alguns eram de usar Portals pra deixar no início ou final do documento, deixando o conteúdo num componente separado.

Mas nunca cheguei a aplicar algo para torná-lo acessível, mais na questão de tirar tabindex de elementos que possam ter foco e estavam fora do diálogo mas não queria fazer algo que fosse alterando o DOM direto.

[wilsongomes-swe]

@lucabarbosa shoow, aqui estamos tentando sem libs, ainda kkk Mas bom ter esse carinha no radar, obrigado!

@ninetails mas usando hook , usando o portal, ou conhece alguma outra maneira em que eu consiga fazer com q o componente fique visível ou não se qualquer parte do app sem usar redux ou context?

Penso em criar o meu componente por fora de td, a nível de app.js, e em meus componentes eu conseguir fazer algo como "showMessageBox("Cadastro efetuado com sucesso")" e esta função fazer com que o componente MessageBox lá na raíz de todos os componentes fique visíve e com o texto, mas sem usar redux ou context api pra issso...

Tem como? rs

[ninetails]

@wilsonneto-dev por isso mesmo usando portal, pra usar no mesmo escopo onde é chamado mas renderizado fora (inclusive fora da <div id="root">, não precisaria deixar ele na raiz do App ou algo do tipo.

Só que talvez comece a se perder se tiver modal chamando modal mas em contrapartida já não é um pattern muito aconselhado.

[wilsongomes-swe]

Entendi, então pensa que o ideal seria de fato ter um componente MessageBox lá no componente onde eu vou usar, por exemplo usar em todas as telas de cadastros ou que terão mensagens de "Cadastro efetuado", assim como em todos os pontos onde eu vou mostrar mensagens de erros que usem este componente?

[ninetails]

Se fizer sentido, sim...

Pros erros de validação faz sentido usar o popup mas por isso o gotcha de UI/UX não recomendar modal como um bom pattern: será que a mensagem de sucesso como cadastro efetuado não seria melhor aplicado sendo uma nova view/página? Uma página onde futuramente vc pode botar mais informações após a submissão dos dados, coisas como links úteis (ex: "Acompanhe seus pedidos" após uma compra num ecommerce) ou mesmo só a mensagem de sucesso, porém vc vai ter por exemplo o tracking de PageView da ação concluída sem muito esforço (evitando acoplar código direto no controle do modal).

[romulosardinha]

Cara, resolvemos isso recentemente.
Estou usando o react-confirm-alert, onde por meio de uma function que pode ter todo design configurado em um componente criado previamente. ficou tão elegante. que adorei.

Fiz de uma forma que , se for um popup de confirmação só executará o código depois do ok.
E um que executa um código async e e abre um popup de loading. só fechando quando retorna um ok.

Isso apenas chamando uma função. Diminuiu e muito a quantidade de código e a bagunça de estados só para controle de popups...

[wilsongomes-swe]

@romulosardinha penso em algo assim mesmo, vou fuçar no código desta lib para entender como fizeram, e ver se não usaram direto a dom tbm, algumas libs q vi como o swwt alert usa a dom direto, não quero fazer algo assim... vaeleeu!

[kivervinicius]

@wilsonneto-dev qual o problema em usar a dom direto?