:recycle: cleaning up some loading confusion | sprinkling in more organized logs | moving around some func calls and components

frontend/src/App.vue

 <template lang="pug">
 w-app 
-    TopNav(@on-open="openDrawer = !openDrawer")
+    TopNav(@on-open='openDrawer = !openDrawer')
 
-    w-drawer(v-model="openDrawer")
-        SideBar(@updatePid="setPid" :pid="profile.id.value")
-        
-    RouterView(
-        @updatePid="setPid"
-    )
+    w-drawer(v-model='openDrawer')
+        SideBar(:pid='profile.id.value' @updatePid='setPid')
+
+    RouterView(@updatePid='setPid')
 </template>
 
 <script>
 import { currentProfile } from './services'
 import { surveyFactory } from './utils'
 
-// const DEV_MODE = import.meta.env.VITE_DEV == 'true'
-const DEV_MODE = false
+const DEV_MODE = import.meta.env.VITE_DEV == 'true'
 const DEV_PID = 45
 
 export default {
          * using the login form
          */
         if (DEV_MODE) {
+            console.info('===============================================')
+            console.info('-                   SIIMEE                    -')
+            console.info('-----------------------------------------------')
+            console.info('[Siimee App]: You are in development mode:', DEV_MODE)
+            console.info('[Siimee App]: Starting application...')
+            console.info('-----------------------------------------------')
             await this.setPid(DEV_PID)
         }
     },

frontend/src/components/onboarding/Aspects.vue

         | SUBMIT ANSWERS
 </template>
 <script>
-import QuestionResponse from '../QuestionResponse.vue'
+import QuestionResponse from './QuestionResponse.vue'
 
 export default {
     name: 'Aspects',

frontend/src/router/guards.js

 import { currentProfile } from '../services'
 
+const DEV_MODE = import.meta.env.VITE_DEV == 'true'
 
-const checkLoginStatus = (destination, nextCb) => {
-    if(!currentProfile.isLoggedIn || !currentProfile.isComplete) {
-        console.warn(`profile: ${currentProfile.id.value} | login: ${currentProfile.isLoggedIn} | completed: ${currentProfile.isComplete}`)
+async function log(to) {
+    if (DEV_MODE) {
+        if (!currentProfile.isLoggedIn || !currentProfile.isComplete) {
+            console.info(
+                `[Guard Status debug]: Profile: ${currentProfile.id.value} | Login: ${currentProfile.isLoggedIn} | Complete: ${currentProfile.isComplete}`,
+            )
+        }
+        console.info('[Guard Status debug]: being routed to:', to.fullPath)
     }
-    if (
+}
+
+const checkLoginStatus = (destination, nextCb) => {
+    log(destination)
+    if (DEV_MODE) {
+        nextCb()
+    } else if (
         destination.meta.requiresCompleteProfile &&
         !currentProfile.isLoggedIn &&
-        !currentProfile.isComplete 
+        !currentProfile.isComplete
     ) {
         nextCb('onboarding')
-    } else if(
+    } else if (
         destination.meta.requiresCompleteProfile &&
         destination.meta.requiresAuth &&
         !currentProfile.isLoggedIn
     }
 }
 
-export { checkLoginStatus }
+export { checkLoginStatus }

frontend/src/router/index.js

         name: `LoginView`,
         meta: { requiresAuth: false, requiresCompleteProfile: false },
     },
+    {
+        path: `/settings`,
+        component: HomeView,
+        name: `SettingsView`,
+        meta: { requiresAuth: false, requiresCompleteProfile: false },
+    },
+    {
+        path: `/search`,
+        component: HomeView,
+        name: `SearchView`,
+        meta: { requiresAuth: false, requiresCompleteProfile: false },
+    },
 ]
 
 const router = createRouter({

frontend/src/services/login.service.js

     async login(profileId, cb) {
         this._loading.value = true
 
-        console.warn('logging in:', profileId)
+        console.warn('[Login Service warn]: Logging in:', profileId)
         this.id.value = parseInt(profileId)
 
         await this.getGroupings()
         this.setupToaster(cb)
 
         this._loading.value = false
-        console.warn('logged in:', this.isLoggedIn)
-        console.warn('subscribed to:', this.chatter.subscriptions)
+        console.warn('[Login Service warn]: Login SUCCESSFUL')
+        console.warn(
+            `[Login Service warn]: ${profileId} subscribed to:`,
+            this.chatter.subscriptions,
+        )
         return this.id.value
     }
     logout() {
-        console.warn('logging out:', this.id.value)
+        console.warn('[Login Service warn]: Logging out:', this.id.value)
         this.id.value = null
         if (this.toaster) {
             this.toaster.stop()

frontend/src/services/queue.service.js

     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.'
+            throw '[Queue Service]: Could not retrieve match queue. Please take the survey and rescore.'
         }
     } catch (err) {
         console.error(err)

frontend/src/utils/mixins.js

             this.getCards()
         },
     },
-    async created() {
-        await this.getCards()
-    },
     methods: {
         _reformat(data, mapCb) {
             return data.map(mapCb)

frontend/src/views/HomeView.vue

 <template lang="pug">
 main.view--home
     article(v-if='cards.length && !loading')
-        ProfileCardList(:pid='pid' :cards='cards' @reload='getCards')
+        ProfileCardList(:cards='cards' :pid='pid' @reload='getCards')
 
     p(v-else-if='cards.length === 0') No profiles in match_queue.
-    w-spinner(v-else bounce)
+    w-spinner(bounce v-else)
 
     MainNav
 </template>
 import { Card } from '../entities'
 
 import {
+    currentProfile,
     fetchQueueByProfileId,
     fetchMembershipsByProfileId,
-    currentProfile,
 } from '../services'
 import { mixins } from '../utils'
 
     })
 }
 
-const converGroupingToCard = grouping => {
+const convertGroupingToCard = grouping => {
     if (grouping.type !== 'grouping') {
         console.error(`Cannot convert ${grouping} to Card. Invalid entity.`)
     }
         SummaryBar,
         PairingButton,
     },
-    mixins: [mixins.pidMixin, mixins.cardMixin],
+    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(this.pid)
+                const queueList = await fetchQueueByProfileId(pid)
                 this.cards = this._reformat(queueList, convertToCard)
-                const matchList = await fetchMembershipsByProfileId(this.pid)
-                this.matches = this._reformat(matchList, converGroupingToCard)
+                const matchList = await fetchMembershipsByProfileId(pid)
+                this.matches = this._reformat(matchList, convertGroupingToCard)
             } catch (err) {
                 console.error(err)
             }
             this.loading = false
         },
         // this can be placed in utils/notification.js
-
         notify(payload) {
             this.$waveui.notify({
                 message: payload,
                 icon: 'wi-star',
             })
         },
-        //  a way to send a message to a user for development purposes and testing
-        async chat() {
-            const chatter = currentProfile.chatter
-            const res = await chatter.publish(chatter.subscriptions[0], {
-                title: 'New Message',
-                description: 'This is a new message',
-            })
-            this.notify(res)
-        },
     },
 }
 </script>

