change the message fetch model. the client should cache the historical data locally, and fetch latest data with a timestamp, to improve the performance

frontend/src/pages/user/messages/Home.vue

@@ -8,8 +8,8 @@
           class="conversation-container"
           :class="{
             selected:
-              current_thread?.conversation?.information?.id ===
+              current_thread?.conversation?.id ===
-              conversation.summary.last_message?.conversation_id
+              conversation.id
           }"
           @click="selectConversation(conversation)"
         >
@@ -17,17 +17,16 @@
           <div class="conversation-summary-container">
             <div class="conversation-summary-header-container">
               <span class="participant-fullname">
-                {{ conversation.summary.contact.first_name }}
+                {{ conversation.subject }}
-                {{ conversation.summary.contact.last_name }}
               </span>
               <span class="conversation-last-update-date">{{
-                getDateFromFulltimeString(conversation.summary.last_message?.create_time)
+                getDateFromFulltimeString(conversation.create_time)
               }}</span>
               <!-- <span v-if="unreadCountMapper()" class="conversation-unreadcount">2</span> -->
             </div>
-            <div class="conversation-summary-highlight-container">
+            <!-- <div class="conversation-summary-highlight-container">
               {{ conversation.summary.last_message?.message_body }}
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -86,14 +85,14 @@ export default {
   name: 'MessageHub',
   props: {},
   mounted() {
-    this.fetchMessageThreads()
+    this.fetchConversations()
   },
   watch: {
     conversations: {
       handler: function (val) {
         if (val && val.length > 0) {
-          this.current_thread = val[0]
+          //this.current_thread = val[0]
-          this.clearUnreadMessageBy(val[0])
+          //this.clearUnreadMessageBy(val[0])
         }
       },
       deep: false
@@ -113,10 +112,27 @@ export default {
   //   }
   // },
   methods: {
-    fetchMessageThreads() {
+    fetchConversations() {
-      MessageHubApi.fetchMessageThreads()
+      MessageHubApi.fetchConversations(new Date('01 Jan 1970 00:00:00 GMT').toISOString())
         .then((response) => {
-          this.conversations = response.data
+          this.conversations = response.data.conversations
+          //TEST
+          this.conversations.forEach((conversation) => {
+            this.fetchMessageForConversation(conversation.id)
+          })
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    fetchMessageForConversation(conversation_id) {
+      MessageHubApi.fetchMessages(
+        conversation_id,
+        new Date('01 Jan 1975 00:00:00 GMT').toISOString()
+      )
+        .then((response) => {
+          messages = response.data
+          console.log('Received message for conversation:', conversation_id)
         })
         .catch((error) => {
           this.mnx_backendErrorHandler(error)
@@ -157,6 +173,7 @@ export default {
   height: $body-height;
   padding: 24px 24px 0 24px;
   justify-content: center;
+
   .message-hub-conainter {
     display: flex;
     box-shadow: 0px 0px 24px 0px #d4d3e380;
@@ -165,32 +182,38 @@ export default {
     max-width: $body-width;
     height: 100%;
     overflow: hidden;
+
     .conversation-list-container {
       height: 100%;
       overflow: auto;
       width: 300px;
+
       .conversation-container {
         background-color: #f3f3f5;
         display: flex;
         cursor: pointer;
         height: 98px;
         padding: 18px;
+
         .participant-portrait {
           width: 36px;
           height: 36px;
           border-radius: 18px;
           margin-right: 16px;
         }
+
         .conversation-summary-container {
           display: flex;
           flex-direction: column;
           flex: 1;
           overflow: hidden;
+
           .conversation-summary-header-container {
             display: flex;
             align-items: center;
             height: 22px;
             color: #0d1637;
+
             .participant-fullname {
               font-weight: 500;
               flex: 1;
@@ -198,10 +221,12 @@ export default {
               text-overflow: ellipsis;
               overflow: hidden;
             }
+
             .conversation-last-update-date {
               white-space: nowrap;
               flex-shrink: 0;
             }
+
             .conversation-unreadcount {
               font-size: 14px;
               background: red;
@@ -216,6 +241,7 @@ export default {
               margin-left: 10px;
             }
           }
+
           .conversation-summary-highlight-container {
             font-size: 14px;
             color: #6e7387;
@@ -226,14 +252,17 @@ export default {
             word-break: break-word;
           }
         }
+
         &:hover {
           opacity: 0.78;
         }
+
         &.selected {
           background-color: transparent;
         }
       }
     }
+
     .conversation-list-empty-container {
       height: 100%;
       overflow: auto;
@@ -243,24 +272,28 @@ export default {
       align-items: center;
       justify-content: center;
     }
+
     .message-panel-container {
       height: 100%;
       overflow: auto;
       flex: 1;
       padding-bottom: 98px;
       position: relative;
+
       .message-thread-container {
         height: 100%;
         overflow: auto;
         padding: 20px 32px;
         display: flex;
         flex-direction: column;
+
         .message-item-container {
           max-width: 70%;
           margin-bottom: 15px;
           width: fit-content;
           display: flex;
           flex-direction: column;
+
           .message-item-header-container {
             display: flex;
             align-items: center;
@@ -270,11 +303,13 @@ export default {
             font-size: 18px;
             width: fit-content;
             max-width: 100%;
+
             .message-item-sender-portrait {
               width: 36px;
               height: 36px;
               border-radius: 18px;
             }
+
             .message-item-sender-fullname {
               overflow: hidden;
               white-space: nowrap;
@@ -283,6 +318,7 @@ export default {
               font-weight: 500;
               margin: 0 7px;
             }
+
             .message-item-create-time {
               color: #737478;
               white-space: nowrap;
@@ -290,6 +326,7 @@ export default {
               font-size: 16px;
             }
           }
+
           .message-item-message-body {
             font-size: 14px;
             line-height: 17px;
@@ -306,10 +343,12 @@ export default {
 
           &.me {
             align-self: flex-end;
+
             .message-item-header-container {
               flex-direction: row-reverse;
               align-self: flex-end;
             }
+
             .message-item-message-body {
               background-color: $primary;
               color: white;
@@ -318,6 +357,7 @@ export default {
           }
         }
       }
+
       .message-thread-empty-container {
         height: 100%;
         overflow: auto;
@@ -326,6 +366,7 @@ export default {
         align-items: center;
         justify-content: center;
       }
+
       .message-writing-panel-container {
         height: 98px;
         padding: 24px;
@@ -334,6 +375,7 @@ export default {
         bottom: 0;
         left: 0;
         width: 100%;
+
         .writing-message-enter {
           position: absolute;
           height: 24px;
@@ -345,6 +387,7 @@ export default {
           right: 37px;
           border-radius: 7px;
         }
+
         .writing-message-input {
           height: 50px;
           border: 1px solid #e1e1e1;

frontend/src/utils/backend/messageHub.js

@@ -2,11 +2,27 @@ import { backendAxios } from './axios'
 import { userUtils } from '../store/index'
 
 class MessageHubApi {
-  static fetchMessageThreads() {
+  static fetchConversations(last_update_time) {
     let jwt = userUtils.getJwtToken()
     const request = backendAxios.post(
-      '/api/messages/fetch-message-threads-for-user',
+      '/api/messages/fetch-conversations-for-user',
-      {},
+      {
+        last_update_time: last_update_time
+      },
+      {
+        headers: { Authorization: `Bearer ${jwt}` }
+      }
+    )
+    return request
+  }
+  static fetchMessages(conversation_id, last_update_time) {
+    let jwt = userUtils.getJwtToken()
+    const request = backendAxios.post(
+      '/api/messages/fetch-message-thread-for-conversation',
+      {
+        conversation_id: conversation_id,
+        last_update_time: last_update_time
+      },
       {
         headers: { Authorization: `Bearer ${jwt}` }
       }