:wrench: WIP trying to incorporate services to Pairs page

frontend/src/components/PairsList.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+section.pairs-list
+    article
+        .pair(
+            v-for="p in pairs"
+        )
+            h3 {{p.name}}
+    
+</template>
+
+<script setup>
+const props = defineProps({
+    pairs: {
+        type: [Object, Array],
+        default: () => [{}],
+    },
+})
+</script>

frontend/src/views/MatchesView.vue

@@ -5,10 +5,11 @@ main.view--matches
         .matches--paired(:class="currentTab =='paired' ? 'active':'idle'" @click="switchTab('paired')") Paired
 
     article.pa12
+        //- TODO add and render appropriate lists for both tabs
         template(v-if="currentTab=='pending'")
-            p Pending Matches
+            PairsList(:list='pendingList')
         template(v-else)
-            p Paired Matches
+            PairsList(:list='pairedList')
         //- template(v-if='matches.length && !loading')
         //-     h2 atches
         //-     ProfileCardList(:pid='pid' :profiles='matches' @reload='getCards')
@@ -20,14 +21,43 @@ main.view--matches
 </template>
 
 <script>
-import ProfileCardList from '../components/ProfileCardList.vue'
+// import ProfileCardList from '../components/ProfileCardList.vue'
+import PairsList from '../components/PairsList.vue'
 
-import { fetchMembershipsByProfileId } from '../services'
+import { fetchMembershipsByProfileId, fetchQueueByProfileId } from '../services'
 import { mixins } from '../utils'
 
+const convertToCard = profile => {
+    if (profile.type !== 'profile') {
+        console.error(`Cannot convert ${profile} to Card. Invalid entity.`)
+    }
+    if (!profile.isValid()) {
+        console.warn(`Profile ${profile.profile_id} is not a valid profile.`)
+    }
+    return new Card({
+        pid: profile.profile_id,
+        name: profile.user_name,
+        avatar: profile.profile_media[0],
+    })
+}
+
+const converGroupingToCard = grouping => {
+    if (grouping.type !== 'grouping') {
+        console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
+    }
+    if (!grouping.profile.isValid()) {
+        console.warn(`Profile in ${grouping} is not a valid profile.`)
+    }
+    return new Card({
+        pid: grouping.profile.profile_id,
+        name: grouping.profile.user_name,
+        avatar: grouping.profile.profile_media[0],
+    })
+}
+
 export default {
     name: 'MatchView',
-    components: { ProfileCardList },
+    components: { PairsList },
     mixins: [mixins.pidMixin, mixins.cardMixin],
     data: () => ({
         currentTab: 'pending'
@@ -37,7 +67,10 @@ export default {
         async getCards() {
             this.loading = true
             try {
-                this.cards = await fetchMembershipsByProfileId(this.pid)
+                const pending = await fetchQueueByProfileId(this.pid)
+                this.pendingList = this._reformat(pending,converGroupingToCard)
+                const paired = await fetchMembershipsByProfileId(this.pid)
+                this.PairedList = this._reformat(paired,convertToCard)
             } catch (err) {
                 console.error(err)
             }