title: How to group messages in a chat instead of having each new message in a new section?
body: <p>I'm building a chat system with React and socket.io, and I'm trying to achieve grouping messages together like Discord does it, or as seen in <a href="https://www.livechatinc.com/app/livechat-mobile-app.5e4cb448468d20b89b5b1609890dd47d0da74ef466d4ca84c2673958328607b4.png" rel="nofollow noreferrer">this screenshot</a>. Basically, instead of creating a new section with your avatar again, it will just create a new message element and append it to your pre-existing section, <strong>unless</strong> the other user you're chatting with sends you a message <strong>or</strong> if it has been too long since your last message (in this case, 1 minute).</p>
  
  <p><a href="https://jsfiddle.net/AkkeHS/27gr93xa/" rel="nofollow noreferrer">Link to JSFiddle.</a></p>
  
  <p>The brown messages are my messages, and the black are the other users'.</p>
  
  <p>What I first thought was the correct solution was to group every message by 1 minute.</p>
  
  <pre><code>const sortByMinute = _.groupBy(messages, (msg) =&gt; {
      return moment(msg.createdAt * 1000).startOf("minute").format();
  });
  </code></pre>
  
  <p>However, the problem with doing this, as seen in the fiddle, is that it completely ignores when another users sends a message. So when another user sends you a message, it still thinks it belongs in the same section, because it has no way to determine whether it comes from a new user or not, and frankly, I have no clue how to do it either.</p>
  
  <p>How can I achieve this?</p>