Chats: display the last message in chats list, fixes #361

app/soapbox/features/chats/components/chat.js

@@ -5,6 +5,7 @@ import Avatar from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
+import emojify from 'soapbox/features/emoji/emoji';
 
 export default class Chat extends ImmutablePureComponent {
 
@@ -22,6 +23,8 @@ export default class Chat extends ImmutablePureComponent {
     if (!chat) return null;
     const account = chat.get('account');
     const unreadCount = chat.get('unread');
+    const content = chat.getIn(['last_message', 'content']);
+    const parsedContent = content ? emojify(content) : '';
 
     return (
       <div className='account'>
@@ -32,6 +35,10 @@ export default class Chat extends ImmutablePureComponent {
               <Avatar account={account} size={36} />
             </div>
             <DisplayName account={account} />
+            <span
+              className='chat__last-message'
+              dangerouslySetInnerHTML={{ __html: parsedContent }}
+            />
             {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
           </div>
         </div>

app/soapbox/selectors/index.js

@@ -163,13 +163,15 @@ export const makeGetChat = () => {
     [
       (state, { id }) => state.getIn(['chats', id]),
       (state, { id }) => state.getIn(['accounts', state.getIn(['chats', id, 'account'])]),
+      (state, { last_message }) => state.getIn(['chat_messages', last_message]),
     ],
 
-    (chat, account) => {
+    (chat, account, lastMessage) => {
       if (!chat) return null;
 
       return chat.withMutations(map => {
         map.set('account', account);
+        map.set('last_message', lastMessage);
       });
     }
   );

app/styles/chats.scss

@@ -146,6 +146,22 @@
 
   .account__display-name {
     position: relative;
+
+    .display-name {
+      display: flex;
+
+      bdi {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .display-name__account {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        display: none;
+      }
+    }
   }
 
   .icon-with-badge__badge {
@@ -253,3 +269,12 @@
     background: transparent;
   }
 }
+
+.chat {
+  &__last-message {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}