:recycle: unifying current profile | making tags return on queue update | better frontend user simulation

backend/lib/routes/profile/patch-queue.js

         Joi.alternatives().try(
             Joi.number(),
             Joi.object({
-                // ORIGINAL
                 profile_id: Joi.number(),
                 user_id: Joi.number(),
-                // Added user_name, user_media to account for updated CompleteProfile
                 user_name: Joi.string(),
-                user_media: Joi.string(),
                 responses: Joi.array().items(),
+                tags: Joi.array().items(),
+                user_media: Joi.string(),
                 user_type: Joi.any(),
             }),
         ),

frontend/src/components/MainNav.vue

 <template lang="pug">
 nav#main-header.w-full.f-row.around.p-2
-    router-link.header__icon.mobile--only(to='/matches') matches
+    router-link.header__icon.mobile--only(:to="`/matches?pid=${pid}`") {{pid}} matches
     router-link.header__icon(to='/') home
-    router-link.header__icon.mobile--only(to='/profile') profile
-    router-link.header__icon.mobile--only(to='/survey') survey
+    router-link.header__icon.mobile--only(:to="`/profile?pid=${pid}`") {{pid}} profile
+    router-link.header__icon.mobile--only(:to="`/survey?pid=${pid}`") {{pid}} survey
 </template>
 
 <script>
 export default {
     name: 'MainNav',
+    props: {
+        pid: {
+            required: true
+        }
+    }
 }
 </script>
 

frontend/src/components/ProfileCardList.vue

 </template>
 
 <script setup>
+import { onMounted } from '@vue/runtime-core';
 import { computed, defineProps, defineEmits } from 'vue'
 import { updateQueueByProfileId, fetchMembershipsByProfileId, postMembershipByProfileId } from '../services'
 
-const emit = defineEmits(['reloadQueue'])
+const emit = defineEmits(['reload-queue'])
 // TODO: Please review this conversion from script to script setup
 // converted from the props section
 const props = defineProps({
         console.log('Make membership')
         postMembershipByProfileId({ profileId, targetId })
     }
-    emit('reloadQueue')
+    emit('reload-queue')
 }
 const hold = () => {
     console.log('held? do we need this?')
     const profileId = props.pid
     const targetId = props.profiles[0].pid
     updateQueueByProfileId(profileId, targetId, true)
-    emit('reloadQueue')
+    emit('reload-queue')
 }
 
 // from the data() section
 const favorites = []
 const requests = []
 
-    // // I dont know how to convert these to the script setup method
-// created() {
-//     this.getUser(),
-// },
-// End conversion from script to script setup
-
 
 </script>
 

frontend/src/components/Sidebar.vue

 <template lang="pug">
 aside.sidebar.p-1.f-col.between
-    h3 Messages
+    h3 Profile: {{ pid }}
     .search
         input
         label search
     messages(:title="title" :users="users")
     .spacer.f-grow
     .temp-control-box.f-row.start.center
-        p.t-up.p-0 current user
-        input(v-model='mypid' style="width: 50px")
-        button(@click="$emit('updatePid', mypid)").t-up.p-0 switch
+        input(v-model='switchToPID' style="width: 50px")
+        button(@click="$emit('updatePid', switchToPID)").t-up.p-0 switch profile
 </template>
 
 <script>
 
 export default {
     components: { messages }, 
+    props: {
+        pid: {
+            required: true
+        }
+    },
     data: () => ({
         title:'Messages from Matches',
-        mypid: 45,
+        switchToPID: null,
         users: [
             {
                 name: 'Bob McRob',
             },
         ],
     }),
-    created() {
-        this.$emit('updatePid', this.mypid)
+    mounted() {
+        // Set the form to display the default pid set in Home.vue
+        this.switchToPID = this.pid
     }
 }
 </script>

frontend/src/components/form.vue

         type: Array,
         required: true,
     },
+    pid: {
+        required: true
+    }
 })
 /**
  * Our form is comprised of steps, and each step has a series of questions
                 val: answers[answerKey],
             })
         })
-        // Remove 1st answer from idWithResponseVal and use it for profileId
-        // Bc we don't want to pass the 1st question to backend & we want profileId
-        // Necessary atm bc we manually added question in Survey class (entity)
-        const profileId = idWithResponseVal.shift().val
+
         const maxDistance = 100
-        saveSurveyByProfileID(idWithResponseVal, profileId)
+        
+        if(!props.pid) return console.error(`no pid: ${props.pid}`)
+
+        saveSurveyByProfileID(idWithResponseVal, props.pid)
         alert('Responses submitted!')
         resetAnswers()
-        scoreSurveyByProfileId(profileId, maxDistance)
+        scoreSurveyByProfileId(props.pid, maxDistance)
         state.step = 1
     } else if (state.step < props.form.length) {
         state.step++

frontend/src/entities/survey/survey.js

 
         /**  Fields */
         this.steps = [
-            [
-                {
-                    id: 0,
-                    type: 'input-string',
-                    question: 'what is your profile id',
-                    responses: null,
-                    description: null,
-                    category: null,
-                }
-            ],
             ...Object.values(questionSteps),
         ] // ! required
         

frontend/src/utils/auth.js

+class Authenticator {
+    constructor() {
+        this.curentUser = null
+    }
+}
+
+export { Authenticator }

frontend/src/utils/index.js

 import Joi from 'joi'
 import { Connector } from './db'
+import { Login } from './login'
+import { Authenticator } from './auth'
 
 const api = new Connector('kittens')
 
     return input.toLowerCase().split(' ').join('-')
 }
 
