[Front-end] Substituir a lib de alert sweetalert #240
Labels
Sprint 1 - Modais
Sprint para refatoração dos modais e adicionar context api
Comments
salviotonon
added
the
Sprint 1 - Modais
Ar3secchim
added a commit
that referenced
this issue
Aug 3, 2023
## 📃 Description:
Este pull request tem como objetivo realizar uma refatoração completa do
componente de modal do projeto, adicionando o Modal de Alert,utilizando
a biblioteca Radix UI para melhorar a usabilidade, acessibilidade e a
manutenção do código.
## ✅ Checklist:
- [x] Meu código segue as diretrizes de estilo deste projeto
- [x] Realizei uma auto revisão do meu código
- [x] Minhas alterações não geram novos alertas
- [ ] Adicionei testes para minhas alterações
## 🔄 Main changes:
1. Simplificação do código: O código atual do modal pode estar complexo
e difícil de manter e de reutilizar em diferentes situações. Nesta
refatoração, procurei simplificar a estrutura do modal, removendo
lógicas desnecessárias e dividindo-o em componentes menores, facilitando
a leitura e o entendimento do código.
2. Separação de preocupações: O modal atual pode misturar
responsabilidades, como lógicas de estilos e de manipulação do estado.
Com a refatoração, busquei separar as preocupações, estados tornando o
modal mais reutilizável em diferentes partes do projeto.
3. Acrescentei o modal de Alert para substituir a lib sweetalert. Acabei
decidindo por fazer um componente usando pattern de composição para não
ficar com código muito confuso e cheio de condicionais, além de ter
muitas `props` para cada componente de modal.
4. Estilos: Além de adotar os estilos global para o `ModalRoot`,
seguindo as diretrizes de design da aplicação. Isso garante que o modal
se integre harmoniosamente ao restante da interface e que as mudanças
pontuais de estilo de cada componente fica de responsabilidade do tal.
5. Refatoração dos componentes de que estava utilizando o componente
Modal anteriores para utilizar esse novo `ModalRoot`.
6. Coloquei esse componente `ModalAlert` na lógica do contextApi de
modal.
<aside>
💡 Peço atenção de quem for fazer review principalmente na tipagem, pois
ainda não domino Typescript.
</aside>
## Additional notes:
Separei o componente `Modal` em pequenos componentes. No qual são partes
que podem ser customizadas por si só, sendo assim reutilizadas em outros
componentes.
Esse é o componente `Modal` que tem como responsabilidade apenas de
juntas todas as outras partes (componentes menores).
```jsx
//src/components/Modal/Modal.tsx
// partes do componentes
export const Modal = {
Root: ModalRoot,
Content: ModalContent,
ContentAlert: ModalContentAlert,
Title: ModalTitle,
Description: ModalDescription,
};
```
Componente `ModalAlert` que vai substituir a lib sweetalert. Criado a
partir do `ModalRoot`.
```jsx
//src/components/Modal/ModalAlert/ModalAlert.tsx
const ModalAlert = () => {
const { openModal, closeModal, ALERT_MODAL } = useModal();
return (
<Modal.Root
open={ALERT_MODAL}
onOpenChange={() => closeModal(ModalActionTypes.ALERT_MODAL)}
>
<Modal.ContentAlert>
<Modal.Title text="Tem certeza que deseja mudar a foto do perfil?" />
<Modal.Description text=" " />
</Modal.ContentAlert>
</Modal.Root>
);
};
export default ModalAlert;
```
Componente `ModalAlert` renderizado:
<aside>
💡 Assim que essa PR for concluida faço as substituição da sweetalert
pelo ModalAlert #240
</aside>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A aplicação esta utilizando uma lib de alerts https://sweetalert2.github.io/
precisamos substituir essa lib de alerta por um componente de modal no qual seja possivel adicionar button e descrição e tambem deve estar na context API. com esse componente em mão podemos substituir todas as ocorrencias da lib de alerts swwetAlert2
The text was updated successfully, but these errors were encountered: