如果連續發送多條消息，則僅在最新消息上顯示用戶頭像

Question

我正在開發一個聊天框，我需要通過在特定日期對消息進行分組來顯示用戶的消息。 到目前為止，該分組一直運行良好。 但是，如果連續發送消息，我無法在他/她的最新消息中顯示用戶的圖像。 這就是我的意思，圖片應該只顯示在最新消息上

這就是我正在做的

const messages = [
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpB6yFz4qhMJAWRHkS",
    direction: "Incoming",
    createdAt: "2021-02-22T09:27:19.280314+00:00"
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEwpB6yFz4qXhMJAWRHkS",
    direction: "Incoming",
    createdAt: "2021-02-22T09:27:19.280314+00:00"
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEopB6yFz4qXhMJAWRHkS",
    direction: "Outgoing",
    createdAt: "2021-02-22T09:27:19.265184+00:00"

  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpByFz4qXhMJAWRHkS",
    direction: "Incoming",
    createdAt: "2021-02-22T09:25:36.465466+00:00",
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpB6yFqXhMJAWRHkS",
    direction: "Incoming",
    createdAt: "2021-02-22T09:25:36.465466+00:00",
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpB6yFzqXhMJAWRHkS",
    direction: "Outgoing",
    createdAt: "2021-02-22T09:25:36.448490+00:00"
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpB6yFz4qXhMJWRHkS",
    direction: "Outgoing",
    createdAt: "2021-02-22T09:25:37.448490+00:00"
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpB6yFz4qXhMJAWRkS",
    direction: "Incoming",
    createdAt: "2021-02-19T05:45:07.131521+00:00"
  },
  {
    clientName: "Manoj",
    agentProfilePicture: "http://localhost/storage/profile/7610ff2a-ed7b-48e2-bbdf-43e5f84a764c.png",
    clientProfilePicture: "http://localhost/storage/contact/01a4379a-7fee-4981-8c33-785b81113ced.png",
    clientid: "aEowpB6yFz4qXhMJAWRHk",
    createdAt: "2021-02-19T05:45:07.109887+00:00",
    direction: "Outgoing"
  }
]

function getDateInYearsMonthDay(ts) {
  return `${new Date(ts).getFullYear()}-${new Date(ts).getMonth()}-${new Date(ts).getDay()}`;
}

function groupedChatDays(messages) {
  const senderCountInParticularDate = {};
  const receiverCountInParticularDate = {};
  const numberOfSenderMessages = 0;
  const numberOfReceiverMessages = 0;
  return messages?.reduce((acc, el) => {
    const messageDay = getDateInYearsMonthDay(el.createdAt);
    if (acc[messageDay]) {
      senderCountInParticularDate[messageDay] =
        el?.direction === 'Outgoing' ? numberOfSenderMessages + 1 : 0;
      receiverCountInParticularDate[messageDay] =
        el?.direction === 'Incoming' ? numberOfReceiverMessages + 1 : 0;
      return {
        ...acc,
        [messageDay]: acc[messageDay].concat([el]),
      };
    }
    return { ...acc, [messageDay]: [el] };
  }, {});
}

function generateChatMessages(messages) {
  const days = groupedChatDays(messages);
//   console.log('days', days)
  const sortedDays = Object.keys(days).sort((x, y) => {
    const a = new Date(x);
    const b = new Date(y);
    return a - b;
  });
const items = sortedDays.reduce((acc, date) => {
    const sortedMessages = days[date].sort((x, y) => {
      const a = new Date(x.createdAt);
      const b = new Date(y.createdAt);
      return a - b;
    });
    return acc.concat([{ type: 'day', date, id: date }, ...sortedMessages]);
  }, []);

  return items;
}

console.log('generatedChatMessages', generateChatMessages(messages))

注意：如果方向是傳出，則它是發件人，並且個人資料圖片是agentProfilePicture ，在這種情況下反之亦然。

這里也是 jsbin https://jsbin.com/ciloxufisa/edit?js,console

Answer 1

您可以通過消息 map

messages.map(message, index) =>{
    const previous = messages[index - 1];  
    const showAvatar = shouldShowAvatar(previous, message)
}  

function shouldShowAvatar (previous, message){
    const isFirst = !previous;
    if(isFirst) return true; 

    const differentUser = message.clientid !== previous.clientid; 
    if(differentUser) return true;

    const hasBeenAwhile = message.createdAt.seconds > 60;   
    return hasBeenAwhile;
} 

Answer 2

這是一般的

https://jsbin.com/hexodus/1/edit?js,console

**try it and customize it for grouped**