refactor practice

frontend/src/components/onboarding/FormInput.vue

@@ -1,26 +1,8 @@
 <template lang="pug">
 .form-input
-    h3(v-if='question.response_key_prompt == "name"') Welcome to Siimee Onboarding! Let's get started!
-    span(v-if='question.response_key_prompt == "name"') What's your name?: 
-    input(v-if='question.response_key_prompt == "name"' placeholder='Jon Doe' type='text' v-model='input')
-    span(v-if='question.response_key_prompt == "email"') In order for you to reach out to others on siimee, we'll need an email address. Where can we best reach you?: 
-    input(v-if='question.response_key_prompt == "email"' placeholder='                @     .   ' type='text' v-model='input')
-    span(v-if='question.response_key_prompt == "password"') Next we'll need you to establish a super secret password. 
-        div Your password should be at least 10 characters long and have at
-        least 2 special characters. 
-        div Please enter your:
-    input(v-if='question.response_key_prompt == "password"' placeholder='supersEcre+passw0rd' type='text' v-model='input')
-    span(v-if='question.response_key_prompt == "zipcode"') Password looks good! You're doing great. 
-        div The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area. 
-        div What's your zip code?: 
-    input(v-if='question.response_key_prompt == "zipcode"' placeholder='99999' type='text' v-model='input')
-    span(v-if='question.response_key_prompt == "blurb"')
-        div Please provide us with a short blurb about yourself. What's your backstory?:
-    textarea(v-if='question.response_key_prompt == "blurb"' placeholder='My Origin Story starts off like this...' type='text' v-model='input' rows='4' cols='50')
-    p(v-if='question.response_key_prompt == "image"') Hey, you're almost done!
-        p Please provide an image of yourself so others can recognize you if you ever meet up IRL:
-        w-button.ma1.grow(@click='submitImage') Upload Image
-    w-button.ma1.grow(@click='handleSubmit') NEXT
+    span {{ question.response_key_prompt }}
+    input(:placeholder='question.placeholder' type='text' v-model='input')
+    w-button.ma1.grow(@click="this.$emit('update-answers', { question, input })") NEXT
 </template>
 <script>
 export default {
@@ -51,24 +33,24 @@ export default {
         submitImage() {
             let payload = {
                 question: this.question,
-                answer: 'placeholder for image'
+                answer: 'placeholder for image',
             }
             this.$emit('update-answers', payload)
-        }
+        },
     },
 }
 </script>
 
 <style>
 .form-input,
-input[placeholder], 
+input[placeholder],
 textarea[placeholder] {
     text-align: center;
 }
 input {
-  border: 0;
-  outline: 0;
-  background: transparent;
-  border-bottom: 1px solid black;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    border-bottom: 1px solid black;
 }
 </style>

frontend/src/utils/lang.js

@@ -17,9 +17,9 @@ const allSteps = {
         // language: 'language',
         zipcode: 'zipcode',
         // distance: 'distance',
-        blurb: 'blurb',
-        image: 'image',
-        aspects: 'aspects'
+        // blurb: 'blurb',
+        // image: 'image',
+        aspects: 'aspects',
     },
 }
 
@@ -81,4 +81,30 @@ possible.usa = {
     blurb: [],
 }
 
-export { allSteps, aspectResponses, possible, DELIMITER }
+const promptOverrides = {
+    name: "What's your name?:",
+    email: "In order for you to reach out to others on siimee, we'll need an email address. Where can we best reach you?:",
+    password:
+        "Next we'll need you to establish a super secret password. Your password should be at least 10 characters long and have at least 2 special characters. Please enter your:",
+    zipcode:
+        "Password looks good! You're doing great. The next piece of info we'll need is your zip code. That way we can be sure to only show you other people in your area. What's your zip code?:",
+    blurb: "Please provide us with a short blurb about yourself. What's your backstory?:",
+    image: "Hey, you're almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:",
+}
+
+const inputPlaceholders = {
+    name: 'Joe Doe',
+    email: 'Joe@mailme.com',
+    zipcode: '90012',
+    blurb: '',
+    image: '',
+}
+
+export {
+    promptOverrides,
+    inputPlaceholders,
+    allSteps,
+    aspectResponses,
+    possible,
+    DELIMITER,
+}