frontend/src/views/OnboardingView.vue

 <template lang="pug">
 main.view--onboarding
-    article(style="display: flex;flex-direction: column;align-items: center;")
+    article(style='display: flex; flex-direction: column; align-items: center')
         component(
-            :is="onboardingStep.component"
-            :currentStep="currentStep"
-            :aspectQuestions="onboardingStep.component == 'Aspects'? aspectQuestions : null"
-            @go-to-step="goToStep"
-            @handle-submit="onboardingStep.component == 'Aspects'? onSubmit : null"
+            :aspectQuestions='onboardingStep.component == "Aspects" ? aspectQuestions : null'
+            :currentStep='currentStep'
+            :is='onboardingStep.component'
+            @go-to-step='goToStep'
+            @handle-submit='onboardingStep.component == "Aspects" ? onSubmit : null'
         )
-        //- form(@submit.prevent="onSubmit").questionnaire
-        //-     QuestionResponse(v-for="question in questions" :question="question" @updated="onUpdate")
-        //-     w-button.ma1.grow(type="submit" bg-color="success")
-        //-         w-icon.mr1 wi-check
-        //-         | SUBMIT ANSWERS
     //- MainNav
 </template>
 
 import stepViews from '@/components/onboarding'
 import OnboardingStepComponents from '../utils/onboardingStepComponents'
 
-// import QuestionResponse from '../components/QuestionResponse.vue'
 const SCORED = [1, 2, 3, 4, 5, 6] // consider expanding + modifying DB table
 const _isScored = id => SCORED.includes(id)
 
 // paginate to save every steps answers
 export default {
     name: 'OnboardingView',
-    components: { 
+    components: {
         ...stepViews,
-        // QuestionResponse 
-        },
+    },
     data: () => {
         return {
             answered: {},
             validSurvey: null,
         }
     },
-    computed : {
-        onboardingStep(){
-            if(!this.onboardingStepComponents.length) return []
+    computed: {
+        onboardingStep() {
+            if (!this.onboardingStepComponents.length) return []
             return this.onboardingStepComponents[this.currentStep]
-        }
+        },
     },
     async created() {
         const survey = await surveyFactory.createSurvey(
                 console.log(ans.question, ans.answer),
             )
         },
-        goToStep(num){
+        goToStep(num) {
             this.currentStep = num
         },
     },

frontend/src/views/PairsView.vue

     width: 100%
     margin: 0 auto
     background-color: #1F2024
-    .w-tabs__bar-item
-        height: 50px
-        font-family: 'Century Gothic'
-        color: #FFFFFF
-        &.w-tabs__bar-item--active
-        &.primary
-            color: #F2CD5C
+    .w-tabs
+        &__bar-item
+            height: 50px
+            font-family: 'Century Gothic'
+            color: #FFFFFF
+            &.primary
+                color: #F2CD5C
     .select--matches
         display: flex
         justify-content: space-between
     .active
         border-bottom: 3px solid #f2cd5c
         color: #f2cd5c
-
     .idle
         color: #bcc5d3
 </style>