:recycle: refactor components into more reusable pieces | map components to step types by prompt

frontend/src/components/onboarding/FormDropdown.vue

@@ -0,0 +1,41 @@
+<template lang="pug">
+.role
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    w-select.mt4(:items='items' placeholder='i am' v-model='selection')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+
+<script>
+export default {
+    name: 'FormDropdown',
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        selection: null,
+    }),
+    computed: {
+        items() {
+            return this.question.responses.map(res => ({ label: res }))
+        },
+    },
+    methods: {
+        handleSubmit() {
+            if (!this.selection) {
+                console.warn('Please select a role.')
+                return
+            }
+            let payload = {
+                question: this.question,
+                answer: this.selection,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormInput.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+.form-input
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    input(placeholder='i am a little teapot' type='text' v-model='input')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+<script>
+export default {
+    name: 'FormInput',
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        input: null,
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                question: this.question,
+                answer: this.input,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/FormTags.vue

@@ -0,0 +1,36 @@
+<template lang="pug">
+.form-tags
+    h3 {{ question.response_key_category }}
+    p {{ question.response_key_prompt }}
+    DynamicTagList(:placeholder='"a tag"' :tags='tags')
+    w-button.ma1.grow(@click='handleSubmit') NEXT
+</template>
+<script>
+import DynamicTagList from '../DynamicTagList.vue'
+
+export default {
+    name: 'FormTags',
+    components: {
+        DynamicTagList,
+    },
+    props: {
+        question: {
+            required: true,
+            type: Object,
+        },
+    },
+    emits: ['update-answers'],
+    data: () => ({
+        tags: [],
+    }),
+    methods: {
+        handleSubmit() {
+            let payload = {
+                question: this.question,
+                answer: this.tags,
+            }
+            this.$emit('update-answers', payload)
+        },
+    },
+}
+</script>

frontend/src/components/onboarding/index.js

@@ -7,6 +7,9 @@ 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'
 
 export default {
     Splash,
@@ -18,4 +21,7 @@ export default {
     Interests,
     LicensesAndCertifications,
     Aspects,
-}
+    FormDropdown,
+    FormTags,
+    FormInput,
+}

frontend/src/entities/survey/survey.js

@@ -2,24 +2,41 @@
 import { _baseRecord } from '../index.js'
 import { surveySchema } from './survey.schema.js'
 
+const SCORED = [1, 2, 3, 4, 5, 6]
+const _isScored = id => SCORED.includes(id)
+const _makeCategoryFriendly = responseCategory => {
+    const labels = responseCategory.split('_vs_')
+    labels.forEach((a, i) => {
+        if (a.indexOf('_') == -1) return
+        labels[i] = a.split('_').join(' ')
+    })
+    return labels
+}
+const _formatAspectQuestions = steps => {
+    return steps
+        .map(q => {
+            if (!_isScored(q.response_key_id)) return null
+            return {
+                id: q.response_key_id,
+                question: q.response_key_prompt,
+                labels: _makeCategoryFriendly(q.response_key_category),
+                answer: null,
+            }
+        })
+        .filter(step => step != null)
+}
+
 class Survey extends _baseRecord {
-    constructor(questionSteps, roles) {
+    constructor(questionSteps) {
         super()
 
         this.type = this.constructor.name.toLowerCase()
 
         /**  Fields */
         this.steps = [...questionSteps] // ! required
-        this.roleTree = roles
-
-        return this
-    }
-    setRoleResponses(position) {
-        const roleStep = this.steps.filter(
-            step => step.response_key_prompt == 'role',
-        )[0]
-        roleStep.responses = this.roleTree[position]
+        this.aspectQuestions = _formatAspectQuestions(this.steps)
     }
+
     isValid() {
         const validate = surveySchema.validate(this)
 

frontend/src/utils/index.js

@@ -41,7 +41,7 @@ const makeKebob = input => {
     return input.toLowerCase().split(' ').join('-')
 }
 
-const surveyFactory = new SurveyFactory(possible['usa'])
+const surveyFactory = new SurveyFactory()
 
 const mixins = { pidMixin, profileMixin }
 

frontend/src/utils/lang.js

@@ -37,17 +37,7 @@ possible.usa = {
     email: [],
     name: [],
     seeking: ['position', 'candidate'],
-    language: [
-        'javascript',
-        'python',
-        'c#',
-        'c++',
-        'go',
-        'java',
-        'ruby',
-        'html',
-        'css',
-    ],
+    language: ['english', 'spanish'],
     // key 13
     urgency: [
         'actively_looking',

frontend/src/utils/survey.js

@@ -1,9 +1,52 @@
 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
+import { possible } from './lang.js'
+
+const promptToComponent = {
+    email: 'FormInput',
+    name: 'FormInput',
+    seeking: 'FormDropdown',
+    urgency: 'FormDropdown',
+    presence: 'FormDropdown',
+    duration: 'FormDropdown',
+    experience: 'FormTags',
+    pronouns: 'FormDropdown',
+    language: 'FormDropdown',
+    image: 'FormInput',
+    distance: 'FormInput',
+    zipcode: 'FormInput',
+    blurb: 'FormInput',
+}
+/**
+ * Make a step from match or step information
+ * @param {object} match
+ * @param {object} step
+ * @returns something like a response_key with possible responses
+ */
+const formatStep = (match, step) => {
+    const responsesByCategory = possible['usa']
+    const responseKey = {
+        response_key_id: match ? match.response_key_id : null,
+        response_key_category: match ? match.response_key_category : 'profile',
+        response_key_prompt: match ? match.response_key_prompt : step,
+        response_key_description: match ? match.response_key_description : null,
+    }
+    return {
+        ...responseKey,
+        responses: responsesByCategory[step] ? responsesByCategory[step] : [],
+    }
+}
+const associateWithComponent = responseKeyLike => {
+    let component = promptToComponent[responseKeyLike.response_key_prompt]
+    return { ...responseKeyLike, component }
+}
+
+const hasMatch = (step, inArray) => {
+    return inArray.find(q => q.response_key_prompt == step)
+}
 
 class SurveyFactory {
-    constructor(responses) {
-        this.responsesByCategory = responses
+    constructor() {
         this.questionsFromDb = []
     }
     _setSteps(langFile) {
@@ -11,25 +54,14 @@ class SurveyFactory {
         const seenIds = []
         const stepsInCommon = stepsToProcess.map(step => {
             // Match question to step
-            const match = this.questionsFromDb.filter(
-                q => q.response_key_prompt == step,
-            )[0]
+            const match = hasMatch(step, this.questionsFromDb)
             if (match) {
                 seenIds.push(match.response_key_id)
             }
-            return {
-                response_key_id: match ? match.response_key_id : null,
-                response_key_category: match
-                    ? match.response_key_category
-                    : 'profile',
-                response_key_prompt: match ? match.response_key_prompt : step,
-                response_key_description: match
-                    ? match.response_key_description
-                    : null,
-                responses: this.responsesByCategory[step]
-                    ? this.responsesByCategory[step]
-                    : [],
-            }
+            const responseKeyLike = formatStep(match, step)
+            const withComponent = associateWithComponent(responseKeyLike)
+            console.log('withComponent :>> ', withComponent)
+            return withComponent
         })
         const unseen = this.questionsFromDb.filter(
             q => !seenIds.includes(q.response_key_id),

frontend/src/views/OnboardingView.vue

@@ -1,48 +1,36 @@
 <template lang="pug">
 main.view--onboarding
-    article(style='display: flex; flex-direction: column; align-items: center')
-        component(
-            :aspect-questions='steps[currentStep] == "Aspects" ? aspectQuestions : null'
-            :current-step='currentStep'
-            :is='steps[currentStep]'
-            @go-to-step='goToStep'
-            @handle-submit='onSubmit'
-            @update-answers='updateAnswers'
-        )
+    article(
+        style='display: flex; flex-direction: column; align-items: center'
+        v-if='survey'
+    )
+        .step(v-for='(step, i) in survey.steps')
+            component(
+                :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
+                :is='step.component'
+                :question='step'
+                @handle-submit='onSubmit'
+                @update-answers='updateAnswers'
+                v-if='step.component'
+            )
+            p(v-else) {{ step }}
+            p step: {{ i + 1 }} of {{ survey.steps.length }}
+            //- component(
+            //-     :aspect-questions='step.component == "Aspects" ? survey.aspectQuestions : null'
+            //-     :is='step.component'
+            //-     :question='step'
+            //-     @handle-submit='onSubmit'
+            //-     @update-answers='updateAnswers'
+            //-     v-if='step && currentStep == i'
+            //- )
+            //- p(v-if='currentStep == i') step: {{ i+1 }} of {{ survey.steps.length }}
 </template>
 
 <script>
 import { surveyFactory } from '@/utils'
-import { allSteps, possible } from '@/utils/lang'
+import { allSteps } from '@/utils/lang'
 import stepViews from '@/components/onboarding'
 
-const SCORED = [1, 2, 3, 4, 5, 6]
-
-const _isScored = id => SCORED.includes(id)
-
-const _makeCategoryFriendly = responseCategory => {
-    const labels = responseCategory.split('_vs_')
-    labels.forEach((a, i) => {
-        if (a.indexOf('_') == -1) return
-        labels[i] = a.split('_').join(' ')
-    })
-    return labels
-}
-
-const _formatAspectQuestions = steps => {
-    return steps
-        .map(q => {
-            if (!_isScored(q.response_key_id)) return null
-            return {
-                id: q.response_key_id,
-                question: q.response_key_prompt,
-                labels: _makeCategoryFriendly(q.response_key_category),
-                answer: null,
-            }
-        })
-        .filter(step => step != null)
-}
-
 // import savesurveybyprfileid - call it on submit
 // paginate to save every steps answers
 export default {
@@ -54,24 +42,10 @@ export default {
         answered: {},
         aspectQuestions: [],
         currentStep: 0,
-        steps: [
-            'Splash',
-            'AccountType',
-            'CompanyID',
-            'Role',
-            'Skills',
-            'Location',
-            'Interests',
-            'LicensesAndCertifications',
-            'Aspects',
-        ],
+        survey: null,
     }),
     async created() {
-        const survey = await surveyFactory.createSurvey(
-            allSteps['usa'],
-            possible['usa']['roles'],
-        )
-        this.aspectQuestions = _formatAspectQuestions(survey.steps)
+        this.survey = await surveyFactory.createSurvey(allSteps['usa'])
     },
     methods: {
         onSubmit() {
@@ -81,7 +55,10 @@ export default {
             this.currentStep = num
         },
         updateAnswers(payload) {
-            this.answered[payload.key] = payload.answer
+            const k = payload.question.response_key_prompt
+            this.answered[k] = payload.answer
+            console.log(`${k}:`, this.answered[k])
+            this.goToStep(this.currentStep + 1)
         },
     },
 }