:recycle: intermediary refactor for demonstration of cleaning up data-structures

frontend/src/components/onboarding/AccountType.vue

 <template lang="pug">
-h3 {{question}}
-//- w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
-w-button.ma1.grow(@click="handleSubmit('Recruiter')") CANDIDATES
-w-button.ma1.grow(@click="handleSubmit('Jobseeker')") JOBS
+.account-typpe
+    h3 {{ question }}
+    //- w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") CANDIDATES
+    w-button.ma1.grow(@click='handleSubmit("Recruiter")') CANDIDATES
+    w-button.ma1.grow(@click='handleSubmit("Jobseeker")') JOBS
 </template>
 <script>
 export default {
     name: 'AccountType',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
+        aspectQuestions: {
+            required: false,
+        },
     },
     emits: ['go-to-step', 'update-answers'],
     data: () => ({
-        question: "{Name}, let's get started on your profile while we verify your account.",
+        question:
+            "{Name}, let's get started on your profile while we verify your account.",
     }),
     methods: {
-        handleSubmit(accountType){
+        handleSubmit(accountType) {
             let payload = {
                 key: 'AccountType',
                 question: this.question,
-                answer: accountType
+                answer: accountType,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/Aspects.vue

 <template lang="pug">
-form(@submit.prevent="this.$emit('handle-submit')").questionnaire
-    QuestionResponse(
-        v-for="question in aspectQuestions" 
-        :question="question" 
-        @updated="updateRadio"
-    )
-    w-button.ma1.grow(type="submit" bg-color="success")
-        w-icon.mr1 wi-check
-        | SUBMIT ANSWERS
+.aspects
+    form.questionnaire(@submit.prevent='this.$emit("handle-submit")')
+        QuestionResponse(
+            :question='question'
+            @updated='updateRadio'
+            v-for='question in aspectQuestions'
+        )
+        w-button.ma1.grow(bg-color='success' type='submit')
+            w-icon.mr1 wi-check
+            | SUBMIT ANSWERS
 </template>
 <script>
 import QuestionResponse from './QuestionResponse.vue'
+const answered = {}
 
 export default {
     name: 'Aspects',
     components: {
-        QuestionResponse
+        QuestionResponse,
     },
     props: {
-        aspectQuestions:{
+        aspectQuestions: {
             required: true,
-            type: Array
+            type: Array,
         },
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     emits: ['handle-submit', 'update-answers'],
     methods: {
-        updateRadio(newRadioSelection){
-            let old_answers = this.aspectQuestions.map(q=> q.answer)
-            console.log(old_answers)
-            console.log(newRadioSelection)
-            let new_answers = [...old_answers]
-            new_answers[newRadioSelection.id-1] = newRadioSelection.answer
-            console.log(new_answers)
-            // let payload = {
-            //     key: 'Aspects',
-            //     question: '?',
-            //     answer: new_answers
-            // }
-            // this.$emit('update-answers', payload)
-            // console.log(JSON.stringify(payload));
-        }
-    }
+        updateRadio(onRadioSelect) {
+            answered[onRadioSelect.id] = onRadioSelect.answer
+            this.$emit('update-answers', {
+                key: 'Aspects',
+                question: '?',
+                answer: answered,
+            })
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/CompanyID.vue

 <template lang="pug">
-h3 Company ID
-p {{question}}
-input(type="text" placeholder="Get this from your admin." v-model="companyID")
-w-button.ma1.grow(@click="handleSubmit") NEXT
+.company-id
+    h3 Company ID
+    p {{ question }}
+    input(
+        placeholder='Get this from your admin.'
+        type='text'
+        v-model='companyID'
+    )
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
 export default {
     name: 'CompanyID',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     emits: ['go-to-step', 'update-answers'],
     data: () => ({
-        companyID: null, 
+        companyID: null,
         question: 'PLEASE ENTER YOUR COMPANY ID#:',
     }),
     methods: {
-        handleSubmit(){
+        handleSubmit() {
             let payload = {
                 key: 'CompanyID',
                 question: this.question,
-                answer: this.companyID
+                answer: this.companyID,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/Interests.vue

 <template lang="pug">
-h3 Interests
-p {{question}}
-DynamicTagList(:tags="interests" :placeholder="'interest'")
-w-button.ma1.grow(@click="handleSubmit") NEXT
+.interests
+    h3 Interests
+    p {{ question }}
+    DynamicTagList(:placeholder='"interest"' :tags='interests')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
+
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Interests',
-    components:{
-        DynamicTagList
+    components: {
+        DynamicTagList,
     },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     emits: ['go-to-step', 'update-answers'],
     data: () => ({
         interests: [],
-        question: 'What are some interests you would like in your next candidates?'
+        question:
+            'What are some interests you would like in your next candidates?',
     }),
     methods: {
-        handleSubmit(){
+        handleSubmit() {
             let payload = {
                 key: 'Interests',
                 question: this.question,
-                answer: this.interests
+                answer: this.interests,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/LicensesAndCertifications.vue

 <template lang="pug">
-h3 Licenses & Certifications
-p {{question}}
-DynamicTagList(:tags="licensesAndCertifications" :placeholder="'requirement'")
-w-button.ma1.grow(@click="handleSubmit") NEXT
+.licenses-certifications
+    h3 Licenses &amp; Certifications
+    p {{ question }}
+    DynamicTagList(
+        :placeholder='"requirement"'
+        :tags='licensesAndCertifications'
+    )
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'LicensesAndCertifications',
-    components:{
-        DynamicTagList
+    components: {
+        DynamicTagList,
     },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     emits: ['go-to-step', 'update-answers'],
     data: () => ({
         licensesAndCertifications: [],
-        question: 'Are there any licenses and certification requirements?'
+        question: 'Are there any licenses and certification requirements?',
     }),
     methods: {
-        handleSubmit(){
+        handleSubmit() {
             let payload = {
                 key: 'LicensesAndCertifications',
                 question: this.question,
-                answer: this.licensesAndCertifications
+                answer: this.licensesAndCertifications,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/Location.vue

 <template lang="pug">
-h3 Location
-p {{question}}
-DynamicTagList(:tags="locations" :placeholder="'location'")
-w-button.ma1.grow(@click="handleSubmit") NEXT
+.location
+    h3 Location
+    p {{ question }}
+    DynamicTagList(:placeholder='"location"' :tags='locations')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Location',
-    components:{
-        DynamicTagList
+    components: {
+        DynamicTagList,
     },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     emits: ['go-to-step', 'update-answers'],
     data: () => ({
         locations: [],
-        question: 'Where would you like to select your candidates from?'
+        question: 'Where would you like to select your candidates from?',
     }),
     methods: {
-        handleSubmit(){
+        handleSubmit() {
             let payload = {
                 key: 'Location',
                 question: this.question,
-                answer: this.locations
+                answer: this.locations,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/Role.vue

 <template lang="pug">
-h3 ACTIVELY SEARCHING
-p {{question}}
-w-select.mt4(
-    v-model="selectedRole"
-    :items="items"
-    placeholder="i am")
-w-button.ma1.grow(@click="handleSubmit") NEXT
+.role
+    h3 ACTIVELY SEARCHING
+    p {{ question }}
+    w-select.mt4(:items='items' placeholder='i am' v-model='selectedRole')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
+
 <script>
 export default {
     name: 'Role',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     data: () => ({
-        items: [{label: 'RECRUITER'},{label: 'HIRING MANAGER'}],
+        items: [{ label: 'RECRUITER' }, { label: 'HIRING MANAGER' }],
         question: 'What is your role at your company?',
         selectedRole: null,
     }),
     methods: {
-        handleSubmit(){
-            if(!this.selectedRole) {
+        handleSubmit() {
+            if (!this.selectedRole) {
                 console.warn('Please select a role.')
                 return
-            } 
+            }
             let payload = {
                 key: 'Role',
                 question: this.question,
-                answer: this.selectedRole
+                answer: this.selectedRole,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/Skills.vue

 <template lang="pug">
-h3 RECRUITER
-p {{question}}
-DynamicTagList(:tags="skills" :placeholder="'skill'")
-w-button.ma1.grow(@click="handleSubmit") NEXT
+.skills
+    h3 RECRUITER
+    p {{ question }}
+    DynamicTagList(:placeholder='"skill"' :tags='skills')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
 </template>
 <script>
 import DynamicTagList from '../DynamicTagList.vue'
 export default {
     name: 'Skills',
-    components:{
-        DynamicTagList
+    components: {
+        DynamicTagList,
     },
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     emits: ['go-to-step', 'update-answers'],
     data: () => ({
         question: 'What are some skills you are looking for at your company?',
-        skills: []
+        skills: [],
     }),
     methods: {
-        handleSubmit(){
+        handleSubmit() {
             let payload = {
                 key: 'Skills',
                 question: this.question,
-                answer: this.skills
+                answer: this.skills,
             }
             this.$emit('update-answers', payload)
             this.$emit('go-to-step', this.currentStep + 1)
-        }
-    }
+        },
+    },
 }
-</script>
+</script>

frontend/src/components/onboarding/Splash.vue

 <template lang="pug">
-.splash-icon(style="width:347px; height:347px; background-color: red;")
-div(style="text-align:center;")
-    w-button.ma1.grow(@click="this.$emit('go-to-step', currentStep + 1)") GET STARTED
+.splash
+    .splash--icon(style='width: 347px; height: 347px; background-color: red')
+    div(style='text-align: center')
+        w-button.ma1.grow(@click='this.$emit("go-to-step", currentStep + 1)') GET STARTED
 </template>
+
 <script>
 export default {
     name: 'Splash',
     props: {
-        currentStep:{
+        currentStep: {
             required: true,
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
 }
-</script>
+</script>

frontend/src/utils/onboardingStepComponents.js

-const OnboardingStepComponents = [
-    {
-        id: 0,
-        component:'Splash',
-    },
-    {
-        id: 1,
-        component:'AccountType',
-    },
-    {
-        id: 2,
-        component:'CompanyID',
-    },
-    {
-        id: 3,
-        component:'Role',
-    },
-    {
-        id: 4,
-        component:'Skills',
-    },
-    {
-        id: 5,
-        component:'Location',
-    },
-    {
-        id: 6,
-        component:'Interests',
-    },
-    {
-        id: 7,
-        component:'LicensesAndCertifications',
-    },
-    {
-        id: 8,
-        component:'Aspects',
-    }
-]
-export default OnboardingStepComponents

frontend/src/views/OnboardingView.vue

 main.view--onboarding
     article(style='display: flex; flex-direction: column; align-items: center')
         component(
-            :aspectQuestions='onboardingStep.component == "Aspects" ? aspectQuestions : null'
-            :currentStep='currentStep'
-            :is='onboardingStep.component'
+            :aspect-questions='steps[currentStep] == "Aspects" ? aspectQuestions : null'
+            :current-step='currentStep'
+            :is='steps[currentStep]'
             @go-to-step='goToStep'
-            @handle-submit="onSubmit"
-            @update-answers="updateAnswers"
+            @handle-submit='onSubmit'
+            @update-answers='updateAnswers'
         )
 </template>
 
 import { surveyFactory } from '@/utils'
 import { allSteps, possible } from '@/utils/lang'
 import stepViews from '@/components/onboarding'
-import OnboardingStepComponents from '../utils/onboardingStepComponents'
 
-const SCORED = [1, 2, 3, 4, 5, 6] 
+const SCORED = [1, 2, 3, 4, 5, 6]
+
 const _isScored = id => SCORED.includes(id)
 
 const _makeCategoryFriendly = responseCategory => {
         answered: {},
         aspectQuestions: [],
         currentStep: 0,
-        onboardingStepComponents: [],
-        validSurvey: null,
+        steps: [
+            'Splash',
+            'AccountType',
+            'CompanyID',
+            'Role',
+            'Skills',
+            'Location',
+            'Interests',
+            'LicensesAndCertifications',
+            'Aspects',
+        ],
     }),
-    computed: {
-        onboardingStep() {
-            if (!this.onboardingStepComponents.length) return []
-            return this.onboardingStepComponents[this.currentStep]
-        },
-    },
     async created() {
         const survey = await surveyFactory.createSurvey(
             allSteps['usa'],
             possible['usa']['roles'],
         )
         this.aspectQuestions = _formatAspectQuestions(survey.steps)
-        this.onboardingStepComponents = OnboardingStepComponents
     },
     methods: {
         onSubmit() {
             console.log(JSON.stringify(this.answered))
-            // Object.values(this.answered).forEach(ans =>
-            //     console.log(ans.question, ans.answer),
-            // )
         },
         goToStep(num) {
             this.currentStep = num
         },
-        updateAnswers(payload){
+        updateAnswers(payload) {
             this.answered[payload.key] = payload.answer
-            console.log(`Updated answers: ${JSON.stringify(this.answered)}`);
-        }
+        },
     },
 }
 </script>