Added confirmation to delete contact

WalissonPires · Mar 17, 2024 · 452ddef · 452ddef
1 parent 8a4d110
commit 452ddef
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/src/components/ContactsContainer/index.tsx b/src/components/ContactsContainer/index.tsx
@@ -11,6 +11,10 @@ import { Contact } from "../../domains/contacts/entities";
 import { ContactsApi } from "../../domains/contacts/client-api";
 import { AppToast } from "../../common/ui/toast";
 import { AppError } from "../../common/error";
+import { ModalUtils } from "../Modal/Container/state";
+import { ConfirmModal } from "../Modal/Confirm";
+
+const modalDeleteConfirmId = 'contact-delete-confirm';
 
 export default function ContactsContainer() {
 
@@ -27,7 +31,23 @@ export default function ContactsContainer() {
     groupsId: filters.groups
   });
 
-  const handleDeleteContact = async (contact: Pick<Contact, 'id'>) => {
+  const handleShowDeleteContactConfirmModal = (contact: Pick<Contact, 'id'>) => {
+
+    ModalUtils.show({
+      id: modalDeleteConfirmId,
+      modal: <ConfirmModal
+        title="Deletar usuário"
+        message="Tem certeza que deseja excluir esse usuário?"
+        onDone={handleDeleteContact(contact)} />
+    });
+  };
+
+  const handleDeleteContact = (contact: Pick<Contact, 'id'>) => async (confirmed: boolean) => {
+
+    ModalUtils.hide(modalDeleteConfirmId);
+
+    if (!confirmed)
+      return;
 
     setLoading(true);
     try {
@@ -56,7 +76,7 @@ export default function ContactsContainer() {
         error={error}
         hasMore={hasMore}
         triggerLoadMore={() => loadNextPage()}
-        onDeleteContact={handleDeleteContact} />
+        onDeleteContact={handleShowDeleteContactConfirmModal} />
     </>
   )
 }
diff --git a/src/components/MessageTemplatesView/index.tsx b/src/components/MessageTemplatesView/index.tsx
@@ -10,6 +10,10 @@ import { Button } from "../Form";
 import MessageTemplateCard from "../MessageTemplateCard";
 import { useMessageTemplates } from "./hooks";
 import { useLoading } from "../AppLayout/Loading/hooks";
+import { ModalUtils } from "../Modal/Container/state";
+import { ConfirmModal } from "../Modal/Confirm";
+
+const modalDeleteConfirmId = 'message-template-delete-confirm';
 
 export default function MessageTemplatesView() {
 
@@ -22,7 +26,23 @@ export default function MessageTemplatesView() {
 
   const getHandleMessageTemplateSelected = (messageTemplateId: string) => () => router.push(AppRoutes.viewMessageTemplate(messageTemplateId));
 
-  const handleDeleteMessageTemplate = (messageTemplateId: string) => async () => {
+  const handleShowDeleteMessageTemplateConfirmModal = (messageTemplateId: string) => async () => {
+
+    ModalUtils.show({
+      id: modalDeleteConfirmId,
+      modal: <ConfirmModal
+        title="Deletar modelo de mensagem"
+        message="Tem certeza que deseja excluir esse modelo de mensagem?"
+        onDone={handleDeleteMessageTemplate(messageTemplateId)} />
+    });
+  };
+
+  const handleDeleteMessageTemplate = (messageTemplateId: string) => async (confirmed: boolean) => {
+
+    ModalUtils.hide(modalDeleteConfirmId);
+
+    if (!confirmed)
+      return;
 
     setLoading(true);
 
@@ -50,7 +70,7 @@ export default function MessageTemplatesView() {
         <ul className="divide-y">
           {data.map(item =>
             <li key={item.id}>
-              <MessageTemplateCard messageTemplate={item} onEditClick={getHandleMessageTemplateSelected(item.id)} onDeleteClick={handleDeleteMessageTemplate(item.id)} />
+              <MessageTemplateCard messageTemplate={item} onEditClick={getHandleMessageTemplateSelected(item.id)} onDeleteClick={handleShowDeleteMessageTemplateConfirmModal(item.id)} />
             </li>)}
           {isEmpty && <p className="text-center text-slate-400 p-4">Nenhuma mensagem encontrada</p>}
           {isFirstLoading && <MessageTemplateCard.Skeleton />}