[Enhancement] Fetch previous messages in the conversation (#355)

* Fetch previous messages in the conversation

* Add specs for conversation store

* Fix codeclimate issues

* Exclude specs folder

* Exclude globally

* Fix path in exclude patterns

* Add endPoints spec

* Add snapshots for Spinner

* Add specs for actions

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

@@ -21,42 +21,54 @@ export const findUndeliveredMessage = (messageInbox, { content }) =>
   );
 
 export const DEFAULT_CONVERSATION = 'default';
+
 const state = {
   conversations: {},
+  uiFlags: {
+    allMessagesLoaded: false,
+    isFetchingList: false,
+  },
 };
 
-const getters = {
+export const getters = {
   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) {
+      return conversation[0];
+    }
+    return {};
+  },
 };
 
-const actions = {
+export const actions = {
   sendMessage: async ({ commit }, params) => {
     const { content } = params;
-    commit('pushMessageToConversations', createTemporaryMessage(content));
+    commit('pushMessageToConversation', createTemporaryMessage(content));
     await sendMessageAPI(content);
   },
 
-  fetchOldConversations: async ({ commit }) => {
+  fetchOldConversations: async ({ commit }, { before } = {}) => {
     try {
-      const { data } = await getConversationAPI();
-      commit('initMessagesInConversation', data);
+      commit('setConversationListLoading', true);
+      const { data } = await getConversationAPI({ before });
+      commit('setMessagesInConversation', data);
+      commit('setConversationListLoading', false);
     } catch (error) {
-      // Handle error
+      commit('setConversationListLoading', false);
     }
   },
 
   addMessage({ commit }, data) {
-    commit('pushMessageToConversations', data);
+    commit('pushMessageToConversation', data);
   },
 };
 
-const mutations = {
-  initInboxInConversations($state, lastConversation) {
-    Vue.set($state.conversations, lastConversation, {});
-  },
-
-  pushMessageToConversations($state, message) {
+export const mutations = {
+  pushMessageToConversation($state, message) {
     const { id, status, message_type: type } = message;
     const messagesInbox = $state.conversations;
     const isMessageIncoming = type === MESSAGE_TYPE.INCOMING;
@@ -71,7 +83,6 @@ const mutations = {
       messagesInbox,
       message
     );
-
     if (!messageInConversation) {
       Vue.set(messagesInbox, id, message);
     } else {
@@ -80,12 +91,17 @@ const mutations = {
     }
   },
 
-  initMessagesInConversation(_state, payload) {
+  setConversationListLoading($state, status) {
+    $state.uiFlags.isFetchingList = status;
+  },
+
+  setMessagesInConversation($state, payload) {
     if (!payload.length) {
+      $state.uiFlags.allMessagesLoaded = true;
       return;
     }
 
-    payload.map(message => Vue.set(_state.conversations, message.id, message));
+    payload.map(message => Vue.set($state.conversations, message.id, message));
   },
 };