:recycle: moving service calls into the current logged in profile

frontend/src/components/ProfileCard.vue

@@ -44,11 +44,7 @@ w-card.profile-card-list--card.xs12
 <script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import {
-    updateQueueByProfileId,
-    postMembershipByProfileId,
-    currentProfile,
-} from '../services'
+import { postMembershipByProfileId, currentProfile } from '../services'
 
 import NamePlate from './NamePlate.vue'
 import AspectBar from './AspectBar.vue'
@@ -91,18 +87,18 @@ const onTab = tabIndex => {
  * for both profileId and targetId
  */
 const onPair = async () => {
-    const group = await postMembershipByProfileId({
-        profileId: currentProfile.id.value,
-        targetId: props.card.pid,
+    currentProfile._loading = true
+    const profileId = currentProfile.id.value
+    const targetId = props.card.pid
+    await postMembershipByProfileId({
+        profileId,
+        targetId,
     })
-    updateQueueByProfileId(currentProfile.id.value, props.card.pid, false)
-    currentProfile.getGroupings()
-    console.warn('created grouping:', group)
+    await currentProfile.updateQueue(profileId, targetId, false)
+    await currentProfile.getGroupings()
+    currentProfile._loading = false
 
     let goToRoute = { name: 'HomeView' }
-    // if (group.membershipMatch.hasMatch) {
-    //     goToRoute = { name: 'PairsView' }
-    // }
     router.push(goToRoute)
 }
 
@@ -111,8 +107,9 @@ const onPair = async () => {
  * and forward back home
  */
 const onPass = async () => {
-    updateQueueByProfileId(currentProfile.id.value, props.card.pid, true)
-    router.push({ name: 'HomeView' })
+    currentProfile.updateQueue(currentProfile.id.value, props.card.pid, true)
+    let goToRoute = { name: 'HomeView' }
+    router.push(goToRoute)
 }
 </script>
 

frontend/src/components/ProfileCardList.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
 section.profile-card-list.xs12.w-flex.column
-    header.xs12.w-flex 
-        //- w-select(:items="['one', 'two', 'three']" outline) Label
-
     article
         ProfileCard.match-layout(
             :aspects='aspects'
@@ -54,59 +51,18 @@ const props = defineProps({
             },
         ],
     },
-    pid: {
-        type: Number,
-        default: 9999,
-    },
     isGrid: {
         type: Boolean,
     },
 })
 
-// AHP Button behavior
-const accept = async targetId => {
-    if (targetId == props.pid) return
-    // need to pass these arguments (profileId, targetId, status)
-    // the url structure is
-    // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=false`)
-    // http://localhost:3001/api/profile/38/queue/9/delete?include_profile=true&reinsert=true
-    const profileId = props.pid
-    await updateQueueByProfileId(profileId, targetId, false)
-    const { membershipMatch, groupingName } = await postMembershipByProfileId({
-        profileId,
-        targetId,
-    })
-
-    // Reuse old grouping name if theres a match
-    let channel = groupingName
-    if (membershipMatch?.hasMatch) {
-        channel = membershipMatch.groupings[0].grouping_name
-    }
-    await subscribeToChannel(channel)
-    emit('reload')
-}
-
+/**
+ * publish a new message to the chatter with the channel and the message & title is optional
+ */
 const subscribeToChannel = async channelName => {
-    // create a chatter reference from the current profile
-    const chatter = currentProfile.chatter
-
-    /**
-     * publish a new message to the chatter with the channel and the message & title is optional
-     */
     // You MUST send chatter channels as an array in an object
-    chatter.subscribe({ channels: [channelName] })
-    const res = await chatter.publish(channelName, {
-        title: 'New Message',
-        description: `This is the checking to see if we are subscribed to the ${channelName} channel!`,
-    })
-    // PubNub response will be a timecode of when the message was published
-    //router.push({ path: `/chat/${pid}` })
-}
-
-const pass = targetId => {
-    if (targetId == props.pid) return
-    updateQueueByProfileId(props.pid, targetId, true)
-    emit('reload')
+    const channels = [channelName]
+    currentProfile.chatter.subscribe({ channels })
 }
 </script>
 

frontend/src/components/TagList.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 section.w-flex.row.wrap.pb5.justify-space-between
-    w-tag(v-for="tag in tags")
+    w-tag(v-for='tag in tags')
         p {{ tag }}
 </template>
 
@@ -8,7 +8,7 @@ section.w-flex.row.wrap.pb5.justify-space-between
 export default {
     props: {
         tags: {
-            required: true,
+            required: false,
             type: Array,
             default: () => [
                 'California RN License',
@@ -28,15 +28,15 @@ export default {
 </script>
 
 <style lang="sass">
-    section
-        min-height: 100%
-        .w-tag
-            background-color: #F7F5A6
-            margin: 3px 0
-            p
-                color: #183770
-                padding: 5px
-                font-size: 12px
-                font-weight: bolder
-                text-align: center
+section
+    min-height: 100%
+    .w-tag
+        background-color: #F7F5A6
+        margin: 3px 0
+        p
+            color: #183770
+            padding: 5px
+            font-size: 12px
+            font-weight: bolder
+            text-align: center
 </style>

frontend/src/services/login.service.js

@@ -1,5 +1,7 @@
 import { ref } from 'vue'
 import {
+    fetchQueueByProfileId,
+    updateQueueByProfileId,
     fetchMembershipsByProfileId,
     fetchResponsesByProfileId,
     Chatter,
@@ -20,6 +22,9 @@ class Login {
 
         this.groupings = []
         this.responses = []
+
+        this.queue = []
+        this.responses = []
         this.tags = []
 
         this.toaster = null
@@ -77,6 +82,7 @@ class Login {
         this.id.value = parseInt(profileId)
 
         await this.getGroupings()
+        await this.getQueue()
 
         await this.setupChatter()
         this.setupToaster(cb)
@@ -105,7 +111,7 @@ class Login {
             const tags = []
             this.setTags(tags)
         } catch (err) {
-            console.error(err)
+            console.error(`[Login Service]: ${err}`)
         }
     }
     setTags(tags) {
@@ -117,7 +123,7 @@ class Login {
             const responseList = await fetchResponsesByProfileId(this.id.value)
             this.setResponses(responseList)
         } catch (err) {
-            console.error(err)
+            console.error(`[Login Service]: ${err}`)
         }
     }
     setResponses(responses) {
@@ -128,9 +134,29 @@ class Login {
         try {
             this.groupings = await fetchMembershipsByProfileId(this.id.value)
         } catch (err) {
-            console.error(err)
+            console.error(`[Login Service]: ${err}`)
+        }
+    }
+
+    async getQueue() {
+        try {
+            this.queue = await fetchQueueByProfileId(this.id.value)
+        } catch (err) {
+            console.error(`[Login Service]: ${err}`)
+        }
+    }
+    async updateQueue(profileId, targetId, reinsert) {
+        try {
+            this.queue = await updateQueueByProfileId(
+                profileId,
+                targetId,
+                reinsert,
+            )
+        } catch (err) {
+            console.error(`[Login Service]: ${err}`)
         }
     }
+
     /**
      * For push notifications and chat
      */

frontend/src/services/queue.service.js

@@ -8,16 +8,14 @@ import { Profile } from '../entities/index.js'
  */
 const fetchQueueByProfileId = async profileId => {
     let queue
-
     try {
         queue = await db.get(`/profile/${profileId}/queue?include_profile=true`)
         if (!queue?.length) {
-            throw '[Queue Service]: Could not retrieve match queue. Please take the survey and rescore.'
+            throw '[Queue Service]: Could not retrieve match queue.\nHave you taken the survey and scored this profile?'
         }
     } catch (err) {
         console.error(err)
     }
-
     return queue
         ? queue.map(profileData => {
               return new Profile({ email: 'fixme@gmail.com', ...profileData })

frontend/src/views/HomeView.vue

@@ -1,11 +1,14 @@
 <template lang="pug">
 main.view--home
-    article(v-if='cards.length && !loading')
-        ProfileCardList(:cards='cards' :pid='pid' @reload='getCards')
+    article.w-flex.column.align-center
+        template(v-if='loading')
+            w-spinner(bounce)
 
-    p(v-else-if='cards.length === 0') No profiles in match_queue.
-    w-spinner(bounce v-else)
+        template(v-else-if='!loading && cards.length > 0')
+            ProfileCardList(:cards='cards')
 
+        template(v-else-if='cards.length === 0')
+            p No profiles in match_queue.
     MainNav
 </template>
 
@@ -19,12 +22,19 @@ import PairingButton from '../components/PairingButton.vue'
 
 import { Card } from '../entities'
 
-import {
-    currentProfile,
-    fetchQueueByProfileId,
-    fetchMembershipsByProfileId,
-} from '../services'
-import { mixins } from '../utils'
+import { currentProfile } from '../services'
+
+const notificationOpts = {
+    message: null,
+    timeout: 6000,
+    bgColor: 'white',
+    color: 'success',
+    dismiss: false,
+    shadow: true,
+    round: true,
+    sm: true,
+    icon: 'wi-star',
+}
 
 /** Callback used to format incoming into card */
 const convertToCard = profile => {
@@ -41,20 +51,6 @@ const convertToCard = profile => {
     })
 }
 
-const convertGroupingToCard = 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: 'HomeView',
     components: {
@@ -64,42 +60,19 @@ export default {
         SummaryBar,
         PairingButton,
     },
-    mixins: [mixins.cardMixin],
-    methods: {
-        /** Gets called from cardMixin */
-        async getCards() {
-            if (!currentProfile.isLoggedIn) {
-                console.error(
-                    '[Home View]: Profile not logged in or has problem loading',
-                )
-                console.error('[Home View]: Profile error:', currentProfile)
-                return
-            }
-            this.loading = true
-            const pid = currentProfile.id
-            try {
-                const queueList = await fetchQueueByProfileId(pid)
-                this.cards = this._reformat(queueList, convertToCard)
-                const matchList = await fetchMembershipsByProfileId(pid)
-                this.matches = this._reformat(matchList, convertGroupingToCard)
-            } catch (err) {
-                console.error(err)
-            }
-            this.loading = false
+    computed: {
+        loading() {
+            return currentProfile.isLoading
         },
+        cards() {
+            return currentProfile.queue.map(qProfile => convertToCard(qProfile))
+        },
+    },
+    methods: {
         // this can be placed in utils/notification.js
         notify(payload) {
-            this.$waveui.notify({
-                message: payload,
-                timeout: 6000,
-                bgColor: 'white',
-                color: 'success',
-                dismiss: false,
-                shadow: true,
-                round: true,
-                sm: true,
-                icon: 'wi-star',
-            })
+            notificationOpts.message = payload
+            this.$waveui.notify(notificationOpts)
         },
     },
 }