:recycle: making single profile view route | cleaning up more of the survey form

backend/db/data-generator/mock.js

@@ -85,7 +85,7 @@ module.exports = {
         },
         {
             response_key_id: 7,
-            response_key_category: 'locationPref',
+            response_key_category: 'profile',
             response_key_prompt: 'what is your zip code',
             response_key_description: null,
         },
@@ -142,6 +142,6 @@ module.exports = {
             profile_id: 45,
             target_id: 3,
             is_deleted: false,
-        }
+        },
     ],
-}
+}

backend/lib/plugins/profile.js

@@ -19,6 +19,7 @@ const ProfileUpdateRoute = require('../routes/profile/update')
 const ProfileRespondRoute = require('../routes/profile/respond')
 const ProfileMatchRoute = require('../routes/profile/match')
 const ProfileQueueRoute = require('../routes/profile/queue')
+const ProfileGetRoute = require('../routes/profile/get')
 const ProfilePatchQueueRoute = require('../routes/profile/patch-queue')
 
 module.exports = {
@@ -50,6 +51,7 @@ module.exports = {
         await server.route(ProfileUpdateRoute)
         await server.route(ProfileMatchRoute)
         await server.route(ProfileQueueRoute)
+        await server.route(ProfileGetRoute)
         await server.route(ProfilePatchQueueRoute)
     },
 }

backend/lib/routes/profile/get.js

@@ -0,0 +1,84 @@
+'use strict'
+
+const Joi = require('joi')
+const apiSchema = require('../../schemas/api')
+const errorSchema = require('../../schemas/errors')
+
+const pluginConfig = {
+    handlerType: 'profile',
+    docs: {
+        description: 'Returns a single profile with tags',
+        notes: 'returns from the Profiles Table',
+    },
+}
+
+const responseSchemas = {
+    profile: Joi.object({
+        profile_id: Joi.number(),
+        user_id: Joi.number(),
+        user_name: Joi.string(),
+        responses: Joi.array().items(),
+        tags: Joi.array().items(),
+        user_media: Joi.string(),
+        user_type: Joi.any(),
+        user: Joi.object(),
+    }),
+    error: errorSchema.single,
+}
+
+const validators = {
+    params: Joi.object({ profile_id: Joi.number() }),
+}
+
+module.exports = {
+    method: 'GET',
+    path: '/{profile_id}',
+    options: {
+        ...pluginConfig.docs,
+        tags: ['api'],
+        /** Protect this route with authentication? */
+        auth: false,
+        cors: true,
+        handler: async function (request, h) {
+            const { profile_id } = request.params
+            const { profileService } = request.server.services()
+
+            const res = {
+                ok: true,
+                handler: pluginConfig.handlerType,
+                data: null,
+            }
+
+            res.data = await profileService.getProfile(profile_id)
+
+            try {
+                return h.response(res).code(200)
+            } catch (err) {
+                return h
+                    .response({
+                        ok: false,
+                        handler: pluginConfig.handlerType,
+                        data: { error: `${err}` },
+                    })
+                    .code(409)
+            }
+        },
+        /** Validate based on validators object */
+        validate: {
+            ...validators,
+            failAction: 'log',
+        },
+
+        /** Validate the server response */
+        response: {
+            status: {
+                200: apiSchema.single.append({
+                    data: responseSchemas.profile,
+                }),
+                409: apiSchema.single.append({
+                    data: responseSchemas.error,
+                }),
+            },
+        },
+    },
+}

backend/lib/services/profile.js