frontend/src/utils/survey.js

@@ -1,6 +1,6 @@
 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
-import { possible } from './lang.js'
+import { promptOverrides, inputPlaceholders, possible } from './lang.js'
 
 const promptToComponent = {
     splash: 'Splash',
@@ -18,7 +18,7 @@ const promptToComponent = {
     image: 'FormInput',
     // distance: 'FormInput',
     blurb: 'FormInput',
-    aspects: 'Aspects'
+    aspects: 'Aspects',
 }
 /**
  * Make a step from match or step information
@@ -63,12 +63,22 @@ class SurveyFactory {
             }
             const responseKeyLike = formatStep(match, step)
             const withComponent = associateWithComponent(responseKeyLike)
-            console.log('withComponent :>> ', withComponent)
+
+            // Mutate the object with extra stuff
+            if (promptOverrides[responseKeyLike.response_key_prompt]) {
+                const langStub = responseKeyLike.response_key_prompt
+                withComponent.response_key_prompt = promptOverrides[langStub]
+                withComponent.placeholder = inputPlaceholders[langStub]
+                withComponent.charzard = langStub
+            }
+
             return withComponent
         })
-        // temporary extra condition in filter 
+        // temporary extra condition in filter
         let unseen = this.questionsFromDb.filter(
-            q => !seenIds.includes(q.response_key_id) && [1,2,3,4,5,6].includes(q.response_key_id),
+            q =>
+                !seenIds.includes(q.response_key_id) &&
+                [1, 2, 3, 4, 5, 6].includes(q.response_key_id),
         )
         return [...stepsInCommon, ...unseen]
     }

frontend/src/views/OnboardingView.vue

@@ -4,21 +4,25 @@ main.view--onboarding
         style='display: flex; flex-direction: column; align-items: center'
         v-if='incomplete'
     )
-        p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / 7 survey steps
         .answers(v-for='(value, key) in answered')
             span(v-if='key == "name" && value && currentStep == 2') Hi {{ value }}!
             span(v-if='key == "email" && value && currentStep == 3') Thanks for the contact info, {{ answered.name }}!
             span(v-if='key == "zipcode" && value && currentStep == 5') Very cool, {{ answered.name }}, we'll be sure only to show you results in your area. Now let's get to know more about you!
 
+        h3(v-if="currentStep == 1") Welcome to Siimee Onboarding! Let's get started!
+        
         .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 && currentStep == i'
             )
+            
+        footer
+            p(v-if='currentStep != 0') You have completed: {{ currentStep - 1 }} / {{ survey.steps.length }} survey steps
+    
     article(v-else)
         SurveyCompleteView(:answers='answered' :surveySteps='survey.steps')
 </template>
@@ -35,7 +39,7 @@ export default {
     name: 'OnboardingView',
     components: {
         ...stepViews,
-        SurveyCompleteView
+        SurveyCompleteView,
     },
     data: () => ({
         answered: {},
@@ -58,13 +62,18 @@ export default {
         updateAnswers(payload) {
             // null payload is passed on splash page
             if (payload) {
-                const k = payload.question.response_key_prompt
-                this.answered[k] = payload.answer
-                console.log(`${k}:`, this.answered[k])
-                console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
-                if (k === 'aspects') return
+                // const k = payload.question.response_key_prompt
+                this.answered[payload.question.charzard] = payload.input
+                // console.log(`${k}:`, this.answered[k])
+                // console.log(`Updated answers: ${JSON.stringify(this.answered)}`)
+                // if (k === 'aspects') return
+            }
+            console.log('this.answered :>> ', this.answered)
+            if (this.currentStep > this.survey.steps.length) {
+                this.onSubmit(this.answered)
+            } else {
+                this.goToStep(this.currentStep + 1)
             }
-            this.goToStep(this.currentStep + 1)
         },
     },
 }