:radio_button: button to load more queue results with pagination

frontend/src/components/ProfileCardList.vue

@@ -8,6 +8,7 @@ section.profile-card-list.xs12.w-flex.column
             :key='`${card.pid}-${i}`'
             v-for='(card, i) in cards'
         )
+        w-button.pa8.more-results(bg-color='primary' @click="loadMoreResults()")
 </template>
 
 <script setup>
@@ -17,6 +18,8 @@ import ProfileCard from './ProfileCard.vue'
 
 const aspects = ref(cardAspects)
 
+const emit = defineEmits(['loadMore'])
+
 const props = defineProps({
     cards: {
         type: [Object, Array],
@@ -32,10 +35,14 @@ const props = defineProps({
         ],
     },
 })
+
+const loadMoreResults = () => { emit('loadMore') } // TODO update to scroll
 </script>
 
 <style lang="sass">
 .profile-card-list
     > header > .w-select >.primary
         margin-top: 0
+.more-results
+    margin-bottom: 2em
 </style>

frontend/src/services/queue.service.js

@@ -4,12 +4,16 @@ import { Profile } from '../entities/index.js'
 /**
  * Get a match queue of profiles
  * @param {number} profileId
+ * @param {number} limit
+ * @param {number} offset
  * @returns {array} profiles
  */
-const fetchQueueByProfileId = async profileId => {
+const fetchQueueByProfileId = async (profileId, limit, offset=0) => {
     let queue
     try {
-        queue = await db.get(`/profile/${profileId}/queue?include_profile=true`)
+        if(typeof limit==='undefined') queue = await db.get(`/profile/${profileId}/queue?include_profile=true&limit=5`)
+        else queue = await db.get(`/profile/${profileId}/queue?include_profile=true&limit=${limit}&offset=${offset}`)
+        
         if (!queue?.length) {
             throw '[Queue Service]: Could not retrieve match queue.\nHave you taken the survey and scored this profile?'
         }

frontend/src/views/HomeView.vue

@@ -5,7 +5,10 @@ main.view--home
             w-spinner(bounce)
 
         template(v-else-if='!isLoading && cards.length > 0')
-            ProfileCardList(:cards='cards')
+            ProfileCardList(
+                :cards='cards' 
+                @loadMore='onLoadMore'
+            )
 
         template(v-else-if='cards.length === 0')
             p No profiles in match_queue.
@@ -21,7 +24,7 @@ import PairingButton from '../components/PairingButton.vue'
 
 import { Card } from '../entities'
 
-import { currentProfile } from '../services'
+import { currentProfile, fetchQueueByProfileId } from '../services'
 import { mixins } from '../utils'
 
 const notificationOpts = {
@@ -60,12 +63,25 @@ export default {
         PairingButton,
     },
     mixins: [mixins.profileMixin],
+    data(){ 
+        return { 
+            fetchedCards: [],
+            offset: 0 
+        }
+    },
     computed: {
         cards() {
-            return currentProfile.queue.map(qProfile => convertToCard(qProfile))
+            let initialCards = currentProfile.queue.map(qProfile => convertToCard(qProfile))
+            if(this.fetchedCards.length === 0) return initialCards
+            return [...initialCards,...this.fetchedCards.map(qProfile => convertToCard(qProfile))]
         },
     },
     methods: {
+        async onLoadMore(){
+            this.offset += 5 // fetch next batch with updated offset
+            let newQueue = await fetchQueueByProfileId(currentProfile.id._value, 5, this.offset)
+            this.fetchedCards.push(...newQueue) // update fetchedCards => recalculate cards
+        },
         // this can be placed in utils/notification.js
         notify(payload) {
             notificationOpts.message = payload