@@ -7,12 +7,12 @@ const scoreResponses = (seeker, potentialMatch, prescoreLookup) => {
         return {
             error: `complete responses for profile: ${seeker.profile_id} unqeual to profile: ${potentialMatch.profile_id} | ${seeker.responses.length}:${potentialMatch.responses.length}`,
         }
-    
+
     const aRes = [...seeker.responses]
     const bRes = [...potentialMatch.responses]
 
     const composite = []
-    while(aRes.length + bRes.length > 0) {
+    while (aRes.length + bRes.length > 0) {
         const mKey = resList => {
             let el = resList.shift()
             let pair = el.val
@@ -21,7 +21,10 @@ const scoreResponses = (seeker, potentialMatch, prescoreLookup) => {
         }
         composite.push(prescoreLookup[mKey(aRes)][mKey(bRes)])
     }
-    return { total: Math.round(composite.reduce((a, b) => a + b) / composite.length), aspects: composite }
+    return {
+        total: Math.round(composite.reduce((a, b) => a + b) / composite.length),
+        aspects: composite,
+    }
 }
 const filterByDistance = (profileList, max) => {
     return profileList.filter(profile => {
@@ -60,19 +63,18 @@ const getZipCodeFromProfile = profile => {
 
 const makeScoreLookup = (aspects, labels) => {
     const labelLookup = {}
-    labels.forEach(label => labelLookup[label.aspect_id] = label)
+    labels.forEach(label => (labelLookup[label.aspect_id] = label))
 
     const scoreLookup = {}
     aspects.forEach(aspect => {
         const key = labelLookup[aspect.aspect_id]
         scoreLookup[`${key.a}:${key.b}`] = {}
         Object.keys(aspect).forEach(aspect_id => {
-            if(!labelLookup[aspect_id]) return
+            if (!labelLookup[aspect_id]) return
             const comp = labelLookup[aspect_id]
             const score = aspect[aspect_id]
             scoreLookup[`${key.a}:${key.b}`][`${comp.a}:${comp.b}`] = score
         })
-        
     })
     return scoreLookup
 }
@@ -101,7 +103,7 @@ module.exports = class ProfileService extends Schmervice.Service {
         this.tagLookup = {}
     }
     async _setScoreLookup() {
-        if(!Object.keys(this.scoreLookup).length) {
+        if (!Object.keys(this.scoreLookup).length) {
             const { Aspect, AspectLabel } = this.server.models()
             const aspects = await Aspect.query()
             const labels = await AspectLabel.query()
@@ -109,13 +111,16 @@ module.exports = class ProfileService extends Schmervice.Service {
         }
     }
     async _setTagLookup() {
-        if(!Object.keys(this.tagLookup).length) {
+        if (!Object.keys(this.tagLookup).length) {
             const { Tag } = this.server.models()
             const allTagDescriptions = await Tag.query()
-            allTagDescriptions.forEach(desc => this.tagLookup[desc.tag_id] = {
-                description: desc.tag_description,
-                category: desc.tag_category,
-            })
+            allTagDescriptions.forEach(
+                desc =>
+                    (this.tagLookup[desc.tag_id] = {
+                        description: desc.tag_description,
+                        category: desc.tag_category,
+                    }),
+            )
         }
     }
     /**
@@ -136,12 +141,30 @@ module.exports = class ProfileService extends Schmervice.Service {
         return [...new Set(profileIdsToGrab)]
     }
 
+    async getProfile(profileId) {
+        const { Profile } = this.server.models()
+        await this._setTagLookup()
+
+        const matchingProfile = await Profile.query()
+            .where('profile_id', profileId)
+            .first()
+            .withGraphFetched('tags')
+            .withGraphFetched('responses')
+            .withGraphFetched('user')
+
+        matchingProfile.tags = matchingProfile.tags.map(
+            tag => this.tagLookup[tag.tag_id],
+        )
+
+        return new CompleteProfile(matchingProfile)
+    }
+
     async getCompleteProfilesFor(userId, type) {
         const { Profile } = this.server.models()
         await this._setTagLookup()
 
         const dedupedProfileIds = await this._getProfileIdsForUserId(userId)
-        
+
         const profilesEntries = await Profile.query()
             .whereIn('profile_id', dedupedProfileIds)
             .withGraphFetched('tags')
@@ -153,7 +176,7 @@ module.exports = class ProfileService extends Schmervice.Service {
         profilesEntries.forEach(profile => {
             profile.tags = profile.tags.map(tag => this.tagLookup[tag.tag_id])
         })
-        
+
         //** Get responses asociated with each profile_id */
         return profilesEntries.map(profile => {
             return new CompleteProfile(profile, type)
@@ -164,17 +187,18 @@ module.exports = class ProfileService extends Schmervice.Service {
         const { Profile } = this.server.models()
         await this._setScoreLookup()
         await this._setTagLookup()
-        
 
-        // profilesEntries is profiles in dataaspect_labelsbase row order 
-        const profilesEntries = includeResponses ? await Profile.query()
-            .whereIn('profile_id', profileIdArray)
-            .withGraphFetched('tags')
-            .withGraphFetched('responses')
-            .withGraphFetched('user') : await Profile.query()
-            .whereIn('profile_id', profileIdArray)
-            .withGraphFetched('tags')
-            .withGraphFetched('user') 
+        // profilesEntries is profiles in dataaspect_labelsbase row order
+        const profilesEntries = includeResponses
+            ? await Profile.query()
+                  .whereIn('profile_id', profileIdArray)
+                  .withGraphFetched('tags')
+                  .withGraphFetched('responses')
+                  .withGraphFetched('user')
+            : await Profile.query()
+                  .whereIn('profile_id', profileIdArray)
+                  .withGraphFetched('tags')
+                  .withGraphFetched('user')
 
         // taking the info from profilesEntries
         // to repack into completeProfiles
@@ -184,11 +208,13 @@ module.exports = class ProfileService extends Schmervice.Service {
             profilesEntries.forEach(entry => {
                 if (entry.profile_id == pid) {
                     const complete = new CompleteProfile(entry, type)
-                    if(!includeResponses) {
+                    if (!includeResponses) {
                         delete complete['responses']
                     }
-                    if(entry?.tags?.length){
-                        complete.tags = entry.tags.map(tag => this.tagLookup[tag.tag_id])
+                    if (entry?.tags?.length) {
+                        complete.tags = entry.tags.map(
+                            tag => this.tagLookup[tag.tag_id],
+                        )
                     }
                     completeProfiles.push(complete)
                 }
@@ -266,7 +292,9 @@ module.exports = class ProfileService extends Schmervice.Service {
         // Delete matches
         // ?:Maybe bad idea
         if (matchingResponses.length > 0) {
-            const alreadyAnswered = matchingResponses.map(matchingRes => matchingRes.response_key_id)
+            const alreadyAnswered = matchingResponses.map(
+                matchingRes => matchingRes.response_key_id,
+            )
             await Response.query()
                 .where({ profile_id: profileId })
                 .delete()
@@ -301,7 +329,7 @@ module.exports = class ProfileService extends Schmervice.Service {
      */
     async scoreProfilesFor(profileId, maxDistance, distanceUnit) {
         const { Profile } = this.server.models()
-        
+
         await this._setScoreLookup()
 
         // Our User Profile to score for
@@ -327,7 +355,9 @@ module.exports = class ProfileService extends Schmervice.Service {
 
         // Only include profiles that included zipcode response
         profileIdsOfOppositeType = profileIdsOfOppositeType.filter(profile => {
-            const zipcodeResponses = profile.responses.filter(res => res.response_key_id == _ZIPCODEKEY)
+            const zipcodeResponses = profile.responses.filter(
+                res => res.response_key_id == _ZIPCODEKEY,
+            )
             return zipcodeResponses.length > 0
         })
 
@@ -335,7 +365,8 @@ module.exports = class ProfileService extends Schmervice.Service {
             profileIdsOfOppositeType.map(async profile => {
                 const targetZip = getZipCodeFromProfile(profile)
 
-                if(!userZip || !targetZip) return { ...profile, distance: [9999, distanceUnit] }
+                if (!userZip || !targetZip)
+                    return { ...profile, distance: [9999, distanceUnit] }
 
                 const distance = await this._compareDistance(
                     userZip,
@@ -357,11 +388,13 @@ module.exports = class ProfileService extends Schmervice.Service {
         const scoredProfilesWithDistance = scoreAll(
             distanceFilteredProfiles,
             userProfile,
-            this.scoreLookup
+            this.scoreLookup,
         )
 
         // Order by score
-        return scoredProfilesWithDistance.sort((a, b) => b.score.total - a.score.total)
+        return scoredProfilesWithDistance.sort(
+            (a, b) => b.score.total - a.score.total,
+        )
     }
 
     /**

frontend/src/components/Archive/card.vue

@@ -1,60 +0,0 @@
-<template lang="pug">
-.card.f-col.start.b-solid.rounded.bg-primary.mr-1
-    .front(v-if='!state.flipped')
-        header.t-right.dark.ph-1.pt-1
-            h3 hidden
-
-        main.ph-1
-            section
-                img.w-full(alt='Vue logo' src='@/assets/logo.png')
-
-        footer.ph-1.b-1
-            button.b-solid.rounded.p-0(@click='state.count++') {{ state.count }}
-            button.b-solid.rounded.p-0(@click='flip') flip
-            button.b-solid.rounded.p-0(@click='close') close
-    .back(v-else)
-        header.t-right.dark.ph-1.pt-1
-            h3 revealed: {{ card.name }}
-
-        main.ph-1
-            section
-                img.w-full(alt='Vue logo' src='@/assets/logo.png')
-
-        footer.ph-1.b-1
-            button.b-solid.rounded.p-0(@click='flip') unflip
-            button.b-solid.rounded.p-0(@click='close') close
-</template>
-
-<script setup>
-import { defineProps, reactive, getCurrentInstance } from 'vue'
-
-const instance = getCurrentInstance()
-
-const props = defineProps({
-    msg: String,
-    card: Object,
-})
-
-const state = reactive({
-    count: 0,
-    loaded: false,
-    profile: null,
-    flipped: false,
-})
-
-const close = e => {
-    instance.emit('on-remove', props.card)
-}
-const flip = e => {
-    state.flipped = !state.flipped
-}
-</script>
-
-<style lang="postcss">
-// prettier-ignore
-@import '@/sss/theme.sss'
-
-.card
-    height: $ms-8
-    width: $ms-7
-</style>

frontend/src/components/Archive/icon.vue

@@ -1,19 +0,0 @@
-<template lang="pug">
-.icon
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="postcss">
-.icon
-    display: block
-    border-radius: 50%
-    width: 48px
-    height: 48px
-    background-image: url('https://i.imgur.com/WFqSBgc.png')
-    background-color: rgba(20,20,20,0.3)
-    background-position: 50% 0
-    background-size: auto 125%
-</style>

frontend/src/components/Archive/navbar.vue

@@ -1,23 +0,0 @@
-<template lang="pug">
-nav#nav 
-    router-link(to='/') Browse
-    router-link(to='/match') Match
-    router-link(to='/account') Account
-</template>
-
-<script>
-export default {}
-</script>
-
-<style lang="postcss">
-nav
-    display: flex
-    justify-content: space-evenly
-    background-color: #000
-    color: #fff
-    padding: 40px 0
-    margin: 0
-    position: absolute
-    bottom: 0
-    width: 100%
-</style>

frontend/src/components/MainNav.vue

@@ -3,19 +3,12 @@ nav#main-header.w-full.f-row.around.p-2
     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`") profile
     router-link.header__icon.mobile--only(:to="`/survey`") survey
 </template>
 
 <script>
 export default {
     name: 'MainNav',
-    props: {
-        pid: {
-            type: Number,
-            required: true
-        }
-    }
 }
 </script>
 

frontend/src/components/ProfileCardList.vue

@@ -3,42 +3,47 @@ section.profile_card_list.w-full
     .profile_card_list_container.w-full
         .swipe(
             v-if="!isGrid"
-            :config='config'
-            :key='profile.pid'
-            @throwout='swipped(profile)'
-            v-for='(profile, i) in profiles'
-            :style='{"z-index": 1000-i}'
+            :config="config"
+            :key="profile.pid"
+            @throwout="swipped(profile)"
+            v-for="(profile, i) in loadedProfiles"
+            :style="{ 'z-index': 1000-i }"
         )
-            .card.b-solid.rounded.p-0.bg-cover(
-                :style='{ "background-image": `url(${profile.avatar})` }'
+            .card.b-solid.rounded.p-0.bg-cover.randomize(
+                :style="{ 'background-image': `url(${profile.avatar})`, 'top': `${randomize(10)}px`, 'right': `${randomize(20)}px`, 'transform': `rotate(${randomize(7)}deg)` }"
             )
                 .card__content
                     h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
                 nav.swipe_icons.w-full.f-row.between
                     //- Accept
-                    button.p-1(@click='accept') Accept
+                    button.p-1(@click="accept") Accept
                     //- Hold
-                    button.p-1(@click='hold') H
+                    button.p-1(@click="view(profile.pid)") view
                     //- Pass
-                    button.p-1(@click='pass') Pass
+                    button.p-1(@click="pass") Pass
         
         .match-layout(
             v-else
-            :key='profile.pid'
-            v-for='(profile, i) in profiles'
+            :key="profile.pid"
+            v-for="(profile, i) in loadedProfiles"
         )
                 .card.b-solid.rounded.p-0.bg-cover(
-                    :style='{ "background-image": `url(${profile.avatar})` }'
+                    :style="{ 'background-image': `url(${profile.avatar})` }"
                 )
                 .card__content
                     h3.p-1.mv-0.b-solid.rounded {{ profile.pid  }} {{ profile.name }}
 </template>
 
 <script setup>
-import { onMounted } from '@vue/runtime-core';
-import { computed, defineProps, defineEmits } from 'vue'
-import { updateQueueByProfileId, fetchMembershipsByProfileId, postMembershipByProfileId } from '../services'
+import { useRouter } from 'vue-router'
+import { defineProps, defineEmits } from 'vue'
+import {
+    updateQueueByProfileId,
+    fetchMembershipsByProfileId,
+    postMembershipByProfileId,
+} from '../services'
 
+const router = useRouter()
 const emit = defineEmits(['reload-queue'])
 // TODO: Please review this conversion from script to script setup
 // converted from the props section
@@ -59,31 +64,21 @@ const props = defineProps({
         default: 9999,
     },
     isGrid: {
-        type: Boolean
-    }
+        type: Boolean,
+    },
 })
-// from the computed section
-const currentCard = computed(() => props.profiles[props.profiles.length - 1]);
-// from the method section
-// const logOut = () => {};
-const reject = () => {
-    swipped(currentCard)
-}
-
-
 const swipped = profile => {
-    const index = props.profiles.findIndex(u => u.pid == profile.pid)
-    // TODO: bug, fix this
-    props.profiles.splice(index, 1)
+    const index = loadedProfiles.findIndex(u => u.pid == profile.pid)
+    loadedProfiles.splice(index, 1)
     profile.id = Date.now() + (Math.random() * 100000).toFixed()
-    // TODO: bug, fix this
-    props.profiles.unshift({ ...profile })
+    loadedProfiles.unshift({ ...profile })
 }
-const getUser = () => {
-}
-const onRequest = () => {
-    const data = { ...currentCard }
+
+const randomize = max => {
+    const pos = Math.random() > 0.5 ? -1 : 1
+    return Math.floor(Math.random() * max) * pos
 }
+
 // AHP Button behavior
 
 const accept = async () => {
@@ -103,8 +98,11 @@ const accept = async () => {
     }
     emit('reload-queue')
 }
-const hold = () => {
-    console.log('held? do we need this?')
+const view = pid => {
+    router.push({
+        name: 'ProfileView',
+        params: { pid },
+    })
 }
 const pass = () => {
     console.log('passed aka do reinsert')
@@ -121,10 +119,9 @@ const config = {
     minThrowOutDistance: 250,
     maxThrowOutDistance: 300,
 }
-const favorites = []
-const requests = []
-
 
+// Copy profiles so we don't mutate the original
+const loadedProfiles = [...props.profiles]
 </script>
 
 <style lang="postcss">
@@ -134,6 +131,8 @@ const requests = []
 
 .swipe
     position: absolute
+.randomize
+    position: relative
 
 .card
     position: relative

frontend/src/components/form.vue

@@ -1,63 +1,70 @@
 <template lang="pug">
-.form.f-col.start.mr-1.w-full(v-if='form.length')
+.form.f-col.start.mr-1.w-full(v-if="form.length")
     header
         p answers to save: {{ answers }}
 
-    ul.w-full(v-for='(step, i) in form')
+    ul.w-full(v-for="(step, i) in form")
         li.f-row.start.b-solid.p-0(
-            v-for='prompt in step'
-            v-if='step && step.length'
-            v-show='(i + 1) == state.step'
+            v-for="prompt in step"
+            v-if="step && step.length"
+            v-show="(i + 1) == state.step"
         )
             h3 {{ prompt.question }}?
-            .response-wrapper(v-if='prompt.type === "input-string"')
+            .response-wrapper(v-if="prompt.type === 'input-string'")
                 label {{ prompt.type }}
-                input(v-model='answers[makeKey(prompt)]')
-            .response-wrapper(v-else-if='prompt.type === "tag-cloud"')
+                input(v-model="answers[makeKey(prompt)]")
+            .response-wrapper(v-else-if="prompt.type === 'tag-cloud'")
                 label {{ prompt.type }}
                 button.p-0(
-                    :disabled='response == answers[makeKey(prompt)]'
-                    :prompt-question='makeKey(prompt)'
-                    @click='respondFromTag'
-                    v-for='response in prompt.responses'
+                    :disabled="response == answers[makeKey(prompt)]"
+                    :prompt-question="makeKey(prompt)"
+                    @click="respondFromTag"
+                    v-for="response in prompt.responses"
                 ) {{ response }}
             //- Checklist
-            .response-wrapper(v-if='prompt.type === "checklist"')
+            .response-wrapper(v-if="prompt.type === 'checklist'")
                 .checklist(
-                    v-for='(response, index) in prompt.responses'
-                    v-bind:key='response')
+                    v-for="(response, index) in prompt.responses"
+                    v-bind:key="response")
                     input(
-                        type='checkbox'
-                        :id='response'
-                        :value='response'
-                        :name='response'
-                        :true-value='response'
-                        false-value=''
-                        v-model='answers[makeKey(prompt)]')
-                    label(:for='response') {{ response }}
+                        type="checkbox"
+                        :id="response"
+                        :value="response"
+                        :name="response"
+                        :true-value="response"
+                        false-value=""
+                        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 === "input-slide"')
+            .response-wrapper(v-else-if="prompt.type === 'input-slide'")
                 label {{ prompt.type }}
                 input(
-                    type='range'
-                    min='-3'
-                    max='3'
-                    v-model='answers[makeKey(prompt)]')
+                    type="range"
+                    min="-3"
+                    max="3"
+                    :prompt="makeKey(prompt)"
+                    :value="answers[makeKey(prompt)]"
+                    @input="setAnswer"
+                )
                 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
+        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 }} for {{ pid }}
 </template>
 
 <script setup>
 import Joi from 'joi'
-import { validatorMapping, makeKebob } from '@/utils'
 import { defineProps, reactive } from 'vue'
-import { saveSurveyByProfileId, scoreSurveyByProfileId } from '../services/survey.service'
+import { useRouter } from 'vue-router'
+import { validatorMapping, makeKebob } from '@/utils'
+import {
+    saveSurveyByProfileId,
+    scoreSurveyByProfileId,
+} from '../services/survey.service'
 import { scoreVals } from '../../../backend/db/data-generator/config.json'
 
 const props = defineProps({
@@ -67,8 +74,8 @@ const props = defineProps({
     },
     pid: {
         required: true,
-        type: Number
-    }
+        type: Number,
+    },
 })
 const makeKey = prompt => {
     return `${prompt.id}-${prompt.type}-${makeKebob(prompt.question)}`
@@ -83,10 +90,23 @@ const state = reactive({ step: 1 })
  * Create state object to store answers based on the questions in formSteps
  */
 const answers = reactive({})
+
+const setAnswer = e => {
+    const prompt = e.target.attributes.prompt.nodeValue
+    answers[prompt] = e.target.value
+}
 const resetAnswers = () => {
     Object.keys(answers).forEach(key => (answers[key] = null))
 }
 resetAnswers()
+const setupAnswers = () => {
+    props.form.forEach(step => {
+        step.forEach(prompt => {
+            answers[makeKey(prompt)] = '0'
+        })
+    })
+}
+setupAnswers()
 /**
  * Callback for clicking a tag to respond
  */
@@ -116,7 +136,7 @@ const isValid = step => {
  */
 const formatAnswer = (inputType, answer) => {
     let formattedAnswer = answer
-    if(inputType == 'slide')  {
+    if (inputType == 'slide') {
         const offset = (scoreVals.length - 1) / 2
         formattedAnswer = scoreVals[offset + parseInt(answer)].toString()
     }
@@ -148,22 +168,24 @@ const next = async e => {
                 response_key_id: questiontoResponseKeyId[answerKey],
                 val: formatAnswer(
                     getInputTypeFromKey(answerKey),
-                    answers[answerKey]
-                )
+                    answers[answerKey],
+                ),
             }
         })
 
         const maxDistance = 100
-        
-        if(!props.pid) return console.error(`no pid: ${props.pid}`)
+
+        if (!props.pid) return console.error(`no pid: ${props.pid}`)
 
         saveSurveyByProfileId(idWithResponseVal, props.pid)
-        alert('Responses submitted!')
-        
         resetAnswers()
+
         scoreSurveyByProfileId(props.pid, maxDistance)
 
         state.step = 1
+
+        const router = useRouter()
+        router.push({ name: 'HomeView' })
     } else if (state.step < props.form.length) {
         state.step++
     } else {

frontend/src/router/index.js

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
-import Profile from '../views/Profile.vue'
+import ProfileView from '../views/ProfileView.vue'
 import Matches from '../views/Matches.vue'
 import Chats from '../views/Chats.vue'
 import Login from '../views/Login.vue'
@@ -13,12 +13,12 @@ const routes = [
         path: '/',
         component: HomeView,
         name: 'HomeView',
-        meta: { requiresAuth: true, requiresProfile: true }
+        meta: { requiresAuth: true, requiresProfile: true },
     },
     {
-        path: '/profile',
-        component: Profile,
-        name: 'Profile',
+        path: '/profile/:pid',
+        component: ProfileView,
+        name: 'ProfileView',
         meta: { requiresAuth: true },
     },
     {

frontend/src/services/profile.service.js

@@ -20,4 +20,8 @@ const fetchProfilesByUserId = async userId => {
     return validProfileInstances
 }
 
-export { fetchProfilesByUserId }
+const fetchProfileByProfileId = async profileId => {
+    const profile = await db.get(`/profile/${profileId}`)
+    return profile
+}
+export { fetchProfilesByUserId, fetchProfileByProfileId }

frontend/src/services/survey.service.js

@@ -24,8 +24,11 @@ const fetchSurveyByProfileId = async profileId => {
         const question = myquestions[i]
 
         // Set the input type based on category
-        const type = question.response_key_category == 'locationPref' ? 'input-string' : 'input-slide'
-        
+        const type =
+            question.response_key_category != 'profile'
+                ? 'input-slide'
+                : 'input-string'
+
         // Reformats myquestions into the format we want
         const reformatted = {
             id: question.response_key_id,
@@ -42,7 +45,6 @@ const fetchSurveyByProfileId = async profileId => {
         }
     }
     const mysurvey = new Survey(allsteps)
-    console.log('mysurvey :>> ', mysurvey);
     return mysurvey
 }
 
@@ -50,9 +52,11 @@ const saveSurveyByProfileId = async (surveyResponses, profileId) => {
     surveyResponses.forEach(responseKeyIdwithVal => {
         const keyId = responseKeyIdwithVal.response_key_id
         const val = responseKeyIdwithVal.val
-        
+
         // POST
-        const myresponses = db.post(`/profile/${profileId}/respond?response_key_id=${keyId}&val=${val}`)
+        const myresponses = db.post(
+            `/profile/${profileId}/respond?response_key_id=${keyId}&val=${val}`,
+        )
         return myresponses
     })
 }
@@ -62,21 +66,21 @@ const updateSurveyByProfileId = async (surveyResponses, profileId) => {
         const keyId = responseKeyIdwithVal.response_key_id
         const val = responseKeyIdwithVal.val
         // PATCH
-        const myresponses = db.patch(`/profile/${profileId}/update/${keyId}`,
-            [
-                {
-                    response_id: 2,
-                    profile_id: profileId,
-                    response_key_id: keyId,
-                    val: val,
-                },
-            ]
-        )
+        const myresponses = db.patch(`/profile/${profileId}/update/${keyId}`, [
+            {
+                response_id: 2,
+                profile_id: profileId,
+                response_key_id: keyId,
+                val: val,
+            },
+        ])
     })
 }
 
 const scoreSurveyByProfileId = async (profileId, maxDistance) => {
-    const scoreSurvey = await db.get(`/profile/${profileId}/score?max_distance=${maxDistance}`)
+    const scoreSurvey = await db.get(
+        `/profile/${profileId}/score?max_distance=${maxDistance}`,
+    )
     return scoreSurvey
 }
 

frontend/src/views/HomeView.vue

@@ -4,7 +4,7 @@ main.f-col.start.w-full
         h1 Queue Page
         ProfileCardList(:profiles="cards" :pid="pid" @reload-queue="getQueue")
     p(v-else) Loading...
-    MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
+    MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
@@ -18,8 +18,8 @@ export default {
     props: {
         pid: {
             type: Number,
-            required: true
-        }
+            required: true,
+        },
     },
     data: () => ({
         cards: [],
@@ -28,13 +28,13 @@ export default {
     watch: {
         pid() {
             this.getQueue()
-        }
+        },
     },
     async created() {
         await this.getQueue()
     },
     methods: {
-         _reformatProfiles(profiles) {
+        _reformatProfiles(profiles) {
             return profiles.map(profile => {
                 return {
                     pid: profile.profile_id,
@@ -53,7 +53,7 @@ export default {
             }
             this.loading = false
         },
-        
+
         // For Batch Data Parsing & Processing
         _parseBatch(allBatches) {
             const finished = { profiles: [], users: [], responses: [] }

frontend/src/views/Matches.vue

@@ -1,14 +1,14 @@
 <template lang="pug">
 main.f-col.start.w-full
-    article.match(v-if='!loading')
+    article#match(v-if="!loading")
         h1 Match Page
-        ProfileCardList(:profiles='profiles' :pid='parseInt(pid)' :is-grid="true")
-    MainNav(:pid="pid" @show-sidebar="$emit('show-sidebar')")
+        ProfileCardList(:profiles="profiles" :pid="pid" :is-grid="true")
+    p(v-else) Loading...
+    MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 
 <script>
 import ProfileCardList from '../components/ProfileCardList.vue'
-import { loginHandler } from '../utils'
 import { fetchMembershipsByProfileId } from '../services'
 
 export default {
@@ -16,16 +16,16 @@ export default {
     props: {
         pid: {
             type: Number,
-            required: true
-        }
+            required: true,
+        },
     },
     data: () => ({
         matches: null,
-        loading: true
+        loading: true,
     }),
     computed: {
         profiles() {
-            if(this.loading || this.matches.length < 1) return []
+            if (this.loading || this.matches.length < 1) return []
             return this.matches.map(m => {
                 return {
                     pid: m.profile.profile_id,
@@ -33,7 +33,12 @@ export default {
                     name: m.profile.user_name,
                 }
             })
-        }
+        },
+    },
+    watch: {
+        pid() {
+            this.getMatches()
+        },
     },
     methods: {
         async getMatches() {
@@ -48,7 +53,7 @@ export default {
     },
     mounted() {
         this.getMatches()
-    }
+    },
 }
 </script>
 

frontend/src/views/Profile.vue

@@ -1,54 +0,0 @@
-<template lang="pug">
-main.f-col.start.w-full
-    article#profile
-        h1 Profile Page
-    main-nav(:pid="pid")
-</template>
-
-<script>
-export default {
-    name: 'Profile',
-    props: {
-        pid: {
-            type: Number,
-            required: true
-        }
-    },
-    data() {
-        return {
-            requesting: false,
-            form: {
-                fullname: '',
-                avatar: '',
-                age: '',
-                metadata: '',
-            },
-        }
-    },
-    created() {
-        this.getUser()
-    },
-    methods: {
-        onSubmit() {
-            this.requesting = true
-            // this.getUser()
-            // this.setUser()
-        },
-        getUser() {
-            // const uid = auth.currentUser.uid
-            return
-        },
-        setUser() {
-            // CometChat.updateUser(user, apiKey)
-            // .then(() => this.$router.push({ name: "home" }))
-            // .catch((error) => console.log(error))
-            // .finally(() => this.requesting = false);
-        },
-    },
-}
-</script>
-
-<style lang="postcss">
-#profile
-
-</style>

frontend/src/views/ProfileView.vue

@@ -0,0 +1,39 @@
+<template lang="pug">
+main.f-col.start.w-full
+    article#home(v-if="!loading")
+        h1 Profile Page
+        h2 {{ profile }}
+        RouterLink(:to="{ name: 'HomeView' }") back
+    p(v-else) Loading...
+    MainNav(@show-sidebar="$emit('show-sidebar')")
+</template>
+
+<script>
+import { fetchProfileByProfileId } from '../services'
+
+export default {
+    name: 'ProfileView',
+    data: () => ({
+        loading: true,
+        profile: {},
+    }),
+    created() {
+        this.getProfile()
+    },
+    methods: {
+        async getProfile() {
+            this.loading = true
+            try {
+                this.profile = await fetchProfileByProfileId(
+                    this.$route.params.pid,
+                )
+            } catch (err) {
+                console.error(err)
+            }
+            this.loading = false
+        },
+    },
+}
+</script>
+
+<style lang="postcss"></style>

frontend/src/views/Survey.vue

@@ -15,17 +15,17 @@ export default {
     props: {
         pid: {
             type: Number,
-            required: true
-        }
+            required: true,
+        },
     },
     data() {
-        return { 
+        return {
             validSurvey: null,
         }
     },
     async created() {
-        console.log('survey for:', this.pid)
         this.validSurvey = await fetchSurveyByProfileId(this.pid)
+        console.log('survey for:', this.validSurvey)
     },
 }
 </script>