[Enhancement] Group widget messages by date (#363)

* [Enhancement] Group widget messages by date

* Update DateSeparator snapshot

app/javascript/widget/components/ConversationWrap.vue

@@ -4,11 +4,14 @@
       <div v-if="isFetchingList" class="message--loader">
         <spinner></spinner>
       </div>
-      <ChatMessage
-        v-for="message in messages"
-        :key="message.id"
-        :message="message"
-      />
+      <div v-for="date in conversationDates" :key="date">
+        <date-separator :date="date"></date-separator>
+        <ChatMessage
+          v-for="message in groupedMessages[date]"
+          :key="message.id"
+          :message="message"
+        />
+      </div>
     </div>
     <branding></branding>
   </div>
@@ -17,6 +20,7 @@
 <script>
 import Branding from 'widget/components/Branding.vue';
 import ChatMessage from 'widget/components/ChatMessage.vue';
+import DateSeparator from 'shared/components/DateSeparator.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import { mapActions, mapGetters } from 'vuex';
 
@@ -25,10 +29,11 @@ export default {
   components: {
     Branding,
     ChatMessage,
+    DateSeparator,
     Spinner,
   },
   props: {
-    messages: Object,
+    groupedMessages: Object,
   },
   data() {
     return {
@@ -43,6 +48,9 @@ export default {
       isFetchingList: 'conversation/getIsFetchingList',
       conversationSize: 'conversation/getConversationSize',
     }),
+    conversationDates() {
+      return Object.keys(this.groupedMessages);
+    },
   },
   watch: {
     allMessagesLoaded() {

app/javascript/widget/store/modules/conversation.js

@@ -3,6 +3,9 @@ import Vue from 'vue';
 import { sendMessageAPI, getConversationAPI } from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
 import getUuid from '../../helpers/uuid';
+import DateHelper from '../../../shared/helpers/DateHelper';
+
+const groupBy = require('lodash.groupby');
 
 export const createTemporaryMessage = content => {
   const timestamp = new Date().getTime();
@@ -31,10 +34,9 @@ const state = {
 };
 
 export const getters = {
+  getAllMessagesLoaded: _state => _state.uiFlags.allMessagesLoaded,
   getConversation: _state => _state.conversations,
   getConversationSize: _state => Object.keys(_state.conversations).length,
-  getAllMessagesLoaded: _state => _state.uiFlags.allMessagesLoaded,
-  getIsFetchingList: _state => _state.uiFlags.isFetchingList,
   getEarliestMessage: _state => {
     const conversation = Object.values(_state.conversations);
     if (conversation.length) {
@@ -42,6 +44,12 @@ export const getters = {
     }
     return {};
   },
+  getGroupedConversation: _state => {
+    return groupBy(Object.values(_state.conversations), message =>
+      new DateHelper(message.created_at).format()
+    );
+  },
+  getIsFetchingList: _state => _state.uiFlags.isFetchingList,
 };
 
 export const actions = {

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -53,4 +53,57 @@ describe('#getters', () => {
     expect(getters.getAllMessagesLoaded(state)).toEqual(false);
     expect(getters.getIsFetchingList(state)).toEqual(false);
   });
+
+  it('uiFlags', () => {
+    const state = {
+      conversations: {
+        1: {
+          id: 1,
+          content: 'Thanks for the help',
+          created_at: 1574075964,
+        },
+        2: {
+          id: 2,
+          content: 'Yes, It makes sense',
+          created_at: 1574092218,
+        },
+        3: {
+          id: 3,
+          content: 'Hey',
+          created_at: 1576340623,
+        },
+        4: {
+          id: 4,
+          content: 'How may I help you',
+          created_at: 1576340626,
+        },
+      },
+    };
+    expect(getters.getGroupedConversation(state)).toEqual({
+      'Nov 18, 2019': [
+        {
+          id: 1,
+          content: 'Thanks for the help',
+          created_at: 1574075964,
+        },
+        {
+          id: 2,
+          content: 'Yes, It makes sense',
+          created_at: 1574092218,
+        },
+      ],
+      'Dec 14, 2019': [
+        {
+          id: 3,
+          content: 'Hey',
+          created_at: 1576340623,
+        },
+        {
+          id: 4,
+          content: 'How may I help you',
+          created_at: 1576340626,
+        },
+      ],
+    });
+  });
 });

app/javascript/widget/views/Home.vue

@@ -4,7 +4,7 @@
       <ChatHeaderExpanded v-if="isHeaderExpanded" />
       <ChatHeader v-else :title="getHeaderName" />
     </div>
-    <ConversationWrap :messages="getConversation" />
+    <ConversationWrap :grouped-messages="groupedMessages" />
     <div class="footer-wrap">
       <ChatFooter :on-send-message="handleSendMessage" />
     </div>
@@ -36,9 +36,12 @@ export default {
     },
   },
   computed: {
-    ...mapGetters('conversation', ['getConversation', 'getConversationSize']),
+    ...mapGetters({
+      groupedMessages: 'conversation/getGroupedConversation',
+      conversationSize: 'conversation/getConversationSize',
+    }),
     isHeaderExpanded() {
-      return this.getConversationSize === 0;
+      return this.conversationSize === 0;
     },
     getHeaderName() {
       return window.chatwootWebChannel.website_name;