Merge branch 'paginated-queue-return' of fyindr/siimee into dev

backend/lib/routes/profile/queue.js

@@ -23,7 +23,7 @@ const responseSchemas = {
 
 const validators = {
     params: params.profileId,
-    query: params.profileInclude,
+    query: Joi.object({include_profile: Joi.bool(), limit: Joi.number(), offset: Joi.number()}),
 }
 
 module.exports = {
@@ -37,13 +37,12 @@ module.exports = {
         cors: true,
         handler: async function (request, h) {
             const { profile_id } = request.params
-            const { include_profile } = request.query
+            const { include_profile, limit, offset} = request.query
             const { profileService, matchQueueService } =
                 request.server.services()
 
-            const queue = await matchQueueService.getQueue(profile_id)
+            const queue = await matchQueueService.getQueue(profile_id, limit, offset)
             const queueIds = queue.map(entry => entry.target_id)
-            // console.log('queueIds', queueIds)
             const res = {
                 ok: true,
                 handler: pluginConfig.handlerType,

backend/lib/services/matchqueue.js

@@ -9,12 +9,19 @@ module.exports = class MatchQueueService extends Schmervice.Service {
      * @param {number} profileId
      * @returns {array} MatchQueue
      */
-    async getQueue(profileId) {
+    async getQueue(profileId, limit, offset=0) {
         const { MatchQueue } = this.server.models()
+        if(typeof limit==='undefined') {
+            return await MatchQueue.query()
+                .where('profile_id', profileId)
+                .where('is_deleted', 0)
+        }
 
         return await MatchQueue.query()
             .where('profile_id', profileId)
             .where('is_deleted', 0)
+            .limit(limit)
+            .offset(offset)
     }
     /**
      * Returns queues by profile id by user type

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, offset = 0, limit = 5) => {
     let queue
     try {
-        queue = await db.get(`/profile/${profileId}/queue?include_profile=true`)
+        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,33 @@ 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,
+                this.offset,
+            )
+            this.fetchedCards.push(...newQueue) // update fetchedCards => recalculate cards
+        },
         // this can be placed in utils/notification.js
         notify(payload) {
             notificationOpts.message = payload