title: How to properly handle 'read' - 'unread' state for a chat messaging app?
body: <p>I'm currently working on a react-native application that provides a chatroom features using socket.io</p>
  
  <p>I'm currently willing to deal with unread/read state on messages but I do not know where this logic shall lives : in the client side code or in the server side ?</p>
  
  <p>Here is a basic implementation in termes of components of my code</p>
  
  <pre><code>&lt;ChatRoomCard /&gt; //-&gt; displays the last message and the chatroom title and 
                      can navigate to the ChatRoom component
  &lt;ChatRoom id={} /&gt;
  </code></pre>
  
  <p>My reduxState is like so : </p>
  
  <pre><code>{
    chatRooms: [{chatRoomId: '', title: ''}],
    chatRoomsMessages: {
             [chatRoomId]: [{messageId: '', text: ''}]
       }
  }
  </code></pre>
  
  <p>Each component is connected to redux and the ChatRoomCard receives the <code>chatRooms</code> props containing an array of objects `[{chatroomId: ''}] whereas the ChatRoom component receives only the according messages.</p>
  
  <p>If it is on the client side my first attempt will be to add a state <code>lastRead : timestamp</code> to each ChatRoomCard, this state will be updated each time the ChatRoom component mounts thus displaying the last messages.</p>
  
  <p>So now when the socket io event 'new msg' triggers and I receives the new message I can, in the ChatRoomCard component, map the messages comparing the message.createdAt timestamp with the ChatRoomCard.lastReadTimestamp and increment a 'unread messages count' whenever a message.timestamp is after the lastReadTimestamp.</p>
  
  <p>Does this solution sounds like good work ? Or is this logic belongs to the back-end ? Or maybe is it both ? I'm a little bit lost since it is the first time that I'm doing this</p>
  
  <p>Thanks a lot</p>