:recycle: Refactor of survey steps logic with J

frontend/src/components/onboarding/Aspects.vue

-<template lang="pug">
-p {{ aspectQuestions }}
-//- form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
-
-//- p(v-for='question in aspectQuestions')
-//-     QuestionResponse(
-//-         :question='question'
-//-         @updated='updateRadio'
-//-         @updateIsAnswered='updateIsAnswered'
-//-         @update-all='updateAll'
-//-         v-if='question.isBeingAnswered'
-//-     )
-</template>
-
-<script>
-import QuestionResponse from './QuestionResponse.vue'
-import { aspectsArr } from '../../utils/lang.js'
-
-export default {
-    name: 'Aspects',
-    components: {
-        QuestionResponse,
-    },
-    props: {
-        aspectQuestions: {
-            required: true,
-            type: Array,
-        },
-    },
-    emits: ['handle-submit', 'update-answers'],
-    data: () => ({
-        answered: [],
-    }),
-    async created() {
-        this.aspectQuestions.forEach((q, i) => {
-            console.log(`Aspect #${i}: ${JSON.stringify(q)}`)
-            q.isBeingAnswered = i === 0 ? true : false
-        })
-        aspectsArr.forEach(() => {
-            this.answered.push(null)
-        })
-    },
-    methods: {
-        updateAll() {
-            this.$emit('handle-submit')
-        },
-        updateRadio(onRadioSelect) {
-            this.answered[onRadioSelect.id - 1] = onRadioSelect.answer
-            this.$emit('update-answers', {
-                key: 'Aspects',
-                question: {
-                    survey_stage: 'aspects',
-                },
-                input: this.answered,
-            })
-        },
-        updateIsAnswered(id) {
-            this.aspectQuestions.forEach((q, i) => {
-                if (i === id - 1) {
-                    const nextQ = this.aspectQuestions[id]
-                    q.isBeingAnswered = false
-                    nextQ.isBeingAnswered = true
-                }
-            })
-        },
-    },
-}
-</script>

frontend/src/components/onboarding/index.js

 import Location from './Location.vue'
 import Interests from './Interests.vue'
 import LicensesAndCertifications from './LicensesAndCertifications.vue'
-import Aspects from './Aspects.vue'
 import FormInput from './FormInput.vue'
 import FormTags from './FormTags.vue'
 import FormDropdown from './FormDropdown.vue'
     Location,
     Interests,
     LicensesAndCertifications,
-    Aspects,
     FormDropdown,
     FormTags,
     FormInput,

frontend/src/utils/lang.js

     invalidInputPrompt: null,
 }
 
-// Order of surveyStages is strongly correlated with order of response_keys 
-// in backend's mock.js
-const surveyStages = [
-    'aspect-1',
-    'aspect-2',
-    'aspect-3',
-    'aspect-4',
-    'aspect-5',
-    'aspect-6',
-    'name',
-    'email',
-    'password',
-    'zipcode',
-    'seeking',
-    'image',
-    'language',
-    'duration',
-    'presence',
-    'blurb',
-    'urgency',
-    'pronouns',
-    'distance'
-]
-
 // Easily reorder steps of survey here:
 const allSteps = {
     usa: {
         // roles: 'role',
     },
 }
