[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/components/ConversationWrap.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="conversation--container">
     <div class="conversation-wrap">
+      <div v-if="isFetchingList" class="message--loader">
+        <spinner></spinner>
+      </div>
       <ChatMessage
         v-for="message in messages"
         :key="message.id"
@@ -14,29 +17,71 @@
 <script>
 import Branding from 'widget/components/Branding.vue';
 import ChatMessage from 'widget/components/ChatMessage.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: 'ConversationWrap',
   components: {
     Branding,
     ChatMessage,
+    Spinner,
   },
   props: {
     messages: Object,
   },
+  data() {
+    return {
+      previousScrollHeight: 0,
+      previousConversationSize: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      earliestMessage: 'conversation/getEarliestMessage',
+      allMessagesLoaded: 'conversation/getAllMessagesLoaded',
+      isFetchingList: 'conversation/getIsFetchingList',
+      conversationSize: 'conversation/getConversationSize',
+    }),
+  },
+  watch: {
+    allMessagesLoaded() {
+      this.previousScrollHeight = 0;
+    },
+  },
   mounted() {
+    this.$el.addEventListener('scroll', this.handleScroll);
     this.scrollToBottom();
   },
   updated() {
-    this.scrollToBottom();
+    if (this.previousConversationSize !== this.conversationSize) {
+      this.previousConversationSize = this.conversationSize;
+      this.scrollToBottom();
+    }
+  },
+  unmounted() {
+    this.$el.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
+    ...mapActions('conversation', ['fetchOldConversations']),
     scrollToBottom() {
       const container = this.$el;
-      container.scrollTop =
-        container.scrollHeight < this.minScrollHeight
-          ? this.minScrollHeight
-          : container.scrollHeight;
+      container.scrollTop = container.scrollHeight - this.previousScrollHeight;
+      this.previousScrollHeight = 0;
+    },
+    handleScroll() {
+      if (
+        this.isFetchingList ||
+        this.allMessagesLoaded ||
+        !this.conversationSize
+      ) {
+        return;
+      }
+
+      if (this.$el.scrollTop < 100) {
+        this.fetchOldConversations({ before: this.earliestMessage.id });
+        this.previousScrollHeight = this.$el.scrollHeight;
+      }
     },
   },
 };
@@ -56,4 +101,8 @@ export default {
   flex: 1;
   padding: $space-large $space-small $zero $space-small;
 }
+
+.message--loader {
+  text-align: center;
+}
 </style>