:recycle: streamlining view loading | removing card mixin | using current profile for load stat

frontend/src/components/ChatBubble.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+.chat-blob.message-wrapper.pa4
+    p.pb1
+        span(v-if='publisherId == profile.id.value') you
+        span(v-else) {{ publisherId }}
+        span @{{ new Date(parseInt(time) / 10000).toLocaleTimeString('en-US') }}
+    p {{ message }}
+</template>
+
+<script>
+import { mixins } from '../utils'
+export default {
+    props: {
+        publisherId: {
+            type: String,
+            required: true,
+        },
+        message: {
+            type: String,
+            required: true,
+        },
+        time: {
+            type: String,
+            required: true,
+        },
+    },
+    mixins: [mixins.profileMixin],
+}
+</script>

frontend/src/components/ProfileCard.vue

@@ -107,7 +107,14 @@ const onPair = async () => {
  * and forward back home
  */
 const onPass = async () => {
-    currentProfile.updateQueue(currentProfile.id.value, props.card.pid, true)
+    currentProfile._loading = true
+    await currentProfile.updateQueue(
+        currentProfile.id.value,
+        props.card.pid,
+        true,
+    )
+    currentProfile._loading = false
+
     let goToRoute = { name: 'HomeView' }
     router.push(goToRoute)
 }

frontend/src/services/login.service.js

@@ -139,22 +139,10 @@ class Login {
     }
 
     async getQueue() {
-        try {
-            this.queue = await fetchQueueByProfileId(this.id.value)
-        } catch (err) {
-            console.error(`[Login Service]: ${err}`)
-        }
+        this.queue = await fetchQueueByProfileId(this.id.value)
     }
     async updateQueue(profileId, targetId, reinsert) {
-        try {
-            this.queue = await updateQueueByProfileId(
-                profileId,
-                targetId,
-                reinsert,
-            )
-        } catch (err) {
-            console.error(`[Login Service]: ${err}`)
-        }
+        this.queue = await updateQueueByProfileId(profileId, targetId, reinsert)
     }
 
     /**

frontend/src/services/queue.service.js

@@ -31,9 +31,17 @@ const fetchQueueByProfileId = async profileId => {
  * @returns {array} profiles
  */
 const updateQueueByProfileId = async (profileId, targetId, reinsert) => {
-    const updateQueue = await db.patch(
-        `/profile/${profileId}/queue/${targetId}/delete?include_profile=true&reinsert=${reinsert}`,
-    )
+    let updateQueue
+    try {
+        updateQueue = await db.patch(
+            `/profile/${profileId}/queue/${targetId}/delete?include_profile=true&reinsert=${reinsert}`,
+        )
+        if (!updateQueue?.length) {
+            throw '[Queue Service]: Could not update match queue.'
+        }
+    } catch (err) {
+        console.error(err)
+    }
     return updateQueue
         ? updateQueue.map(profileData => {
               return new Profile({ email: 'fixme@gmail.com', ...profileData })

frontend/src/utils/index.js

@@ -2,7 +2,7 @@ import Joi from 'joi'
 import { Connector } from './db.js'
 import { SurveyFactory } from './survey.js'
 import { possible } from './lang.js'
-import { pidMixin, cardMixin } from './mixins.js'
+import { pidMixin, profileMixin } from './mixins.js'
 
 // This will NOT work until ES2022 gets assert in browsers
 // import config from '../../../backend/db/data-generator/config.json' assert { type: 'json' }
@@ -46,7 +46,7 @@ const makeKebob = input => {
 
 const surveyFactory = new SurveyFactory(possible['usa'])
 
-const mixins = { pidMixin, cardMixin }
+const mixins = { pidMixin, profileMixin }
 
 const randomNumber = max => {
     return Math.floor(Math.random() * max) < 1

frontend/src/utils/mixins.js

@@ -1,3 +1,5 @@
+import { currentProfile } from '../services'
+
 const pidMixin = {
     props: {
         pid: {
@@ -8,23 +10,17 @@ const pidMixin = {
     },
 }
 
-const cardMixin = {
-    data: () => ({
-        cards: [],
-        matches: [],
-        loading: true,
-    }),
-    watch: {
-        /** Fetch the queue if pid changes */
-        pid() {
-            this.getCards()
+const profileMixin = {
+    computed: {
+        profile() {
+            return currentProfile
         },
-    },
-    methods: {
-        _reformat(data, mapCb) {
-            return data.map(mapCb)
+        isLoading() {
+            return currentProfile.isLoading
+        },
+        isLoggedIn() {
+            return currentProfile.isLoggedIn
         },
     },
 }
-
-export { pidMixin, cardMixin }
+export { pidMixin, profileMixin }

frontend/src/views/ChatView.vue

@@ -4,24 +4,25 @@ main.view--chat
         h3 chatting with: {{ target.profile_id }}
         p subscriptions: {{ profile.chatter.subscriptions }}
 
-    article(v-if='profile.isLoggedIn && target')
-        ul#messages.w-flex.column
-            template(v-for='chatmessage in messages')
-                li(
-                    :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
-                    v-if='chatmessage.message.description'
-                )
-                    .message-wrapper.pa4
-                        p.pb1
-                            span(
-                                v-if='chatmessage.publisher == profile.id.value'
-                            ) you
-                            span(v-else) {{ chatmessage.publisher }}
-                            span @{{ new Date(parseInt(chatmessage.timetoken) / 10000).toLocaleTimeString('en-US') }}
-                        p {{ chatmessage.message.description }}
+    article
+        template(v-if='isLoading')
+            w-spinner(bounce)
 
-    p(v-else-if='profile.isLoggedIn && !target') No match found between profile {{ $route.params.pid }} and {{ profile.id }}...
-    w-spinner(bounce v-else)
+        template(v-if='!isLoading && target')
+            ul#messages.w-flex.column
+                template(v-for='chatmessage in messages')
+                    li(
+                        :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
+                        v-if='chatmessage.message.description'
+                    )
+                        ChatBubble(
+                            :message='chatmessage.message.description'
+                            :publisher-id='chatmessage.publisher'
+                            :time='chatmessage.timetoken'
+                        )
+
+        template(v-else-if='!isLoading && !target')
+            p No match found between profile {{ $route.params.pid }} and {{ profile.id }}...
 
     footer.w-flex.row
         w-input(@keyup.enter='sendMessage' outline v-model='toSend')
@@ -32,19 +33,20 @@ main.view--chat
 </template>
 
 <script>
+import ChatBubble from '../components/ChatBubble.vue'
 import { currentProfile } from '../services'
+import { mixins } from '../utils'
 
 export default {
     name: 'ProfileView',
+    components: { ChatBubble },
+    mixins: [mixins.profileMixin],
     data: () => ({
         target: null,
         toSend: '',
         messages: [],
         openDrawer: null,
     }),
-    computed: {
-        profile: () => currentProfile,
-    },
     watch: {
         profile() {
             this.loadTargetProfile()

frontend/src/views/HomeView.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 main.view--home
     article.w-flex.column.align-center
-        template(v-if='loading')
+        template(v-if='isLoading')
             w-spinner(bounce)
 
-        template(v-else-if='!loading && cards.length > 0')
+        template(v-else-if='!isLoading && cards.length > 0')
             ProfileCardList(:cards='cards')
 
         template(v-else-if='cards.length === 0')
@@ -23,6 +23,7 @@ import PairingButton from '../components/PairingButton.vue'
 import { Card } from '../entities'
 
 import { currentProfile } from '../services'
+import { mixins } from '../utils'
 
 const notificationOpts = {
     message: null,
@@ -60,10 +61,8 @@ export default {
         SummaryBar,
         PairingButton,
     },
+    mixins: [mixins.profileMixin],
     computed: {
-        loading() {
-            return currentProfile.isLoading
-        },
         cards() {
             return currentProfile.queue.map(qProfile => convertToCard(qProfile))
         },

frontend/src/views/MessagesView.vue

@@ -1,36 +1,24 @@
 <template lang="pug">
 main.view--messages
-    article(v-if="!loading")
-        PairsList(:pairs="inboxes")
+    article
+        template(v-if='!loading')
+            w-spinner(bounce)
 
-    w-spinner(v-else bounce)
+        template(v-else)
+            PairsList(:pairs='inboxes')
     MainNav
 </template>
 
 <script>
 import PairsList from '../components/PairsList.vue'
-
-import { fetchMembershipsByProfileId } from '../services'
 import { mixins } from '../utils'
 
 export default {
     name: 'MessagesView',
     components: { PairsList },
-    mixins: [mixins.pidMixin, mixins.cardMixin],
+    mixins: [mixins.pidMixin, mixins.profileMixin],
     data: () => ({
         inboxes: ['x'],
     }),
-    methods: {
-        /** Gets called from cardMixin */
-        async getCards() {
-            this.loading = true
-            try {
-                this.inboxes = await fetchMembershipsByProfileId(this.pid)
-            } catch (err) {
-                console.error(err)
-            }
-            this.loading = false
-        },
-    },
 }
-</script>
+</script>

frontend/src/views/OnboardingView.vue

@@ -49,15 +49,13 @@ export default {
     components: {
         ...stepViews,
     },
-    data: () => {
-        return {
-            answered: {},
-            aspectQuestions: [],
-            currentStep: 0,
-            onboardingStepComponents: [],
-            validSurvey: null,
-        }
-    },
+    data: () => ({
+        answered: {},
+        aspectQuestions: [],
+        currentStep: 0,
+        onboardingStepComponents: [],
+        validSurvey: null,
+    }),
     computed: {
         onboardingStep() {
             if (!this.onboardingStepComponents.length) return []

frontend/src/views/PairsView.vue

@@ -1,17 +1,19 @@
 <template lang="pug">
 main.view--pairs
-    article(v-if='isLoggedIn')
-        w-tabs(:items='tabs' fill-bar slider-color='yellow')
-            template(#item-title='{ item }')
-                span {{ item.title }}
-            //- pending tab
-            template(#item-content.1='{ item }')
-                PairsList(:pairs='pending' tab-name='pending')
-            //- paired tab 
-            template(#item-content.2='{ item }')
-                PairsList(:pairs='paired' tab-name='paired')
+    article
+        template(v-if='isLoading')
+            w-spinner(bounce)
+        template(v-else)
+            w-tabs(:items='tabs' fill-bar slider-color='yellow')
+                template(#item-title='{ item }')
+                    span {{ item.title }}
+                //- pending tab
+                template(#item-content.1='{ item }')
+                    PairsList(:pairs='pending' tab-name='pending')
+                //- paired tab 
+                template(#item-content.2='{ item }')
+                    PairsList(:pairs='paired' tab-name='paired')
 
-    w-spinner(bounce v-else)
     MainNav
 </template>
 
@@ -42,13 +44,11 @@ const convertGroupingToCard = grouping => {
 export default {
     name: 'PairsView',
     components: { PairsList },
+    mixins: [mixins.profileMixin],
     data: () => ({
         tabs: [{ title: 'Pending' }, { title: 'Paired' }],
     }),
     computed: {
-        isLoggedIn() {
-            return currentProfile.isLoggedIn
-        },
         pending() {
             if (!this.isLoggedIn || !currentProfile.pendingGroupings) return []
             return this._reformat(