From 939236129a35d8d6261676892254b1716996cde0 Mon Sep 17 00:00:00 2001
From: Robson Tenorio <robson.tenorio@gmail.com>
Date: Wed, 8 Jun 2022 17:14:45 -0300
Subject: [PATCH] =?UTF-8?q?Apresentar=20a=20separa=C3=A7=C3=A3o=20dos=20ti?=
 =?UTF-8?q?ckets=20na=20conversa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessageServices/ListMessagesService.ts    |  8 ++++++-
 frontend/src/components/MessagesList/index.js | 24 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/backend/src/services/MessageServices/ListMessagesService.ts b/backend/src/services/MessageServices/ListMessagesService.ts
index 459f2a6b..cd9854f0 100644
--- a/backend/src/services/MessageServices/ListMessagesService.ts
+++ b/backend/src/services/MessageServices/ListMessagesService.ts
@@ -30,7 +30,8 @@ const ListMessagesService = async ({
   const offset = limit * (+pageNumber - 1);
 
   const { count, rows: messages } = await Message.findAndCountAll({
-    where: { ticketId },
+    //where: { ticketId },
+    //where: {contactid : ticket.contactId},
     limit,
     include: [
       "contact",
@@ -38,6 +39,11 @@ const ListMessagesService = async ({
         model: Message,
         as: "quotedMsg",
         include: ["contact"]
+      },
+      {
+        model: Ticket,
+        where: {contactId: ticket.contactId  },
+        required: true
       }
     ],
     offset,
diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js
index faa17e89..177f36a0 100644
--- a/frontend/src/components/MessagesList/index.js
+++ b/frontend/src/components/MessagesList/index.js
@@ -39,6 +39,11 @@ const useStyles = makeStyles((theme) => ({
     flexGrow: 1,
   },
 
+  ticketNumber: {
+    color: theme.palette.secondary.main,
+    padding: 8,
+  },
+
   messagesList: {
     backgroundImage: theme.backgroundImage,
     display: "flex",
@@ -576,6 +581,22 @@ const MessagesList = ({ ticketId, isGroup }) => {
     }
   };
 
+  const renderNumberTicket = (message, index) => {
+    if (index < messagesList.length && index > 0) {
+      let messageTicket = message.ticketId;
+      let previousMessageTicket = messagesList[index - 1].ticketId;
+
+      if (messageTicket !== previousMessageTicket) {
+        return (
+          <div key={`ticket-${message.id}`} className={classes.ticketNumber}>
+            #ticket: {messageTicket}
+            <hr />
+          </div>
+        );
+      }
+    }
+  };
+
   const renderMessageDivider = (message, index) => {
     if (index < messagesList.length && index > 0) {
       let messageUser = messagesList[index].fromMe;
@@ -621,6 +642,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
             <React.Fragment key={message.id}>
               {renderDailyTimestamps(message, index)}
               {renderMessageDivider(message, index)}
+              {renderNumberTicket(message, index)}
               <div className={classes.messageCenter}>
                 <IconButton
                   variant="contained"
@@ -651,6 +673,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
             <React.Fragment key={message.id}>
               {renderDailyTimestamps(message, index)}
               {renderMessageDivider(message, index)}
+              {renderNumberTicket(message, index)}
               <div className={classes.messageLeft}>
                 <IconButton
                   variant="contained"
@@ -685,6 +708,7 @@ const MessagesList = ({ ticketId, isGroup }) => {
             <React.Fragment key={message.id}>
               {renderDailyTimestamps(message, index)}
               {renderMessageDivider(message, index)}
+              {renderNumberTicket(message, index)}
               <div className={classes.messageRight}>
                 <IconButton
                   variant="contained"