feat: option to delete messages on whatsapp chat

backend/src/controllers/MessageController.ts

@@ -6,7 +6,7 @@ import { getIO } from "../libs/socket";
 
 import CreateMessageService from "../services/MessageServices/CreateMessageService";
 import ListMessagesService from "../services/MessageServices/ListMessagesService";
-import UpdateMessageService from "../services/MessageServices/UpdateMessageService";
+import DeleteMessageService from "../services/MessageServices/DeleteMessageService";
 import ShowTicketService from "../services/TicketServices/ShowTicketService";
 import DeleteWhatsAppMessage from "../services/WbotServices/DeleteWhatsAppMessage";
 import SendWhatsAppMedia from "../services/WbotServices/SendWhatsAppMedia";
@@ -88,9 +88,13 @@ export const remove = async (
 
   const messageDeleted = await DeleteWhatsAppMessage(messageId);
 
-  await UpdateMessageService({ messageData: { isDeleted: true }, messageId });
+  const message = await DeleteMessageService(messageDeleted);
 
-  console.log(messageDeleted);
+  const io = getIO();
+  io.to(message.ticketId.toString()).emit("appMessage", {
+    action: "update",
+    message
+  });
 
   return res.json({ ok: true });
 };

backend/src/services/MessageServices/DeleteMessageService.ts

@@ -0,0 +1,9 @@
+import Message from "../../models/Message";
+
+const DeleteMessageService = async (message: Message): Promise<Message> => {
+  await message.update({ isDeleted: true });
+
+  return message;
+};
+
+export default DeleteMessageService;

backend/src/services/MessageServices/UpdateMessageService.ts

@@ -1,20 +0,0 @@
-import Message from "../../models/Message";
-
-interface MessageData {
-  isDeleted?: boolean;
-}
-
-interface Request {
-  messageData: MessageData;
-  messageId: string;
-}
-
-const UpdateMessageService = async ({
-  messageData,
-  messageId
-}: Request): Promise<Response> => {
-  const { isDeleted } = messageData;
-  const message = Message.update({ where: {messageId}, { isDeleted: true } } );
-};
-
-export default UpdateMessageService;

frontend/src/components/MessageOptionsMenu/index.js

@@ -13,12 +13,13 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 	const [confirmationOpen, setConfirmationOpen] = useState(false);
 
 	const handleDeleteMessage = async () => {
-		console.log("message deleted", messageId);
-
 		try {
 			await api.delete(`/messages/${messageId}`);
 		} catch (err) {
-			toast.error("Erro ao deletar o message");
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
@@ -54,9 +55,7 @@ const MessageOptionsMenu = ({ messageId, menuOpen, handleClose, anchorEl }) => {
 				<MenuItem onClick={handleOpenConfirmationModal}>
 					Delete Message
 				</MenuItem>
-				<MenuItem onClick={e => console.log("clicked reply")}>
-					Reply Message
-				</MenuItem>
+				<MenuItem disabled>Reply Message</MenuItem>
 			</Menu>
 		</>
 	);

frontend/src/components/Ticket/index.js

@@ -16,7 +16,7 @@ import DoneAllIcon from "@material-ui/icons/DoneAll";
 import Paper from "@material-ui/core/Paper";
 
 import { IconButton } from "@material-ui/core";
-import { ExpandMore } from "@material-ui/icons";
+import { Block, ExpandMore } from "@material-ui/icons";
 
 import api from "../../services/api";
 import ContactDrawer from "../ContactDrawer";
@@ -161,6 +161,13 @@ const useStyles = makeStyles(theme => ({
 		padding: "3px 80px 6px 6px",
 	},
 
+	textContentItemDeleted: {
+		fontStyle: "italic",
+		color: "rgba(0, 0, 0, 0.36)",
+		overflowWrap: "break-word",
+		padding: "3px 80px 6px 6px",
+	},
+
 	messageMedia: {
 		objectFit: "cover",
 		width: 250,
@@ -203,6 +210,12 @@ const useStyles = makeStyles(theme => ({
 		marginLeft: 4,
 	},
 
+	deletedIcon: {
+		fontSize: 18,
+		verticalAlign: "middle",
+		marginRight: 4,
+	},
+
 	ackDoneAllIcon: {
 		color: green[500],
 		fontSize: 18,
@@ -246,7 +259,7 @@ const reducer = (state, action) => {
 		const messageIndex = state.findIndex(m => m.id === messageToUpdate.id);
 
 		if (messageIndex !== -1) {
-			state[messageIndex].ack = messageToUpdate.ack;
+			state[messageIndex] = messageToUpdate;
 		}
 
 		return [...state];
@@ -534,13 +547,26 @@ const Ticket = () => {
 									variant="contained"
 									size="small"
 									id="messageActionsButton"
+									disabled={message.isDeleted}
 									className={classes.messageActionsButton}
 									onClick={e => handleOpenMessageOptionsMenu(e, message.id)}
 								>
 									<ExpandMore />
 								</IconButton>
 								{message.mediaUrl && checkMessaageMedia(message)}
-								<div className={classes.textContentItem}>
+								{/* <div className={classes.textContentItem}> */}
+								<div
+									className={clsx(classes.textContentItem, {
+										[classes.textContentItemDeleted]: message.isDeleted,
+									})}
+								>
+									{message.isDeleted && (
+										<Block
+											color="disabled"
+											fontSize="small"
+											className={classes.deletedIcon}
+										/>
+									)}
 									{message.body}
 									<span className={classes.timestamp}>
 										{format(parseISO(message.createdAt), "HH:mm")}

frontend/src/components/TicketOptionsMenu/index.js

@@ -16,15 +16,13 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 		try {
 			await api.delete(`/tickets/${ticket.id}`);
 		} catch (err) {
-			toast.error("Erro ao deletar o ticket");
+			console.log(err);
+			if (err.response && err.response.data && err.response.data.error) {
+				toast.error(err.response.data.error);
+			}
 		}
 	};
 
-	const handleTransferTicket = e => {
-		console.log("transfered");
-		handleClose();
-	};
-
 	const handleOpenConfirmationModal = e => {
 		setConfirmationOpen(true);
 		handleClose();
@@ -50,9 +48,7 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				<MenuItem onClick={handleOpenConfirmationModal}>
 					{i18n.t("ticketOptionsMenu.delete")}
 				</MenuItem>
-				<MenuItem onClick={handleTransferTicket}>
-					{i18n.t("ticketOptionsMenu.transfer")}
-				</MenuItem>
+				<MenuItem disabled>{i18n.t("ticketOptionsMenu.transfer")}</MenuItem>
 			</Menu>
 			<ConfirmationModal
 				title={`${i18n.t("ticketOptionsMenu.confirmationModal.title")}${