-export { api, validatorMapping, makeKebob }
+const loginHandler = new Login()
+const authHandler = new Authenticator()
+
+export { api, validatorMapping, loginHandler, authHandler, makeKebob }

frontend/src/utils/login.js

+class Login {
+    constructor() {
+        this.currentProfileId = null
+    }
+    logout() {
+        this.currentProfileId = null
+    }
+    login(pid) {
+        this.currentProfileId = parseInt(pid)
+    }
+}
+
+export { Login }

frontend/src/views/Matches.vue

 main.f-col.start.w-full
     article.match
         h1 Match Page
-    mainNav
+    main-nav(:pid="pid")
 </template>
 
 <script>
-import { defineComponent } from 'vue'
 import sidebar from '../components/Sidebar.vue'
 import mainNav from '../components/MainNav.vue'
+import { loginHandler } from '../utils'
 
 // import icon from '@/components/icon.vue'
 // import card from '@/components/card.vue'
 
-export default defineComponent({
+export default {
     components: { sidebar, mainNav },
-})
+    computed: {
+        pid: () => {
+            return loginHandler.currentProfileId
+        }
+    },
+}
 </script>
 
 <style lang="postcss">

frontend/src/views/Profile.vue

 main.f-col.start.w-full
     article#profile
         h1 Profile Page
-    main-nav
+    main-nav(:pid="pid")
 </template>
 
 <script>
 import sidebar from '../components/Sidebar.vue'
 import mainNav from '../components/MainNav.vue'
+import { loginHandler } from '../utils'
 
 export default {
     name: 'Profile',
             },
         }
     },
+    computed: {
+        pid: () => {
+            return loginHandler.currentProfileId
+        }
+    },
     created() {
         this.getUser()
     },

frontend/src/views/Survey.vue

 main.f-col.start.w-full
     article.match
         h1 Survey Page
-        siimeform(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps")
-    mainNav
+        siimeform(v-if="validSurvey && validSurvey.steps" :form="validSurvey.steps" :pid="pid")
+    main-nav(:pid="pid")
 </template>
 
 <script>
 import sidebar from '../components/Sidebar.vue'
 import mainNav from '../components/MainNav.vue'
 import { fetchSurveyByProfileId } from '../services'
+import { loginHandler } from '../utils'
 
 export default {
     components: { siimeform, sidebar, mainNav },
             validSurvey: null,
         }
     },
+    computed: {
+        pid: () => {
+            return loginHandler.currentProfileId
+        }
+    },
     async created() {
-        this.validSurvey = await fetchSurveyByProfileId()
+        console.log('survey for:', this.$route.query.pid)
+        this.validSurvey = await fetchSurveyByProfileId(this.$route.query.pid)
     },
 }
 </script>

frontend/src/views/home.vue

 <template lang="pug">
-sidebar(@updatePid="setPid")
+sidebar(v-if='!loading' :pid="pid" @updatePid="setPid")
 main.f-col.start.w-full
     article#home(v-if='!loading')
-        h1(v-if='user') {{ user.user_name }}
-        profile-card-list(:profiles='swipables' :pid='parseInt(mypid)' @reloadQueue='getQueue')
+        h1 Queue Page
+        profile-card-list(:profiles='swipables' :pid='parseInt(pid)' @reload-queue='getQueue')
     p(v-else) Loading...
-    main-nav
+    main-nav(v-if='!loading' :pid="pid")
 </template>
 
 <script>
 import { fetchQueueByProfileId } from '../services'
 import { StonkAlert } from '../services/notification.service'
 import { Chatter } from '../services/chat.service'
+import { loginHandler, authHandler } from '../utils'
 
 import batch_10 from '../../../backend/db/generated/_batch_10.js.ref'
 import batch_20 from '../../../backend/db/generated/_batch_20.js.ref'
     components: { profileCardList, sidebar, mainNav },
     data: () => ({
         swipables: [],
-        user: null,
-        mypid: null,
-        loading: true
+        loading: true,
+        pid: null
     }),
     mounted() {
-        this.setupChatter()
-        this.setupToaster()
-    },
-    async created() {
-        // this.mypid = auth.currentUser?.mypid || "99999";
-        this.mypid = 38
+        // Uncomment below to use API
+        let pid = null
+        if(!loginHandler.currentProfileId) {
+            pid  = authHandler.currentUser?.pid || 45
+        } else {
+            pid = loginHandler.currentProfileId
+        }
+        this.setPid(pid)
+
         // Uncomment below to use for batch file data
         // this.processProfilesFromBatch(this.parseBatch([batch_10, batch_20, batch_30]))
 
-        // Uncomment below to use API
-        const queueList = await fetchQueueByProfileId(this.mypid)
-        // console.log('queueList', queueList)
-        this.processQueue(queueList)
+        this.setupChatter()
+        this.setupToaster()
     },
     methods: {
         setupToaster() {
-            const t = new StonkAlert(this.mypid)
+            const t = new StonkAlert(this.pid)
         },
         setupChatter() {
             const c = new Chatter()
             console.log('---')
         },
         setPid(pid) {
-            this.mypid = pid
+            loginHandler.login(pid)
+            this.pid = loginHandler.currentProfileId
             this.getQueue()
         },
         async getQueue() {
             this.loading = true
-            const queueList = await fetchQueueByProfileId(this.mypid)
-            this.processQueue(queueList)
+            try {
+                const queueList = await fetchQueueByProfileId(this.pid)
+                this.processQueue(queueList)
+            } catch (err) {
+                console.error(err)
+            }
             this.loading = false
         },
         setupToaster() {
-            const t = new StonkAlert(this.mypid)
+            const t = new StonkAlert(this.pid)
         },
         setupChatter() {
             const c = new Chatter()