From 445bb30ac0ca5bb8357c6fc5364eb79afee2f906 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 30 Aug 2020 19:31:09 -0500
Subject: [PATCH] Chats: display the last message in chats list, fixes #361

---
 app/soapbox/features/chats/components/chat.js |  7 ++++++
 app/soapbox/selectors/index.js                |  4 ++-
 app/styles/chats.scss                         | 25 +++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/chats/components/chat.js b/app/soapbox/features/chats/components/chat.js
index d3a60f14d..1a09edd47 100644
--- a/app/soapbox/features/chats/components/chat.js
+++ b/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>
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
index 55090df10..bbf0b54c5 100644
--- a/app/soapbox/selectors/index.js
+++ b/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);
       });
     }
   );
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index f1b443b5b..a7369c53b 100644
--- a/app/styles/chats.scss
+++ b/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;
+  }
+}