From 491c42f1d581775d2c7c42c51dc0b586ecc9dbc7 Mon Sep 17 00:00:00 2001
From: Robson Tenorio <robson.tenorio@gmail.com>
Date: Sun, 5 Mar 2023 19:04:58 -0300
Subject: [PATCH] =?UTF-8?q?Exibi=C3=A7=C3=A3o=20da=20Msg=20Apaga=20pelo=20?=
 =?UTF-8?q?cliente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WbotServices/wbotMessageListener.ts       | 61 ++++++++++++++++++-
 frontend/src/components/MessagesList/index.js | 34 ++++-------
 2 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/backend/src/services/WbotServices/wbotMessageListener.ts b/backend/src/services/WbotServices/wbotMessageListener.ts
index 2d8a63a2..00ece331 100644
--- a/backend/src/services/WbotServices/wbotMessageListener.ts
+++ b/backend/src/services/WbotServices/wbotMessageListener.ts
@@ -1,3 +1,5 @@
+/* eslint-disable no-plusplus */
+/* eslint-disable no-nested-ternary */
 import { join } from "path";
 import { promisify } from "util";
 import { writeFile } from "fs";
@@ -64,6 +66,52 @@ const verifyQuotedMessage = async (
   return quotedMsg;
 };
 
+const verifyRevoked = async (msgBody: string | undefined): Promise<void> => {
+  await new Promise(r => setTimeout(r, 500));
+
+  const io = getIO();
+
+  try {
+    const message = await Message.findOne({
+      where: {
+        body: msgBody
+      }
+    });
+
+    if (!message) {
+      return;
+    }
+
+    if (message) {
+      // console.log(message);
+      await Message.update(
+        { isDeleted: true },
+        {
+          where: { id: message.id }
+        }
+      );
+
+      const msgIsDeleted = await Message.findOne({
+        where: {
+          body: msgBody
+        }
+      });
+
+      if (!msgIsDeleted) {
+        return;
+      }
+
+      io.to(msgIsDeleted.ticketId.toString()).emit("appMessage", {
+        action: "update",
+        message: msgIsDeleted
+      });
+    }
+  } catch (err) {
+    Sentry.captureException(err);
+    logger.error(`Error Message Revoke. Err: ${err}`);
+  }
+};
+
 const verifyMediaMessage = async (
   msg: WbotMessage,
   ticket: Ticket,
@@ -406,6 +454,7 @@ const handleMessage = async (
       try {
         const array = msg.body.split("\n");
         const obj = [];
+        // eslint-disable-next-line no-shadow
         let contact = "";
         for (let index = 0; index < array.length; index++) {
           const v = array[index];
@@ -419,7 +468,9 @@ const handleMessage = async (
             }
           }
         }
+        // eslint-disable-next-line no-restricted-syntax
         for await (const ob of obj) {
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const cont = await CreateContactService({
             name: contact,
             number: ob.number.replace(/\D/g, "")
@@ -491,6 +542,7 @@ const handleMessage = async (
                   }
                 } */
 
+    // eslint-disable-next-line block-scoped-var
     if (msg.type === "call_log" && callSetting === "disabled") {
       const sentMessage = await wbot.sendMessage(
         `${contact.number}@c.us`,
@@ -504,6 +556,7 @@ const handleMessage = async (
   }
 };
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const handleMsgAck = async (msg: WbotMessage, ack: MessageAck) => {
   await new Promise(r => setTimeout(r, 500));
 
@@ -520,6 +573,7 @@ const handleMsgAck = async (msg: WbotMessage, ack: MessageAck) => {
         }
       ]
     });
+
     if (!messageToUpdate) {
       return;
     }
@@ -535,7 +589,7 @@ const handleMsgAck = async (msg: WbotMessage, ack: MessageAck) => {
   }
 };
 
-const wbotMessageListener = (wbot: Session): void => {
+const wbotMessageListener = async (wbot: Session): Promise<void> => {
   wbot.on("message_create", async msg => {
     handleMessage(msg, wbot);
   });
@@ -547,6 +601,11 @@ const wbotMessageListener = (wbot: Session): void => {
   wbot.on("message_ack", async (msg, ack) => {
     handleMsgAck(msg, ack);
   });
+
+  wbot.on("message_revoke_everyone", async (after, before) => {
+    const msgBody = before?.body;
+    verifyRevoked(msgBody);
+  });
 };
 
 export { wbotMessageListener, handleMessage, handleMsgAck };
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index d3830846..ce832f11 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useReducer, useRef } from "react";
-
 import { 
   isSameDay,
   parseISO,
@@ -7,8 +6,10 @@ import {
 } from "date-fns";
 import openSocket from "../../services/socket-io";
 import clsx from "clsx";
-
-import { blue } from "@material-ui/core/colors";
+import { 
+  blue, 
+  red 
+} from "@material-ui/core/colors";
 import {
   Button,
   CircularProgress,
@@ -252,6 +253,11 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 18,
     verticalAlign: "middle",
     marginRight: 4,
+    color: red[200]
+  },
+
+  deletedMsg: {
+    color: red[200]
   },
 
   ackDoneAllIcon: {
@@ -327,14 +333,14 @@ const reducer = (state, action) => {
 
   if (action.type === "UPDATE_MESSAGE") {
     const messageToUpdate = action.payload;
+
     const messageIndex = state.findIndex((m) => m.id === messageToUpdate.id);
 
     if (messageToUpdate.isDeleted === true) {
-      //toast.info(`Mensagem apagada: ${messageToUpdate.body}  `,{autoClose: false});
       toast.info(<ToastDisplay
         body={messageToUpdate.body}
       >
-      </ToastDisplay>, { autoClose: false });
+      </ToastDisplay>);
     }
 
     if (messageIndex !== -1) {
@@ -742,27 +748,13 @@ const MessagesList = ({ ticketId, isGroup }) => {
                 {message.isDeleted && (
 
                   <div>
-                    <span className={"message-deleted"}
-
-
-                    >Mensagem apagada pelo contato
-
-
-                      <Block
-                        color=""
-                        fontSize="small"
-                        className={classes.deletedIcon}
-                      />
-                      <Block
-                        color=""
-                        fontSize="small"
-                        className={classes.deletedIcon}
-                      />
+                    <span className={classes.deletedMsg}>
                       <Block
                         color=""
                         fontSize="small"
                         className={classes.deletedIcon}
                       />
+                      Mensagem apagada
                     </span>
                   </div>