Performance: Inbox Paging / loading (#11157)

* load messages per conversation

* only sort ones in ui

*  add contributor to message

* fix correct message layout/message

* mugenScroll on chatMessages

* fix lint, no mugen-scroll, use own scroll handler

* fix height / margin of modal + use button to load more

* fix tests

* user data from inbox

* style "load earlier messages"

*  move mapMessage to the inbox api result / extract sentMessage of members-api-controller

* fix test back

* fix test

* keep last scroll position

* just set the Id of the returned message instead of all other properties

* fix add new messages (buttons were hidden) + load more

* item-mounted debounce to trigger the re-scrolling

test/api/v3/integration/inbox/GET-inbox_messages.test.js

@@ -6,7 +6,7 @@ describe('GET /inbox/messages', () => {
   let user;
   let otherUser;
 
-  before(async () => {
+  beforeEach(async () => {
     [user, otherUser] = await Promise.all([generateUser(), generateUser()]);
 
     await otherUser.post('/members/send-private-message', {

test/api/v4/inbox/GET-inbox-conversations.test.js

@@ -7,7 +7,7 @@ describe('GET /inbox/conversations', () => {
   let otherUser;
   let thirdUser;
 
-  before(async () => {
+  beforeEach(async () => {
     [user, otherUser, thirdUser] = await Promise.all([generateUser(), generateUser(), generateUser()]);
 
     await otherUser.post('/members/send-private-message', {
@@ -41,4 +41,51 @@ describe('GET /inbox/conversations', () => {
     expect(result[0].user).to.be.equal(user.profile.name);
     expect(result[0].username).to.be.equal(user.auth.local.username);
   });
+
+  it('returns the user inbox messages as an array of ordered messages (from most to least recent)', async () => {
+    const messages = await user.get('/inbox/messages');
+
+    expect(messages.length).to.equal(5);
+
+    // message to yourself
+    expect(messages[0].text).to.equal('fifth');
+    expect(messages[0].sent).to.equal(false);
+    expect(messages[0].uuid).to.equal(user._id);
+
+    expect(messages[1].text).to.equal('fourth');
+    expect(messages[2].text).to.equal('third');
+    expect(messages[3].text).to.equal('second');
+    expect(messages[4].text).to.equal('first');
+  });
+
+  it('returns four messages when using page-query ', async () => {
+    const promises = [];
+
+    for (let i = 0; i < 10; i++) {
+      promises.push(user.post('/members/send-private-message', {
+        toUserId: user.id,
+        message: 'fourth',
+      }));
+    }
+
+    await Promise.all(promises);
+
+    const messages = await user.get('/inbox/messages?page=1');
+
+    expect(messages.length).to.equal(5);
+  });
+
+  it('returns only the messages of one conversation', async () => {
+    const messages = await user.get(`/inbox/messages?conversation=${otherUser.id}`);
+
+    expect(messages.length).to.equal(3);
+  });
+
+  it('returns the correct message format', async () => {
+    const messages = await otherUser.get(`/inbox/messages?conversation=${user.id}`);
+
+    expect(messages[0].toUUID).to.equal(user.id); // from user
+    expect(messages[1].toUUID).to.not.exist; // only filled if its from the chat partner
+    expect(messages[2].toUUID).to.equal(user.id); // from user
+  });
 });

test/api/v4/members/POST-flag_private_message.test.js

@@ -22,7 +22,7 @@ describe('POST /members/flag-private-message/:messageId', () => {
     let senderMessages = await userToSendMessage.get('/inbox/messages');
 
     let sendersMessageInSendersInbox = _.find(senderMessages, (message) => {
-      return message.uuid === receiver._id && message.text === messageToSend;
+      return message.toUUID === receiver._id && message.text === messageToSend;
     });
 
     expect(sendersMessageInSendersInbox).to.exist;

website/client/components/chat/chatCard.vue

@@ -273,5 +273,8 @@ export default {
       return habiticaMarkdown.render(String(text));
     },
   },
+  mounted () {
+    this.$emit('item-mounted', this.msg.id);
+  },
 };
 </script>

website/client/components/chat/chatMessages.vue

@@ -1,8 +1,14 @@
 <template lang="pug">
-.container-fluid
+.container-fluid(ref="container")
   .row
     .col-12
       copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
+  .row.loadmore
+    div(v-if="canLoadMore")
+      .loadmore-divider
+      button.btn.btn-secondary(@click='triggerLoad()') {{ $t('loadEarlierMessages') }}
+      .loadmore-divider
+    h2.col-12.loading(v-show="isLoading") {{ $t('loading') }}
   div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
     .d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
       avatar.avatar-left(
@@ -21,7 +27,8 @@
           :groupId='groupId',
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
-          @show-member-modal='showMemberModal')
+          @show-member-modal='showMemberModal',
+          @item-mounted='itemWasMounted')
     .d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
       .card(:class='{"col-10": inbox}')
         chat-card(
@@ -30,7 +37,8 @@
           :groupId='groupId',
           @message-liked='messageLiked',
           @message-removed='messageRemoved',
-          @show-member-modal='showMemberModal')
+          @show-member-modal='showMemberModal',
+          @item-mounted='itemWasMounted')
       avatar(
         v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
         :member="msg.userStyles || cachedProfileData[msg.uuid]",
@@ -49,6 +57,34 @@
     width: 10%;
     min-width: 7rem;
   }
+  .loadmore {
+    justify-content: center;
+
+    > div {
+      display: flex;
+      width: 100%;
+      align-items: center;
+
+      button {
+        text-align: center;
+        color: $gray-50;
+        margin-top: 12px;
+        margin-bottom: 24px;
+      }
+    }
+  }
+
+  .loadmore-divider {
+    height: 1px;
+    background-color: $gray-500;
+    flex: 1;
+    margin-left: 24px;
+    margin-right: 24px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
 
   .avatar-left {
     margin-left: -1.5rem;
@@ -97,6 +133,8 @@
   .message-scroll .d-flex {
     min-width: 1px;
   }
+
+
 </style>
 
 <script>
@@ -120,6 +158,9 @@ export default {
     groupType: {},
     groupId: {},
     groupName: {},
+
+    isLoading: Boolean,
+    canLoadMore: Boolean,
   },
   components: {
     copyAsTodoModal,
@@ -142,6 +183,8 @@ export default {
       currentProfileLoadedCount: 0,
       currentProfileLoadedEnd: 10,
       loading: false,
+      handleScrollBack: false,
+      lastOffset: -1,
     };
   },
   computed: {
@@ -153,15 +196,24 @@ export default {
       return this.chat;
     },
   },
-  watch: {
-    messages () {
-      this.loadProfileCache();
-    },
-  },
   methods: {
     handleScroll () {
       this.loadProfileCache(window.scrollY / 1000);
     },
+    async triggerLoad () {
+      const container = this.$refs.container;
+
+      // get current offset
+      this.lastOffset = container.scrollTop - (container.scrollHeight - container.clientHeight);
+      // disable scroll
+      container.style.overflowY = 'hidden';
+
+      const canLoadMore = this.inbox && !this.isLoading && this.canLoadMore;
+      if (canLoadMore) {
+        await this.$emit('triggerLoad');
+        this.handleScrollBack = true;
+      }
+    },
     canViewFlag (message) {
       if (message.uuid === this.user._id) return true;
       if (!message.flagCount || message.flagCount < 2) return true;
@@ -252,6 +304,20 @@ export default {
         this.$router.push({name: 'userProfile', params: {userId: profile._id}});
       }
     },
+    itemWasMounted: debounce(function itemWasMounted ()  {
+      if (this.handleScrollBack) {
+        this.handleScrollBack = false;
+
+        const container = this.$refs.container;
+        const offset = container.scrollHeight - container.clientHeight;
+
+        const newOffset = offset + this.lastOffset;
+
+        container.scrollTo(0, newOffset);
+        // enable scroll again
+        container.style.overflowY = 'scroll';
+      }
+    }, 50),
     messageLiked (message) {
       const chatIndex = findIndex(this.chat, chatMessage => {
         return chatMessage.id === message.id;