feat: infinite scrolling

app/javascript/ui/MessageList.vue

@@ -1,14 +1,9 @@
 <script setup>
-import { onMounted, computed, watch, useTemplateRef, nextTick } from 'vue';
+import { ref, onMounted, computed, watch, useTemplateRef } from 'vue';
 import Message from 'next/message/Message.vue';
-import { useStore } from 'dashboard/composables/store';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-import {
-  useScroll,
-  useEventListener,
-  useThrottleFn,
-  useElementSize,
-} from '@vueuse/core';
+import { useInfiniteScroll, useThrottleFn } from '@vueuse/core';
 
 const props = defineProps({
   conversationId: {
@@ -19,8 +14,8 @@ const props = defineProps({
 
 const messageListRef = useTemplateRef('messageListRef');
 const store = useStore();
-const { y } = useScroll(messageListRef);
-const { height } = useElementSize(messageListRef);
+const isAllLoaded = useMapGetter('getAllMessagesLoaded');
+const isFetching = ref(false);
 
 const conversation = computed(() => {
   return store.getters.getConversationById(props.conversationId);
@@ -29,40 +24,51 @@ const conversation = computed(() => {
 const allMessages = computed(() => {
   if (!conversation.value) return [];
 
-  return useCamelCase(conversation.value.messages);
+  return useCamelCase(conversation.value.messages).reverse();
 });
 
-watch(conversation, async () => {
-  store.dispatch('fetchPreviousMessages', {
-    conversationId: conversation.value.id,
-    before: allMessages.value[0].id,
-  });
-  await nextTick();
-  y.value = height.value;
-});
+const fetchMore = () => {
+  if (isFetching.value) return;
+  if (!conversation?.value?.id) return;
+  if (!allMessages.value?.length) return;
+  try {
+    isFetching.value = true;
+
+    store.dispatch('fetchPreviousMessages', {
+      conversationId: conversation.value.id,
+      before: allMessages.value[allMessages.value.length - 1].id,
+    });
+  } finally {
+    isFetching.value = false;
+  }
+};
 
 onMounted(() => {
   store.dispatch('getConversation', props.conversationId);
 });
 
-useEventListener(
-  messageListRef,
-  'scroll',
-  useThrottleFn(() => {
-    // eslint-disable-next-line no-console
-    console.log('Testing');
-    // if (top.value) {
-    //   store.dispatch('fetchPreviousMessages', {
-    //     conversationId: props.conversationId,
-    //     before: allMessages.value[0].id,
-    //   });
-    // }
-  }, 100)
-);
+watch(conversation, () => {
+  store.dispatch('setActiveChat', {
+    data: {
+      id: conversation.value.id,
+    },
+  });
+});
+
+useInfiniteScroll(messageListRef, useThrottleFn(fetchMore, 1000), {
+  canLoadMore: () => {
+    return !isAllLoaded.value;
+  },
+  distance: 10,
+  direction: 'top',
+});
 </script>
 
 <template>
-  <ul ref="messageListRef" class="p-4 bg-n-background h-screen overflow-scroll">
+  <ul
+    ref="messageListRef"
+    class="p-4 flex flex-col-reverse bg-n-background h-screen overflow-scroll"
+  >
     <Message
       v-for="message in allMessages"
       :key="message.id"