+const surveyStages = {
+    7: allSteps.usa.name,
+    8: allSteps.usa.email,
+    9: allSteps.usa.password,
+    10: allSteps.usa.zipcode,
+    11: allSteps.usa.seeking,
+    12: allSteps.usa.image,
+    13: allSteps.usa.language,
+    14: allSteps.usa.duration,
+    15: allSteps.usa.presence,
+    16: allSteps.usa.blurb,
+    17: allSteps.usa.urgency,
+    18: allSteps.usa.pronouns,
+    19: allSteps.usa.distance,
+    1: allSteps.usa.aspect01,
+    2: allSteps.usa.aspect02,
+    3: allSteps.usa.aspect03,
+    4: allSteps.usa.aspect04,
+    5: allSteps.usa.aspect05,
+    6: allSteps.usa.aspect06,
+}
 
 const aspectResponses = {
     usa: {
     // key 10
     duration: ['full-time', 'part-time', 'contract', 'flexible'],
     // Experience and roles concat, key: 14
-//     experience: ['associate', 'junior', 'mid-level', 'senior', 'staff'],
+    //     experience: ['associate', 'junior', 'mid-level', 'senior', 'staff'],
     // roles: {
-        // type: [
-            // 'back-end',
-            // 'database',
-            // 'front-end',
-            // 'full-stack',
-            // 'qa',
-            // 'security',
-            // 'system',
-            // 'test',
-        // ],
-        // position: [
-            // 'administrator',
-            // 'analyst',
-            // 'architect',
-            // 'developer',
-            // 'engineer',
-            // 'manager',
-            // 'technician',
-        // ],
-        // candidate: ['hiring_manager', 'recruiter'],
+    // type: [
+    // 'back-end',
+    // 'database',
+    // 'front-end',
+    // 'full-stack',
+    // 'qa',
+    // 'security',
+    // 'system',
+    // 'test',
+    // ],
+    // position: [
+    // 'administrator',
+    // 'analyst',
+    // 'architect',
+    // 'developer',
+    // 'engineer',
+    // 'manager',
+    // 'technician',
+    // ],
+    // candidate: ['hiring_manager', 'recruiter'],
     // },
     pronouns: ['she/her', 'she/they', 'he/him', 'he/they', 'they/them'],
-//    role: ['role1', 'role2'],
+    //    role: ['role1', 'role2'],
     image: [],
     zipcode: [],
     blurb: [],
 }
 
-export {
-    allSteps,
-    splash,
-    surveyStages,
-    aspectResponses,
-    aspectsArr,
-    possible,
-}
+export { allSteps, splash, surveyStages, aspectResponses, aspectsArr, possible }

frontend/src/utils/survey.js

     constructor() {
         this.questionsFromDb = []
     }
-    _addSurveyStages(responseKeys, surveyStages) {
-        responseKeys.forEach((key, i) => {
-            key.survey_stage = surveyStages[i]
-        })
-        return responseKeys
-    }
-    _addResponses(responseKeys, responsesByCategory) {
-        Object.keys(responsesByCategory).forEach(k => {
-            responseKeys.forEach(key => {
-                if (key.survey_stage === k) {
-                    key.responses = responsesByCategory[k]
+    _addResponses(responseKeys, possibleResponsesByCategory) {
+        console.log('possibleResponsesByCategory >>', possibleResponsesByCategory)
+        Object.keys(possibleResponsesByCategory).forEach(categoryKey => {
+            console.log('categoryKey >>', categoryKey)
+            responseKeys.forEach(responseKey => {
+                if (possibleResponsesByCategory[categoryKey].length) {
+                    responseKey.responses = possibleResponsesByCategory[categoryKey]
                 }
             })
         })
         })
         return responseKeys
     }
+    // TODO: Don't nest the for loop...
     _sortSurveySteps(mutatedResponseKeys, allSteps) {
         const reordered = [] 
-        Object.values(allSteps).forEach((step, i) => {
+        Object.values(allSteps).forEach(step => {
             Object.values(mutatedResponseKeys).forEach(val => {
-                if (val.survey_stage === step) {
-                    reordered[i] = val
+                if (surveyStages[val.response_key_id] === step)  {
+                    val.survey_stage = step
+                    reordered.push(val)
                 }
             })
         })
     _setSteps() {
         const responseKeys = this.questionsFromDb
         const responsesByCategory = possible['usa']
-        let mutatedResponseKeys = this._addSurveyStages(responseKeys, surveyStages)
-        mutatedResponseKeys = this._addResponses(responseKeys, responsesByCategory)
+        let mutatedResponseKeys = this._addResponses(responseKeys, responsesByCategory)
         mutatedResponseKeys = this._addComponents(responseKeys)
         mutatedResponseKeys = this._sortSurveySteps(mutatedResponseKeys, allSteps['usa'])
         // Splash page is placed at beginning of survey
         mutatedResponseKeys.unshift(splash)
+        console.log('mutatedResponseKeys >>', mutatedResponseKeys)
         return mutatedResponseKeys
     }
     async getQuestions() {