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

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Spinner from 'widget/components/Spinner.vue';
+import Spinner from 'shared/components/Spinner.vue';
 
 export default {
   components: {

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>

app/javascript/widget/components/Spinner.vue

@@ -1,52 +0,0 @@
-<template>
-  <span class="spinner" :class="size"></span>
-</template>
-
-<script>
-const SIZES = ['small', 'medium', 'large'];
-
-export default {
-  props: {
-    size: {
-      validator: value => SIZES.includes(value),
-    },
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.spinner {
-  @keyframes spinner {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  &:before {
-    animation: spinner 0.7s linear infinite;
-    border-radius: 50%;
-    border-top-color: lighten($color-woot, 10%);
-    border: 2px solid rgba(255, 255, 255, 0.7);
-    box-sizing: border-box;
-    content: '';
-    height: $space-medium;
-    left: 50%;
-    margin-left: -$space-slab;
-    margin-top: -$space-slab;
-    position: absolute;
-    top: 50%;
-    width: $space-medium;
-  }
-
-  &.small:before {
-    border-width: 1px;
-    height: $space-slab;
-    margin-left: -$space-slab/2;
-    margin-top: -$space-slab/2;
-    width: $space-slab;
-  }
-}
-</style>