:recycle: removing older form ideas | cleaning-up survey into smaller funcs | moving response generator to utils

backend/lib/services/profile.js

             .withGraphFetched('responses')
             .withGraphFetched('user')
 
-        matchingProfile.tags = matchingProfile.tags.map(
-            tag => this.tagLookup[tag.tag_id],
-        )
+        if(matchingProfile?.tags.length){
+            matchingProfile.tags = matchingProfile.tags.map(
+                tag => this.tagLookup[tag.tag_id],
+            )
+        }
 
         return new CompleteProfile(matchingProfile)
     }

frontend/src/App.vue

         */
         if(DEV_MODE) { this.setPid(DEV_PID) }
 
-        if(currentProfile.isLoggedIn()) {
+        if(currentProfile.isLoggedIn) {
             console.warn(`setting up Chatter and Toaster for ${this.getPid}...`)
             this.setupChatter()
             this.setupToaster()

frontend/src/components/form.vue

-<template lang="pug">
-.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")
-        li.f-row.start.b-solid.p-0(
-            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'")
-                label {{ prompt.type }}
-                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"
-                ) {{ response }}
-            //- Checklist
-            .response-wrapper(v-if="prompt.type === 'checklist'")
-                .checklist(
-                    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 }}
-            //- Slider from -3 to 0 to +3 (increments of 1)
-            .response-wrapper(v-else-if="prompt.type === 'input-slide'")
-                label {{ prompt.type }}
-                input(
-                    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
-        .f-grow
-        p step: {{ state.step }} of {{ form.length }} for {{ pid }}
-</template>
-
-<script setup>
-import Joi from 'joi'
-import { reactive } from 'vue'
-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({
-    form: {
-        type: Array,
-        required: true,
-    },
-    pid: {
-        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 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
- */
-const respondFromTag = e => {
-    const answer = e.target.textContent
-    const questionKey =
-        e.target.attributes.getNamedItem('prompt-question').nodeValue
-    answers[questionKey] = answer
-}
-/**
- * Check answered fields in current step, build a validator, then validate the answers by prompt.type
- * @param {number} step // The current step
- * @returns {object} // Joi object
- */
-const isValid = step => {
-    const schema = {}
-    const answeredThisStep = {}
-    props.form[step].forEach(prompt => {
-        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) 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[makeKey(prompt)] = prompt.id
-            })
-        })
-
-        const idWithResponseVal = Object.keys(answers).map(answerKey => {
-            return {
-                response_key_id: questiontoResponseKeyId[answerKey],
-                val: formatAnswer(
-                    getInputTypeFromKey(answerKey),
-                    answers[answerKey],
-                ),
-            }
-        })
-
-        const maxDistance = 100
-
-        if (!props.pid) return console.error(`no pid: ${props.pid}`)
-
-        saveSurveyByProfileId(idWithResponseVal, props.pid)
-        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 {
-        console.error(
-            `Cannot perform action: next() | on form step: ${state.step} of ${props.formSteps.length}`,
-        )
-    }
-}
-/**
- * Back a step in the form
- */
-const back = e => {
-    if (state.step > 1) {
-        state.step--
-    } else {
-        console.error(
-            `Cannot perform action: back() | on form step: ${state.step} of ${props.formSteps.length}`,
-        )
-    }
-}
-</script>
-
-<style lang="postcss">
-// prettier-ignore
-@import '@/sss/theme.sss'
-
-.form
-    color: $light
-    ul
-        list-style: none
-</style>

frontend/src/components/form/button-choice.vue

-<template lang="pug">
-.form--step.button-choice
-    header
-        p selections {{selected}} {{opts}}
-    main(:class="{ 'f-row': opts.length > 2, 'f-col': opts.length <= 2 }")
-        button(v-for="op in opts" :class="isSelected(op)" @mouseover="hoverOption(op)" @click="selectOption(op)") {{ op }}
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const emit = defineEmits(['selected', 'hovered'])
-
-const props = defineProps({
-    opts: {
-        required: true,
-        type: Array,
-        default: () => ['up', 'down'],
-        // default: () => ['up', 'left', 'right', 'down'],
-    },
-    prompt: {
-        required: true,
-        type: String,
-    },
-})
-
-const selected = ref([])
-
-const isSelected = val => {
-    return selected.value.includes(val) ? 'selected' : ''
-}
-
-const selectOption = optionVal => {
-    if (!selected.value.includes(optionVal)) {
-        selected.value.push(optionVal)
-    } else {
-        selected.value = selected.value.filter(val => val != optionVal)
-    }
-    const sel = {}
-    sel[props.prompt] = selected.value[0]
-    emit('selected', sel)
-}
-const hoverOption = optionVal => {
-    emit('hovered', props.prompt, optionVal)
-}
-</script>
-
-<style lang="postcss">
-// prettier-ignore
-@import '@/sss/theme.sss'
-
-.button-choice
-    color: white
-    main
-        flex-wrap: wrap
-        button
-            padding: 1em
-            border: 2px teal solid
-            border-radius: 4px
-            &.selected
-                border: 2px teal dotted
-</style>

frontend/src/components/form/button-multi.vue

-<template lang="pug">
-.form--step.button-multi
-    main(:class="{ 'f-row': opts.length > 2, 'f-col': opts.length <= 2 }")
-        button(v-for="op in opts" :class="isSelected(op)" @click="selectOption(op)" :disabled="selected.includes(op)") {{ op }}
-    button(@click="next") next
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const emit = defineEmits(['onButtonSelect'])
-
-const props = defineProps({
-    opts: {
-        required: true,
-        type: Array,
-        default: () => [
-            ['up', 'down'],
-            ['left', 'right'],
-        ],
-    },
-    prompt: {
-        required: true,
-        type: String
-    },
-})
-
-
-const selected = ref([])
-
-const isSelected = val => {
-    return selected.value.includes(val) ? 'selected' : ''
-}
-
-const selectOption = optionVal => {
-    if (!selected.value.includes(optionVal)) {
-        selected.value.push(optionVal)
-    } else {
-        selected.value = selected.value.filter(val => val != optionVal)
-    }
-}
-
-const next = () => {
-    const sel = {}
-    sel[props.prompt] = selected.value
-    emit('selected', sel)
-    selected.value = []
-}
-</script>
-
-<style lang="postcss">
-// prettier-ignore
-@import '@/sss/theme.sss'
-
-.button-multi
-    color: white
-.step
-    flex-wrap: wrap
-    display: none
-    &.selected
-        display: block
-    button
-        padding: 1em
-        border: 2px teal solid
-        border-radius: 4px
-        &.selected
-            border: 2px teal dotted
-</style>

frontend/src/components/form/input-string.vue

-<template lang="pug">
-.form--step.input-string
-    header
-        p input {{input}}
-    main.f-col
-        input(v-if="!multiline" v-model="input")
-        textarea(v-else cols="50" rows="8" v-model="input")
-        button(@click="selectOption").w-full next
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-const emit = defineEmits(['selected', 'input'])
-
-const props = defineProps({
-    default: {
-        required: false,
-        type: String,
-        default: () => 'Bob',
-    },
-    multiline: {
-        required: false,
-        type: Boolean,
-        default: true,
-    },
-    prompt: {
-        required: true,
-        type: String,
-    },
-})
-
-const input = ref(props.default)
-
-const selectOption = () => {
-    const sel = {}
-    sel[props.prompt] = input.value
-    emit('selected', sel)
-}
-watch(
-    () => input.value,
-    () => {
-        emit('input', props.prompt, input.value)
-    },
-)
-</script>
-
-<style lang="postcss">
-// prettier-ignore
-@import '@/sss/theme.sss'
-
-.input-string
-    color: white
-    main
-        flex-wrap: wrap
-        button
-            padding: 1em
-            border: 2px teal solid
-            border-radius: 4px
-            &.selected
-                border: 2px teal dotted
-</style>

frontend/src/router/guards.js

 
 
 const checkLoginStatus = (destination, nextCb) => {
-    console.warn('currentProfile logged in:', currentProfile.isLoggedIn())
-    console.warn('currentProfile completed:', currentProfile.isComplete())
+    console.warn(`profile: ${currentProfile.id.value} | login:${currentProfile.isLoggedIn} | completed: ${currentProfile.isComplete}`)
+    
     if (
         destination.meta.requiresCompleteProfile &&
-        !currentProfile.isLoggedIn() &&
-        !currentProfile.isComplete() 
+        !currentProfile.isLoggedIn &&
+        !currentProfile.isComplete 
     ) {
         nextCb('survey')
     } else if(
         destination.meta.requiresCompleteProfile &&
         destination.meta.requiresAuth &&
-        !currentProfile.isLoggedIn()
+        !currentProfile.isLoggedIn
     ) {
         nextCb('login')
     } else {

frontend/src/services/index.js

+export * from './user.service'
 export * from './profile.service'
 export * from './grouping.service'
 export * from './survey.service'

frontend/src/services/login.service.js

 /**
  * Logged in profile state manager
  * Sort of a util and service hybrid
- * @returns {array} profiles
  */
 class Login {
     constructor() {
         this.responses = []
         this.tags = []
     }
-    isLoading() {
+    get isLoading() {
         return this._loading
     }
-    isLoggedIn() {
+    /**
+     * Track login separate from complete-ess
+     * so a user can login but attached profile
+     * can forward to survey
+     * @returns {boolean}
+     */
+    get isLoggedIn() {
         return this.id.value != null
     }
-    isComplete() {
+    /**
+     * Combine questions retrieved from the database and
+     * questions defined in out lang file and 
+     * copare to responses stored
+     * @returns {boolean}
+     */
+    get isComplete() {
         return this.responses.length == surveyFactory.questionsFromDb.length && surveyFactory.questionsFromDb.length > 0
     }
-    hasResponses() {
+    /**
+     * Check that some responses are set
+     * @returns {boolean}
+     */
+    get hasResponses() {
         return this.responses.length && this.responses.length > 0
     } 
 
     /**
-     * Login a profile id
+     * Login a profile by id number
+     * @param {number} profileId
+     * @returns {number} stored reactive id
      */
-     async login(pid) {
-        this.id.value = parseInt(pid)
-        console.warn('logging in:', this.id.value)
+     async login(profileId) {
+        console.warn('logging in:', profileId)
+        this.id.value = parseInt(profileId)
         return this.id.value
     }
     logout() { this.id.value = null }
     
     async getTags() {
-        this.tags = []
-        return this.tags
+        try {
+            const tags = []
+            this.setTags(tags)
+        } catch (err) {
+            console.error(err)
+        }
     }
+    setTags(tags) { this.tags = tags }
 
     async getResponses() {
         try {
             const responseList = await fetchResponsesByProfileId(this.id)
-            this._setResponses(responseList)
+            this.setResponses(responseList)
         } catch (err) {
             console.error(err)
         }
     }
-    _setResponses(responses) { this.responses = responses }
+    setResponses(responses) { this.responses = responses }
 }
 
 const currentProfile = new Login()

frontend/src/services/profile.service.js

     return validProfileInstances
 }
 
+const createProfileForUserId = async (userId, responses) => {
+    const profile = await db.post(`/user/${userId}/profile`, responses)
+    return profile
+}
+
 const fetchProfileByProfileId = async profileId => {
     const profile = await db.get(`/profile/${profileId}`)
     return profile
 }
-export { fetchProfilesByUserId, fetchProfileByProfileId }
+
+export { fetchProfilesByUserId, fetchProfileByProfileId, createProfileForUserId }

frontend/src/services/survey.service.js

     })
 }
 
+// TODO: Remove
 const saveSurveyByProfileId = async (surveyResponses, profileId) => {
     surveyResponses.forEach(responseKeyIdwithVal => {
         const keyId = responseKeyIdwithVal.response_key_id
         const val = responseKeyIdwithVal.val
-
+        console.log(keyId, val)
         // POST
-        const myresponses = db.post(
-            `/profile/${profileId}/respond?response_key_id=${keyId}&val=${val}`,
-        )
-        return myresponses
+        // const myresponses = db.post(
+        //     `/profile/${profileId}/respond?response_key_id=${keyId}&val=${val}`,
+        // )
+        // return myresponses
     })
 }
 
         const keyId = responseKeyIdwithVal.response_key_id
         const val = responseKeyIdwithVal.val
         // PATCH
-        const myresponses = db.patch(`/profile/${profileId}/update/${keyId}`, [
+        db.patch(`/profile/${profileId}/update/${keyId}`, [
             {
                 response_id: 2,
                 profile_id: profileId,
     })
 }
 
-const scoreSurveyByProfileId = async (profileId, maxDistance) => {
+const scoreSurveyByProfileId = async (profileId, maxDistance = 99) => {
     const scoreSurvey = await db.get(
         `/profile/${profileId}/score?max_distance=${maxDistance}`,
     )

frontend/src/services/user.service.js

+import { db } from '../utils/db'
+
+/**
+ * Signup a new user
+ * @returns {User} instantiated User (see: /entites/user)
+ */
+const signupUser = async user => {
+    const payload = {
+        user_name: user.name,
+        user_email: user.email,
+        is_poster: user.seeking == 'position' ? 0 : 1
+    }
+    return await db.post(`/user/signup`, payload)
+}
+
+export { signupUser }

frontend/src/utils/index.js

 import { possible } from './lang'
 import { pidMixin, cardMixin } from './mixins'
 
+import { possibleZipcodes } from '../../../backend/db/data-generator/config.json'
+
 const api = new Connector('kittens')
 
 const validatorMapping = {
 
 const mixins = { pidMixin, cardMixin }
 
+
+const randomNumber = max => {
+    return Math.floor(Math.random() * max) < 1
+        ? 1
+        : Math.floor(Math.random() * max)
+}
+const randomValFrom = arr => arr[randomNumber(arr.length)]
+const randomEmail = (length = 5) => {
+    let chars =
+        'abcdefghijklmnopqrstuvwxyz-_abcdefghijklmnopqrstuvwxyz0123456789'
+    let str = ''
+    for (let i = 0; i < length + randomNumber(9); i++) {
+        str += chars.charAt(Math.floor(Math.random() * chars.length))
+    }
+    const suffixs = [
+        '@gmail.com',
+        '@aol.com',
+        '@yahoo.com',
+        '@apple.com',
+        '@hotmail.com',
+        '@rocket-mail.com',
+        '@mail.com',
+    ]
+    return str + randomValFrom(suffixs)
+}
+const randomName = (length = 4) => {
+    let chars = 'aeiouaeiouabcdefghijklmnoprstuvwyabcdefghijklmnopqrstuvwxyz'
+    let str = ''
+    for (let i = 0; i < length + randomNumber(9); i++) {
+        str += chars.charAt(Math.floor(Math.random() * chars.length))
+    }
+    return str
+}
+const randomMedia = () => {
+    const stockimg = [
+        'https://i.imgur.com/a4wirDS.png',
+        'https://i.imgur.com/F6GxGXG.jpeg',
+        'https://i.imgur.com/ekrkdNt.jpeg',
+        'https://i.imgur.com/VtMTfDg.jpeg',
+        'https://i.imgur.com/9Fwouqm.jpeg',
+        'https://i.imgur.com/rOjRCgo.jpeg',
+        'https://i.imgur.com/FwSdQww.jpeg',
+        'https://i.imgur.com/JjZyzXL.jpeg',
+        'https://i.imgur.com/1DsSQ1s.jpeg',
+    ]
+    return randomValFrom(stockimg)
+}
+
+const randomSurveyResponses = count => {
+    const surveyResponses = [
+        { id: null ,"idOrPrompt": "email", "val": `${randomEmail()}` },
+        { id: null ,"idOrPrompt": "name", "val": `john test-${count}` },
+        { id: 99 ,"idOrPrompt": 15, "val": randomValFrom(possible.usa.pronouns) },
+        { id: null ,"idOrPrompt": "seeking", "val": Math.random() > 0.2 ? possible.usa.seeking[0] : possible.usa.seeking[1] },
+        { id: 99 ,"idOrPrompt": 13, "val": randomValFrom(possible.usa.urgency) },
+        { id: null ,"idOrPrompt": "experience", "val": randomValFrom(possible.usa.experience) },
+        { id: 99 ,"idOrPrompt": 14, "val": "swe" },
+        { id: 99 ,"idOrPrompt": 10, "val": randomValFrom(possible.usa.duration) },
+        { id: 99 ,"idOrPrompt": 9, "val": randomValFrom(possible.usa.language) },
+        { id: 99 ,"idOrPrompt": 11, "val": randomValFrom(possible.usa.presence) },
+        { id: 99 ,"idOrPrompt": 7, "val": `${randomValFrom(possibleZipcodes)}` },
+        { id: 99 ,"idOrPrompt": 16, "val": `${randomNumber(55)}` },
+        { id: 99 ,"idOrPrompt": 12, "val": "this is a test of the survey signup" },
+        { id: 99 ,"idOrPrompt": 8, "val": randomMedia() },
+        { id: 99 ,"idOrPrompt": 1, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99 ,"idOrPrompt": 2, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99 ,"idOrPrompt": 3, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99 ,"idOrPrompt": 4, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99 ,"idOrPrompt": 5, "val": `${randomNumber(3) - randomNumber(3)}` },
+        { id: 99 ,"idOrPrompt": 6, "val": `${randomNumber(3) - randomNumber(3)}` }
+    ]
+    return surveyResponses
+}
+
 export { 
     api,
     validatorMapping,
     surveyFactory,
     makeKebob,
-    mixins
+    mixins,
+    randomSurveyResponses,
+    randomNumber,
+    randomValFrom,
+    randomMedia,
+    randomName,
+    randomEmail
 }

frontend/src/utils/lang.js

 const DELIMITER = '_'
 
-const stepToComponentMap = {
-    email: 'InputString',
-    name: 'InputString',
-    seeking: 'ButtonChoice',
-    urgency: 'ButtonChoice',
-    experience: 'ButtonChoice',
-    role: 'ButtonChoice',
-    duration: 'ButtonChoice',
-    presence: 'ButtonChoice',
-    language: 'ButtonMulti',
-    pronouns: 'ButtonMulti',
-    image: 'InputString',
-    zipcode: 'InputString',
-    blurb: 'InputString',
-    distance: 'InputRange',
-}
 // TODO: Combine these two
 const allSteps = {
     usa: {
     }
 }
 
-const allResponses = {
+const aspectResponses = {
     usa: {
-        questionaire: {
-            never: 'never',
-            rarely: 'rarely',
-            not_really: 'not really',
-            occasionally: 'occasionally',
-            mostly: 'mostly',
-            often: 'often',
-            everytime: 'everytime',
-        }
+        never: 'never',
+        rarely: 'rarely',
+        not_really: 'not really',
+        occasionally: 'occasionally',
+        mostly: 'mostly',
+        often: 'often',
+        everytime: 'everytime',
     }
 }
 
     blurb: []
 }
 
-export { allSteps, allResponses, stepToComponentMap, possible }
+export { allSteps, aspectResponses, possible }

frontend/src/views/LoginView.vue

              * Profile needs a complete survey and
              * alters the url if it's incomplete
              */
-            const alreadyLoggedIn = await currentProfile.isLoggedIn()
+            const alreadyLoggedIn = await currentProfile.isLoggedIn
             if(!alreadyLoggedIn) {
                 await currentProfile.login(this.form.profileId)
             }

frontend/src/views/SurveyView.vue

     article.match.w-full
         ul.w-full
             template(v-for="(q, i) in profileQuestions" :key="q.response_key_prompt")
-                li(v-if="step == i")
+                li(v-if="step == i + 1")
                     p {{q.response_key_category}}: 
                         span in db:
                         span(v-if="q.response_key_id") true - id:{{q.response_key_id}} | 
                             button(
                                 v-for="(res, index) in q.responses"
                                 :key="index"
-                                @click="profile[q.response_key_prompt] = res; step++"
-                                :disabled="profile[q.response_key_prompt] == res"
+                                @click="storeResponseLike(step, q.response_key_id, q.response_key_prompt, res); step++"
                             ).p-0 {{res}}
                         
                         //- Fill in the blank
                         div(v-else-if="q.response_key_category === 'profile'")
-                            input(v-model="profile[q.response_key_prompt]" @keyup.enter="step++") 
+                            input(@input="storeResponseLike(step, q.response_key_id, q.response_key_prompt, profile[q.response_key_prompt])" v-model="profile[q.response_key_prompt]" @keyup.enter="step++") 
                             label >{{ profile[q.response_key_prompt]}}
                         
-                        //- Questionaire
+                        //- Aspects
                         div(v-else).f-col
-                            input(type="range" min="-3" max="3" list="ticks" v-model="questionaire[q.response_key_category]").w-full
-                            label {{ questionaireResponses[parseInt(questionaire[q.response_key_category]) + 3] }} 
-                    nav.f-row
-                        button(:disabled="step == 0" @click="step--") back
-                        p {{step + 1}} of {{profileQuestions.length}}
-                        button(@click="step++") next
-                
+                            input(type="range" min="-3" max="3" list="ticks" @input="storeResponseLike(step, q.response_key_id, q.response_key_prompt, aspects[q.response_key_category])" v-model="aspects[q.response_key_category]").w-full
+                            label {{ aspectResponses[parseInt(aspects[q.response_key_category]) + 3] }} 
+                    
+                        nav.f-row
+                            button(:disabled="step == 0" @click="step--") back
+                            p {{step}} of {{profile.length}}
+                            button(
+                                v-if="(q.response_key_category === 'profile')"
+                                @click="storeResponseLike(step, q.response_key_id, q.response_key_prompt, profile[q.response_key_prompt]); step++"
+                            ) next
+                            button(
+                                v-else
+                                @click="storeResponseLike(step, q.response_key_id, q.response_key_prompt, aspects[q.response_key_category]); step++"
+                            ) next
+                    
             //- Confirmation
-            li(v-if="step == profileQuestions.length")
+            li(v-if="step == profileQuestions.length + 1")
                 p Does this look correct?
                 h4 {{ profile }}
-                h4 {{questionaire}}
+                h4 {{aspects}}
                 nav.f-row
                     button(@click="step--") back
-                    p(@click="step = 0").p-1 start over
-                    button(@click="$router.push({ name: 'HomeView' })") save
-
+                    p(@click="step = 1").p-1 start over
+                    button(@click="onSave") save
+                    //- button(@click="$router.push({ name: 'HomeView' })") save
+    footer
+        button(@click="bypass") +30 user profiles
 </template>
 
 <script>
-import { surveyFactory } from '@/utils'
-import { allSteps, allResponses, possible, stepToComponentMap } from '@/utils/lang'
-import { currentProfile } from '@/services'
+import { surveyFactory, randomSurveyResponses } from '@/utils'
+import { allSteps, aspectResponses, possible } from '@/utils/lang'
 
-import SurveyForm from '@/components/form.vue'
-import ButtonMulti from '@/components/form/button-multi.vue'
-import ButtonChoice from '@/components/form/button-choice.vue'
-import InputString from '@/components/form/input-string.vue'
+import { currentProfile, createProfileForUserId, fetchProfileByProfileId, scoreSurveyByProfileId, signupUser } from '@/services'
+
+import { maxDistanceKey } from '../../../backend/db/data-generator/config.json'
 
 export default {
-    components: { SurveyForm, ButtonMulti, ButtonChoice, InputString },
     props: {
         pid: {
             type: Number,
     },
     data() {
         return {
+            bypassCount: 0,
             validSurvey: null,
-            componentMap: stepToComponentMap,
-            slideDuration: 1200,
-            step: 0,
-            profile: {
-                email: '',
-                name: '',
-                seeking: '',
-                urgency: '',
-                experience: '',
-                role: '',
-                duration: '',
-                distance: '',
-                position: '',
-                language: '',
-                pronouns: '',
-                zipcode: '',
-                image: '',
-                blurb: ''
-            },
-            questionaire: {
+            step: 1,
+            responseLikes: {},
+            profile: {},
+            aspects: {
                 grit: 0,
                 openness: 0,
                 bravery: 0,
                 honesty: 0,
                 respect: 0,
             },
-            questionaireResponses: Object.values(allResponses.usa.questionaire)
+            aspectResponses: Object.values(aspectResponses.usa)
         }
     },
     computed: {
         )
     },
     methods: {
+        // Just for testing quicker
+        bypass() {
+            const n = 30
+            const toGen = [...Array(n).keys()]
+            toGen.forEach(async () => {
+                const randRes = randomSurveyResponses(this.bypassCount)
+                randRes.forEach((tr, i) => {
+                    this.storeResponseLike(i, tr.idOrPrompt, tr.idOrPrompt, tr.val)
+                })
+                this.bypassCount++
+                await this.onSave()
+            })
+            this.step = 21
+            console.warn(`Auto-filling survey ${n} times...`)
+        },
+        storeResponseLike(step, id, prompt, val) {
+            // Also update the form model state for now
+            // We probably can refactor this out
+            this.profile[prompt] = val
+            
+            /**
+             * If NO response id is present, that means the answer
+             * is required and associated with a User and NOT a Profile
+             **/
+            this.responseLikes[`step-${step}`] = {
+                idOrPrompt: id ? id : prompt,
+                val: val.toString()
+            }
+        },
+        _formatIntoResponses(survey) {
+            return survey.map(resLike => {
+                resLike.response_key_id = resLike.idOrPrompt
+                delete resLike.idOrPrompt
+                return resLike
+            })
+        },
         /**
-         * Set state from promptVal key:value object
-         * from button-coice or button-multi
+         * Survey responses have User information
+         * mixed in with scoring information so we 
+         * need to separate them
+         * @param {array} responseLikes answered by the survey
          */
-        onButtonSelect(promptVal) {
-            for (const [prompt, val] of Object.entries(promptVal)) {
-                this[prompt] = val
-                if (prompt == 'seeking') {
-                    this.validSurvey.setRoleResponses(val)
+        _separateUserInfoFromResponses(responseLikes) {
+            let survey = []
+            const user = {}
+            responseLikes.forEach(resLike => {
+                if(resLike.idOrPrompt && Number.isFinite(parseInt(resLike.idOrPrompt))) {
+                    survey.push(resLike)
+                } else {
+                    user[resLike.idOrPrompt] = resLike.val
                 }
+            })
+            return [user, this._formatIntoResponses(survey)]
+        },
+        async _createUserProfileRel(user, survey) {
+            /** A User is required before creating a profile */
+            const createdUser = await signupUser(user)
+            if(!createdUser) return
+
+            const userProfileRel = await createProfileForUserId(createdUser.user_id, survey)
+            if(!userProfileRel) return 
+
+            return userProfileRel
+        },
+        async _getProfileWithScore(createdProfileId, maxDistance) {
+            /** A Profile is associated with n:1 user and referenced by profile id */
+            const fetchedProfile = await fetchProfileByProfileId(createdProfileId)
+            if(!fetchedProfile) {
+                console.error(`Could not fetch Profile ${createdProfileId}. Please check that a User and Profile were created.`)
+                return
+            }
+
+            /** Use profile answers to compare against other profile answers */
+            const scored = await scoreSurveyByProfileId(createdProfileId, maxDistance)
+            if(!scored) {
+                console.error(`Could not score Profile ${createdProfileId}.`)
+                return
             }
-            this.step++
+            return fetchedProfile
         },
-        onInputChange(prompt, val) {
-            this[prompt] = val
+        async _setLoginForProfile(profile) {
+            const currentId = currentProfile.login(profile.profile_id)
+            if(currentId && profile.responses.length) {
+                // Stores responses without fetching again
+                currentProfile.setResponses(profile.responses)
+            }
+            if(!currentProfile.isComplete) {
+                console.error(`Profile ${currentProfile.id} is incomplete. Please make sure all survey questions have been answered.`)
+                return
+            }
+        },
+        async onSave() {
+            const [ user, survey] = this._separateUserInfoFromResponses(Object.values(this.responseLikes))
+            const maxDistanceRes = survey.find(res => res.response_key_id == maxDistanceKey)
+
+            /**
+             * Creating a profile only returns the created
+             * user id and profile id
+             **/
+            const userProfileRel = await this._createUserProfileRel(user, survey)
+            const createdProfileId = userProfileRel.profile_id
+
+            /** A Profile is associated with n:1 user and referenced by profile id */
+            const fetchedProfile = await this._getProfileWithScore(createdProfileId, maxDistanceRes.val)
+            
+            /** 
+             * Login only after there is a user and
+             * that user has a profile and all responses
+            */
+            this._setLoginForProfile(fetchedProfile)
+            
+            this.$router.push({ name: 'HomeView' })
         },
         back(prompt) {
             this[prompt] = ''