:recycle: reorg of app components | keeping pid at root level and trickle down

frontend/src/App.vue

 <template lang="pug">
-router-view
+SideBar(v-if="showSidebar" :pid="pid" @updatePid="setPid" @hide="showSidebar = false")
+RouterView(:pid="pid" @show-sidebar="showSidebar = true")
 </template>
 
 <script>
 import * as sss from '@/sss/import.css'
 
+import SideBar from './components/SideBar.vue'
+
+import { Chatter, StonkAlert } from './services'
+
+const DEFAULT_PID = 45
+
 export default {
-    name: 'app'
+    components: { SideBar },
+    data: () => ({
+        pid: null,
+        showSidebar: false
+    }),
+    created() {
+        this.setPid()
+        this.setupChatter()
+        this.setupToaster()
+    },
+    methods: {
+        setPid(pid) {
+            this.pid = pid ? parseInt(pid) : DEFAULT_PID
+        },
+
+        // For push notifications and chat 
+        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('---')
+        },
+    },
+    
 }
 </script>
 

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?pid=${pid}`") {{pid}} matches
+    button(@click="$emit('show-sidebar')") show sidebar
+    router-link.header__icon.mobile--only(:to="`/matches`") matches
     router-link.header__icon(to='/') home
-    router-link.header__icon.mobile--only(:to="`/profile?pid=${pid}`") {{pid}} profile
-    router-link.header__icon.mobile--only(:to="`/survey?pid=${pid}`") {{pid}} survey
+    router-link.header__icon.mobile--only(:to="`/profile`") profile
+    router-link.header__icon.mobile--only(:to="`/survey`") survey
 </template>
 
 <script>
     name: 'MainNav',
     props: {
         pid: {
+            type: Number,
             required: true
         }
     }

frontend/src/components/Sidebar.vue → frontend/src/components/SideBar.vue

 <template lang="pug">
 aside.sidebar.p-1.f-col.between
     h3 Profile: {{ pid }}
-    .search
-        input
-        label search
-
+    button(@click="$emit('hide')") hide
     messages(:title="title" :users="users")
     .spacer.f-grow
     .temp-control-box.f-row.start.center
     components: { messages }, 
     props: {
         pid: {
-            required: true
+            required: true,
+            type: Number
         }
     },
     data: () => ({

frontend/src/components/form.vue

             h3 {{ prompt.question }}?
             .response-wrapper(v-if='prompt.type === "input-string"')
                 label {{ prompt.type }}
-                input(v-model='answers[`${prompt.id}-${makeKebob(prompt.question)}`]')
+                input(v-model='answers[makeKey(prompt)]')
             .response-wrapper(v-else-if='prompt.type === "tag-cloud"')
                 label {{ prompt.type }}
                 button.p-0(
-                    :disabled='response == answers[`${prompt.id}-${makeKebob(prompt.question)}`]'
-                    :prompt-question='`${prompt.id}-${makeKebob(prompt.question)}`'
+                    :disabled='response == answers[makeKey(prompt)]'
+                    :prompt-question='makeKey(prompt)'
                     @click='respondFromTag'
                     v-for='response in prompt.responses'
                 ) {{ response }}
                         :name='response'
                         :true-value='response'
                         false-value=''
-                        v-model='answers[`${prompt.id}-${makeKebob(prompt.question)}`]')
+                        v-model='answers[makeKey(prompt)]')
                     label(:for='response') {{ response }}
             //- Slider from -3 to 0 to +3 (increments of 1)
-            .response-wrapper(v-else-if='prompt.type === "slide"')
+            .response-wrapper(v-else-if='prompt.type === "input-slide"')
                 label {{ prompt.type }}
                 input(
                     type='range'
                     min='-3'
                     max='3'
-                    v-model='answers[`${prompt.id}-${makeKebob(prompt.question)}`]')
-                span {{ answers[`${prompt.id}-${makeKebob(prompt.question)}`] }}
+                    v-model='answers[makeKey(prompt)]')
+                span {{ answers[makeKey(prompt)] }}
 
     footer.f-row.w-full
         button.p-1(:disabled='state.step == 1' @click='back') back
         button.p-1(:disabled='state.step == form.length' @click='next') next
         button.p-1(:disabled='state.step != form.length' @click='next') save
         .f-grow
-        p step: {{ state.step }} of {{ form.length }}
+        p step: {{ state.step }} of {{ form.length }} for {{ pid }}
 </template>
 
 <script setup>
 import Joi from 'joi'
 import { validatorMapping, makeKebob } from '@/utils'
-import { defineProps, reactive, ref } from 'vue'
-import { saveSurveyByProfileID, scoreSurveyByProfileId } from '../services/survey.service'
-
-const slidevalue = ref('0')
+import { defineProps, reactive } from 'vue'
+import { saveSurveyByProfileId, scoreSurveyByProfileId } from '../services/survey.service'
+import { scoreVals } from '../../../backend/db/data-generator/config.json'
 
 const props = defineProps({
     form: {
         required: true,
     },
     pid: {
-        required: true
+        required: true,
+        type: Number
     }
 })
+const makeKey = prompt => {
+    return `${prompt.id}-${prompt.type}-${makeKebob(prompt.question)}`
+}
+
 /**
  * Our form is comprised of steps, and each step has a series of questions
  */
     const schema = {}
     const answeredThisStep = {}
     props.form[step].forEach(prompt => {
-        const key = `${prompt.id}-${makeKebob(prompt.question)}`
+        const key = makeKey(prompt)
         schema[key] = validatorMapping[prompt.type]
         answeredThisStep[key] = answers[key]
     })
     return Joi.object(schema).validate(answeredThisStep)
 }
+/**
+ * Vary the final answer format by input type
+ */
+const formatAnswer = (inputType, answer) => {
+    let formattedAnswer = answer
+    if(inputType == 'slide')  {
+        const offset = (scoreVals.length - 1) / 2
+        formattedAnswer = scoreVals[offset + parseInt(answer)].toString()
+    }
+    return formattedAnswer
+}
 /**
  * Save or take the-nNext step in the form
  */
+const getInputTypeFromKey = k => {
+    const inputIndex = k.split('-').indexOf('input')
+    return k.split('-')[inputIndex + 1]
+}
+
 const next = async e => {
     const validity = isValid(state.step - 1)
-    if (validity.error) return console.error(validity.error)
+    if (validity.error) console.error(validity.error)
+
     if (state.step === props.form.length) {
+        // Make key map of each prompt.id
         const questiontoResponseKeyId = {}
         props.form.forEach(step => {
             step.forEach(prompt => {
-                questiontoResponseKeyId[`${prompt.id}-${makeKebob(prompt.question)}`] = prompt.id
-                })
+                questiontoResponseKeyId[makeKey(prompt)] = prompt.id
+            })
         })
-        const idWithResponseVal = []
-        Object.keys(answers).forEach(answerKey => {
-            idWithResponseVal.push({
+
+        const idWithResponseVal = Object.keys(answers).map(answerKey => {
+            return {
                 response_key_id: questiontoResponseKeyId[answerKey],
-                val: answers[answerKey],
-            })
+                val: formatAnswer(
+                    getInputTypeFromKey(answerKey),
+                    answers[answerKey]
+                )
+            }
         })
 
         const maxDistance = 100
         
         if(!props.pid) return console.error(`no pid: ${props.pid}`)
 
-        saveSurveyByProfileID(idWithResponseVal, props.pid)
+        saveSurveyByProfileId(idWithResponseVal, props.pid)
         alert('Responses submitted!')
+        
         resetAnswers()
         scoreSurveyByProfileId(props.pid, maxDistance)
+
         state.step = 1
     } else if (state.step < props.form.length) {
         state.step++

frontend/src/main.js

 import App from './App.vue'
 import router from './router'
 
+import MainNav from './components/MainNav.vue'
+
 router.beforeEach((to, from, next) => {
     const requiresAuth = false
     const requiresProfile = true
     // }
 })
 
-createApp(App).use(router).mount('#app')
+const siimee = createApp(App).use(router)
+siimee.component('MainNav', MainNav)
+siimee.mount('#app')

frontend/src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router'
-import home from '../views/home.vue'
+
+import HomeView from '../views/HomeView.vue'
 import Profile from '../views/Profile.vue'
 import Matches from '../views/Matches.vue'
 import Chats from '../views/Chats.vue'
 const routes = [
     {
         path: '/',
-        component: home,
+        component: HomeView,
         name: 'HomeView',
-        meta: { requiresAuth: true, requiresProfile: true },
+        meta: { requiresAuth: true, requiresProfile: true }
     },
     {
         path: '/profile',

frontend/src/services/survey.service.js

     // Add the questions into each step, dividing into questionsPerStep
     for (let i = 0; i < myquestions.length; i++) {
         const question = myquestions[i]
+
+        // Set the input type based on category
+        const type = question.response_key_category == 'locationPref' ? 'input-string' : 'input-slide'
+        
         // Reformats myquestions into the format we want
         const reformatted = {
             id: question.response_key_id,
-            type: 'input-string',
+            type,
             question: question.response_key_prompt,
             responses: null,
             description: question.response_key_description,
         }
     }
     const mysurvey = new Survey(allsteps)
+    console.log('mysurvey :>> ', mysurvey);
     return mysurvey
 }
 
-const saveSurveyByProfileID = async (surveyResponses, profileId) => {
+const saveSurveyByProfileId = async (surveyResponses, profileId) => {
     surveyResponses.forEach(responseKeyIdwithVal => {
         const keyId = responseKeyIdwithVal.response_key_id
         const val = responseKeyIdwithVal.val
 
 export {
     fetchSurveyByProfileId,
-    saveSurveyByProfileID,
+    saveSurveyByProfileId,
     updateSurveyByProfileId,
     scoreSurveyByProfileId,
 }

frontend/src/utils/forms.js

-const profileForm = [
-    [
-        {
-            type: 'input-string',
-            id: 1,
-            responses: null,
-        },
-        {
-            type: 'tag-cloud',
-            id: 2,
-            responses: ['red', 'blue', 'green', 'white', 'black'],
-        },
-    ],
-    [
-        {
-            type: 'input-string',
-            id: 3,
-            responses: null,
-        },
-        {
-            type: 'input-string',
-            id: 4,
-            responses: null,
-        },
-    ],
-]
-
-export { profileForm }

frontend/src/utils/index.js

     'input-string': Joi.string(),
     'tag-cloud': Joi.string(),
     'checklist': Joi.string(),
-    'slide': Joi.string(),
+    'input-slide': Joi.string(),
 }
 
 const makeKebob = input => {

frontend/src/utils/login.js

 
 class Login {
     constructor() {
+        this.loading = true
         this.currentProfileId = null
         this.survey = null
         this.queue = null
     }
 
     async getQueue() {
+        this.loading = true
         try {
             const queueList = await fetchQueueByProfileId(this.currentProfileId)
             const formatted = this._reformatProfiles(queueList)
             this._setQueue(formatted)
+            this.loading = false
         } catch (err) {
             console.error('---')
             this.queue = null

frontend/src/views/home.vue → frontend/src/views/HomeView.vue

 <template lang="pug">
-sidebar(v-if='!loading' :pid="pid" @updatePid="setPid")
 main.f-col.start.w-full
-    article#home(v-if='!loading')
+    article#home(v-if="!loading")
         h1 Queue Page
-        profile-card-list(:profiles='swipables' :pid='parseInt(pid)' @reload-queue='getQueue')
+        ProfileCardList(:profiles="cards" :pid="pid" @reload-queue="getQueue")
     p(v-else) Loading...
-    main-nav(v-if='!loading' :pid="pid")
+    MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
-import sidebar from '../components/Sidebar.vue'
-import mainNav from '../components/MainNav.vue'
-import profileCardList from '../components/ProfileCardList.vue'
+import ProfileCardList from '../components/ProfileCardList.vue'
 
-import { Chatter, StonkAlert } from '../services'
-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'
-import batch_30 from '../../../backend/db/generated/_batch_30.js.ref'
-
-const DEFAULT_PID = 45
+import { fetchQueueByProfileId } from '../services'
 
 export default {
     name: 'HomeView',
-    components: { profileCardList, sidebar, mainNav },
+    components: { ProfileCardList },
+    props: {
+        pid: {
+            type: Number,
+            required: true
+        }
+    },
     data: () => ({
-        swipables: [],
+        cards: [],
         loading: true,
-        pid: null
     }),
-    mounted() {
-        // Uncomment below to use API
-        let pid
-        if(!loginHandler.currentProfileId) {
-            pid  = authHandler.currentUser?.pid || DEFAULT_PID
-        } else {
-            pid = loginHandler.currentProfileId
+    watch: {
+        pid() {
+            this.getQueue()
         }
-        this.setPid(pid)
-
-        // Uncomment below to use for batch file data
-        // this.processProfilesFromBatch(this.parseBatch([batch_10, batch_20, batch_30]))
-
-        this.setupChatter()
-        this.setupToaster()
+    },
+    async created() {
+        await this.getQueue()
     },
     methods: {
-        setPid(pid) {
-            loginHandler.login(pid)
-            this.pid = loginHandler.currentProfileId
-            this.getQueue()
+         _reformatProfiles(profiles) {
+            return profiles.map(profile => {
+                return {
+                    pid: profile.profile_id,
+                    name: profile.user_name,
+                    avatar: profile.user_media,
+                }
+            })
         },
         async getQueue() {
             this.loading = true
             try {
-                await loginHandler.getQueue()
-                this.swipables = loginHandler.queue
+                const queueList = await fetchQueueByProfileId(this.pid)
+                this.cards = this._reformatProfiles(queueList)
             } catch (err) {
                 console.error(err)
             }
             this.loading = false
         },
-        // For push notifications and chat 
-        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('---')
-        },
+        
         // For Batch Data Parsing & Processing
-        parseBatch(allBatches) {
+        _parseBatch(allBatches) {
             const finished = { profiles: [], users: [], responses: [] }
             allBatches.forEach(batch => {
                 const split = batch.value.split('\n')
             // console.log('parsed batch', finished)
             return finished
         },
-        processProfilesFromBatch(parsed) {
+        _processProfilesFromBatch(parsed) {
             const findUser = profile => {
                 return parsed.users.filter(u => u.user_id == profile.user_id)[0]
             }

frontend/src/views/Matches.vue

 <template lang="pug">
-sidebar(:pid="pid")
 main.f-col.start.w-full
     article.match(v-if='!loading')
         h1 Match Page
-        profile-card-list(:profiles='profiles' :pid='parseInt(pid)' :is-grid="true")
-    main-nav(:pid="pid")
+        ProfileCardList(:profiles='profiles' :pid='parseInt(pid)' :is-grid="true")
+    MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
-import sidebar from '../components/Sidebar.vue'
-import mainNav from '../components/MainNav.vue'
-import profileCardList from '../components/ProfileCardList.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: { profileCardList, sidebar, mainNav },
+    components: { ProfileCardList },
+    props: {
+        pid: {
+            type: Number,
+            required: true
+        }
+    },
     data: () => ({
         matches: null,
         loading: true
                     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)

frontend/src/views/Profile.vue

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

frontend/src/views/Survey.vue

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