:recycle: more tweaks | using login to manage queue | stubbed out to manage survey and matches

frontend/src/components/ProfileCardList.vue

 section.profile_card_list.w-full
     .profile_card_list_container.w-full
         .swipe(
+            v-if="!isGrid"
             :config='config'
             :key='profile.pid'
             @throwout='swipped(profile)'
                     button.p-1(@click='hold') H
                     //- Pass
                     button.p-1(@click='pass') Pass
+        
+        .match-layout(
+            v-else
+            :key='profile.pid'
+            v-for='(profile, i) in profiles'
+        )
+                .card.b-solid.rounded.p-0.bg-cover(
+                    :style='{ "background-image": `url(${profile.avatar})` }'
+                )
+                .card__content
+                    h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
 </template>
 
 <script setup>
         type: Number,
         default: 9999,
     },
+    isGrid: {
+        type: Boolean
+    }
 })
 // from the computed section
 const currentCard = computed(() => props.profiles[props.profiles.length - 1]);
 .profile_card_list_container
     display: flex
     justify-content: center
-    margin: 5vh 0 0 0
 
 .swipe
     position: absolute

frontend/src/entities/grouping/grouping.schema.js

         grouping_id: Joi.number().required(),
         grouping_name: Joi.string(),
         grouping_type: Joi.string(),
+        profile: Joi.object()
     }),
     /** fields required before saving */
     required: ['grouping_id'],

frontend/src/services/index.js

 export * from './grouping.service'
 export * from './survey.service'
 export * from './queue.service'
+export * from './chat.service'
+export * from './notification.service'

frontend/src/services/queue.service.js

 
 // TODO: queue services
 const fetchQueueByProfileId = async profileId => {
-    const queue = await db.get(
-        `/profile/${profileId}/queue?include_profile=true`,
-    )
+    let queue
     
-    if(!queue?.length) {
-        console.error('could not retrieve match queue. Please take the survey and rescore.')
+    try {
+        queue = await db.get(
+            `/profile/${profileId}/queue?include_profile=true`,
+        )
+        if(!queue?.length) {
+            throw 'could not retrieve match queue. Please take the survey and rescore.'
+        }
+    } catch (err) {
+        console.error(err)
     }
 
     return queue ? queue.map(profileData => {

frontend/src/utils/login.js

+import { fetchQueueByProfileId } from '../services'
+
 class Login {
     constructor() {
         this.currentProfileId = null
+        this.survey = null
+        this.queue = null
+        this.matches = null
+    }
+    hasSurvey() {
+        return this.survey.length ? true : false 
+    }
+    hasQueue() {
+        return this.queue.length ? true : false 
+    }
+    hasMatches() {
+        return this.matches.length ? true : false 
+    }
+
+    _setSurvey(survey) {
+        this.survey = []
     }
+
+    async getQueue() {
+        try {
+            const queueList = await fetchQueueByProfileId(this.currentProfileId)
+            const formatted = this._reformatProfiles(queueList)
+            this._setQueue(formatted)
+        } catch (err) {
+            console.error('---')
+            this.queue = null
+            console.error(err)
+        }
+    }
+    _reformatProfiles(profiles) {
+        const formattedList = profiles.map(profile => {
+            return {
+                pid: profile.profile_id,
+                name: profile.user_name,
+                avatar: profile.user_media,
+            }
+        })
+        return formattedList
+    }
+    _setQueue(queue) {
+        this.queue = queue
+    }
+
     logout() {
         this.currentProfileId = null
     }
-    login(pid) {
+    async login(pid) {
         this.currentProfileId = parseInt(pid)
     }
 }

frontend/src/views/Matches.vue

 <template lang="pug">
-sidebar
+sidebar(:pid="pid")
 main.f-col.start.w-full
-    article.match
+    article.match(v-if='!loading')
         h1 Match Page
+        profile-card-list(:profiles='profiles' :pid='parseInt(pid)' :is-grid="true")
     main-nav(:pid="pid")
 </template>
 
 <script>
 import sidebar from '../components/Sidebar.vue'
 import mainNav from '../components/MainNav.vue'
+import profileCardList from '../components/ProfileCardList.vue'
 import { loginHandler } from '../utils'
+import { fetchMembershipsByProfileId } from '../services'
 
 // import icon from '@/components/icon.vue'
 // import card from '@/components/card.vue'
 
 export default {
-    components: { sidebar, mainNav },
+    components: { profileCardList, sidebar, mainNav },
+    data: () => ({
+        matches: null,
+        loading: true
+    }),
     computed: {
+        profiles() {
+            if(this.loading || this.matches.length < 1) return []
+            return this.matches.map(m => {
+                return {
+                    pid: m.profile.profile_id,
+                    avatar: m.profile.user_media,
+                    name: m.profile.user_name,
+                }
+            })
+        },
         pid: () => {
             return loginHandler.currentProfileId
         }
     },
+    methods: {
+        async getMatches() {
+            this.loading = true
+            try {
+                console.log('loginHandler.currentProfileId :', loginHandler.currentProfileId)
+                this.matches = await fetchMembershipsByProfileId(this.pid)
+            } catch (err) {
+                console.error(err)
+            }
+            this.loading = false
+        },
+    },
+    mounted() {
+        this.getMatches()
+    }
 }
 </script>
 

frontend/src/views/Survey.vue

 <template lang="pug">
-sidebar
+sidebar(:pid="pid")
 main.f-col.start.w-full
     article.match
         h1 Survey Page
         }
     },
     computed: {
-        pid: () => {
+        pid() {
             return loginHandler.currentProfileId
         }
     },

frontend/src/views/home.vue

 import batch_20 from '../../../backend/db/generated/_batch_20.js.ref'
 import batch_30 from '../../../backend/db/generated/_batch_30.js.ref'
 
+const DEFAULT_PID = 45
+
 export default {
     name: 'HomeView',
     components: { profileCardList, sidebar, mainNav },
     }),
     mounted() {
         // Uncomment below to use API
-        let pid = null
+        let pid
         if(!loginHandler.currentProfileId) {
-            pid  = authHandler.currentUser?.pid || 45
+            pid  = authHandler.currentUser?.pid || DEFAULT_PID
         } else {
             pid = loginHandler.currentProfileId
         }
         this.setupToaster()
     },
     methods: {
-        setupToaster() {
-            const t = new StonkAlert(this.pid)
-        },
-        setupChatter() {
-            const c = new Chatter()
-            const testAccountUUID = import.meta.env.VITE_TEST_ACCOUNT_UUID
-            c.setup(testAccountUUID)
-            console.log('---')
-        },
         setPid(pid) {
             loginHandler.login(pid)
             this.pid = loginHandler.currentProfileId
         async getQueue() {
             this.loading = true
             try {
-                const queueList = await fetchQueueByProfileId(this.pid)
-                this.processQueue(queueList)
+                await loginHandler.getQueue()
+                this.swipables = loginHandler.queue
             } catch (err) {
                 console.error(err)
             }
             this.loading = false
         },
+        // For push notifications and chat 
         setupToaster() {
             const t = new StonkAlert(this.pid)
         },
             c.setup(testAccountUUID)
             console.log('---')
         },
-        processQueue(queueList) {
-            const formattedList = []
-            queueList.forEach(profile => {
-                const formatted = {
-                        pid: profile.profile_id,
-                        name: profile.user_name,
-                        avatar: profile.user_media,
-                    }
-                formattedList.push(formatted)
-            })
-            this.swipables = formattedList
-        },
         // For Batch Data Parsing & Processing
         parseBatch(allBatches) {
             const finished = { profiles: [], users: [], responses: [] }