:recycle: Further refactor, separating concerns

backend/db/data-generator/mock.js

             is_deleted: false,
         },
     ],
-    // need to add responses? table to join to here... use json capability? OR
-    // use simplified association logic on front end that is already sort of
-    // present
     response_keys: [
         {
             response_key_id: 1,
-            response_key_category: 'splash',
-            response_key_prompt: 'splash page',
-            response_key_description: 'required for splash page rendering',
-            aspect: null,
-            category: 'splash',
-            component: 'Splash',
-            survey_stage: 'splash',
-            placeholder: null,
-            invalidInputPrompt: null,
-        },
-        {
-            response_key_id: 2,
             response_key_category: 'visionary_vs_implementer',
             response_key_prompt: 'Do you prefer to work with those who are driven by their Visionary insights, or those who are driven more by their Implementation?',
             response_key_description: 'first round draft scoring question',
             aspect: 'visionary_vs_implementer',
             category: 'aspect',
-            component: 'QuestionResponse',
             survey_stage: 'aspect-1',
             placeholder: null,
             invalidInputPrompt: null,
         },
         {
-            response_key_id: 3,
+            response_key_id: 2,
             response_key_category: 'creative_vs_methodical',
             response_key_prompt: 'Have you found more success working with employees that are more Creative or those that are more Methodical?',
             response_key_description: 'first round draft scoring question',
             aspect: 'creative_vs_methodical',
             category: 'aspect',
-            component: 'QuestionResponse',
             survey_stage: 'aspect-2',
             placeholder: null,
             invalidInputPrompt: null,
         },
         {
-            response_key_id: 4,
+            response_key_id: 3,
             response_key_category: 'dynamic_vs_ordered',
             response_key_prompt: 'Which do you find to be the ideal working environment, one that is more Collaborative or one that is more Independent?',
             response_key_description: 'first round draft scoring question',
             aspect: 'dynamic_vs_ordered',
             category: 'aspect',
-            component: 'QuestionResponse',
             survey_stage: 'aspect-3',
             placeholder: null,
             invalidInputPrompt: null,
         },
         {
-            response_key_id: 5,
+            response_key_id: 4,
             response_key_category: 'precise_vs_resourceful',
             response_key_prompt: 'Is the success of your team more likely if it includes individuals who are more Innovative, or those that are more Conventional when fulfilling their job duties?',
             response_key_description: 'first round draft scoring question',
             aspect: 'precise_vs_resourceful',
             category: 'aspect',
-            component: 'QuestionResponse',
             survey_stage: 'aspect-4',
             placeholder: null,
             invalidInputPrompt: null,
         },
         {
-            response_key_id: 6,
+            response_key_id: 5,
             response_key_category: 'big_Picture_vs_focused',
             response_key_prompt: 'When fulfilling the role of the hiring leader, do you find yourself focusing more on the Big Picture or The Task At Hand?',
             response_key_description: 'first round draft scoring question',
             aspect: 'big_Picture_vs_focused',
             category: 'aspect',
-            component: 'QuestionResponse',
             survey_stage: 'aspect-5',
             placeholder: null,
             invalidInputPrompt: null,
         },
         {
-            response_key_id: 7,
+            response_key_id: 6,
             response_key_category: 'guided_vs_self-managed',
             response_key_prompt: 'Do you prefer to Guide your employees towards achieving the team goals, or do you prefer your employees to be Self-Managed?',
             response_key_description: 'first round draft scoring question',
             aspect: 'guided_vs_self-managed',
             category: 'aspect',
-            component: 'QuestionResponse',
             survey_stage: 'aspect-6',
             placeholder: null,
             invalidInputPrompt: null,
         },
         {
-            response_key_id: 8,
+            response_key_id: 7,
             response_key_category: 'profile',
             response_key_prompt: 'First things first, could you provide us with your name? [break] I am called [break] when others address me.',
             response_key_description: 'required for profile creation',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'name',
             placeholder: 'Joe Doe',
             invalidInputPrompt: 'So sorry, but what is your name?',
         },
         {
-            response_key_id: 9,
+            response_key_id: 8,
             response_key_category: 'profile',
             response_key_prompt: 'In order for others to reach out to you on Siimee, we will need you to provide your email address.[break]When reaching out to me, [break] is my preferred email.',
             response_key_description: 'required for profile creation',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'email',
             placeholder: 'joe@mailme.com',
             invalidInputPrompt: 'It looks like that email is not valid, try en email that is formatted like so: joe@joe.com',
         },
         {
-            response_key_id: 10,
+            response_key_id: 9,
             response_key_category: 'profile',
             response_key_prompt: 'So far so good! Next we will need you to establish a super secret password. Your password should be at least 10 characters long and have at least 2 special characters.[break]My [break] is a very secure passcode that only I will have access to!',
             response_key_description: 'required for profile creation',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'password',
             placeholder: 'supersecr3tp@ssword',
             invalidInputPrompt: 'That password does not fit our requirements, please follow the above instructions to generate a secure password.',
         },
         {
-            response_key_id: 11,
+            response_key_id: 10,
             response_key_category: 'profile',
             response_key_prompt: 'Looking good! Doing great. The next piece of info needed is your zip code. That way we can be sure to only show you other people in your area.[break]My zip code, [break] is the general area where I wish to see results in.',
             response_key_description: 'required for distance calculations',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'zipcode',
             placeholder: '90012',
             invalidInputPrompt: 'Oops! That is not a recognized zipcode, please enter a 5 digit zipcode like: 97869',
         },
         {
-            response_key_id: 12,
+            response_key_id: 11,
             response_key_category: 'profile',
             response_key_prompt: 'What are you seeking? Are you looking to find a position to be employed in, or are you looking to employ a candidate?[break] I am a [break] seeking an employer/employee.',
             response_key_description: 'required for profile generation',
             aspect: null,
-            category: null,
-            component: 'FormDropdown',
+            category: 'choice',
             survey_stage: 'seeking',
             placeholder: null,
             invalidInputPrompt: 'In order to provide you with the best results, Siimee will need to know whether you are an employer looking to fill a position, or a candidate looking for an employment. Please take a look at our above options and choose one.',
         },
         {
-            response_key_id: 13,
+            response_key_id: 12,
             response_key_category: 'profile',
             response_key_prompt: 'Hey, you are almost done! Please provide an image of yourself so others can recognize you if you ever meet up IRL:',
             response_key_description: 'required for profile pictures',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'image',
             placeholder: null,
             invalidInputPrompt: 'It appears you have yet to upload an image. Please provide Siimee with an image in case you want to show others what you look like.',
         },
         {
-            response_key_id: 14,
+            response_key_id: 13,
             response_key_category: 'profile',
             response_key_prompt: 'What language is your native language?[break] I consider [break] language as my native language.',
             response_key_description: 'programming and spoken language preference',
             aspect: null,
-            category: null,
-            component: 'FormDropdown',
+            category: 'choice',
             survey_stage: 'language',
             placeholder: null,
             invalidInputPrompt: 'We try our best to provide results in the language of your choosing. ¿Prefieres ver resultados en español? Or would you prefer to see results in english?',
         },
         {
-            response_key_id: 15,
+            response_key_id: 14,
             response_key_category: 'profile',
             response_key_prompt: 'What kind of duration would you prefer? Are you looking for part-time, full-time, other?[break] Currently, I am looking for a [break] job at this time.',
             response_key_description: 'duration preference for hours able to dedicate to work',
             aspect: null,
-            category: null,
-            component: 'FormDropdown',
+            category: 'choice',
             survey_stage: 'duration',
             placeholder: null,
             invalidInputPrompt: 'Looks like you have yet to  fill out what kind of work you are most interested in. As in, part-time, full-time. Take a look at our above options and choose whatever feels right for you right now. You can always edit them later!',
         },
         {
-            response_key_id: 16,
+            response_key_id: 15,
             response_key_category: 'profile',
             response_key_prompt: 'Would you prefer remote, hybrid, in-person work?[break] Personally I would prefer a [break] job right now. It is just what works best for me.',
             response_key_description: 'location preference for where work happens',
             aspect: null,
-            category: null,
-            component: 'FormDropdown',
+            category: 'choice',
             survey_stage: 'presence',
             placeholder: null,
             invalidInputPrompt: 'Hold up! So sorry to put a pause here, but it looks like you have not chosen whether to work remotely or in person. No worries, if you are unsure, just choose the flexible option.',
         },
         {
-            response_key_id: 17,
+            response_key_id: 16,
             response_key_category: 'profile',
             response_key_prompt: 'Please provide us with a short blurb about yourself. What is your backstory?[break] My origin story starts like this:[break]',
             response_key_description: 'required for profile description',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'blurb', 
             placeholder: 'my backstory starts long long ago...',
             invalidInputPrompt: 'Whoa! Cool story. Unfortunately your backstory is either too long or too short. Please tell us a bit about yourself between 1 and 100 characters.',
         },
         {
-            response_key_id: 18,
+            response_key_id: 17,
             response_key_category: 'profile',
             response_key_prompt: 'How soon do you need the position filled or you need to be employed? [break]I am currently [break] when it comes to employment opportunities right now.',
             response_key_description: 'urgency for when work is required',
             aspect: null,
-            category: null,
-            component: 'FormDropdown',
+            category: 'choice',
             survey_stage: 'urgency',
             placeholder: null,
             invalidInputPrompt: 'Looks like you left this field blank. Take a look at our provided options and tell us when you would like be employed.',
         },
         {
-            response_key_id: 19,
+            response_key_id: 18,
             response_key_category: 'profile',
             response_key_prompt: 'When others refer to you, what pronouns do you prefer they use?[break]I prefer to be called [break] when others refer to me.',
             response_key_description: 'required for profile pronouns',
             aspect: null,
-            category: null,
-            component: 'FormDropdown',
+            category: 'choice',
             survey_stage: 'pronouns',
             placeholder: null,
             invalidInputPrompt: 'Ensuring that others on our platform are aware of what your preferred pronouns are is important to us. Please choose from one of the above options.',
         },
         {
-            response_key_id: 20,
+            response_key_id: 19,
             response_key_category: 'profile',
             response_key_prompt: 'What distance from your home are you looking to work in?[break] Preferably, I would like to work [break] from my place of residence.',
             response_key_description: 'preference for commuting distance cutoff',
             aspect: null,
-            category: null,
-            component: 'FormInput',
+            category: 'input',
             survey_stage: 'distance',
             placeholder: '5 mi',
             invalidInputPrompt: 'Whoa! You either left this field blank or tried to input an astronomically large distance you would like to see results from. Please input a distance you would like to see results in.',

backend/db/migrations/20210527174416_create_response_keys_table.js

         table.string('response_key_description')
         table.string('aspect')
         table.string('category')
-        table.string('component')
         table.string('survey_stage')
         table.string('placeholder')
         table.string('invalidInputPrompt')

backend/lib/schemas/responses.js

     response_key_description: Joi.any(),
     aspect: Joi.string().allow(null, ''),
     category: Joi.string().allow(null, ''),
-    component: Joi.string(),
     survey_stage: Joi.string(),
     placeholder: Joi.string().allow(null, ''),
     invalidInputPrompt: Joi.string().allow(null, ''),

frontend/src/utils/lang.js

 const aspectsArr = [1, 2, 3, 4, 5, 6]
+
+// Splash page is unique in survey steps and therefore is simply spliced in
+// during survey generation
+const splash = {
+    response_key_id: 1,
+    response_key_category: 'splash',
+    response_key_prompt: 'splash page',
+    response_key_description: 'required for splash page rendering',
+    aspect: null,
+    category: 'splash',
+    component: 'Splash',
+    survey_stage: 'splash',
+    placeholder: null,
+    invalidInputPrompt: null,
+}
+
+// TODO: in utils/survey.js modify _setSteps() to reorder survey steps from here
 const allSteps = {
     usa: {
         splash: 'splash',
 
 export {
     allSteps,
+    splash,
     aspectResponses,
     aspectsArr,
     possible,

frontend/src/utils/survey.js

 import { Survey } from '../entities/index.js'
 import { fetchQuestions } from '../services/index.js'
-import { possible } from './lang.js'
+import { splash, possible } from './lang.js'
 
 class SurveyFactory {
     constructor() {
         this.questionsFromDb = []
     }
-    _setSteps() {
-        const responseKeys = this.questionsFromDb
-        const responsesByCategory = possible['usa']
-        Object.keys(responsesByCategory).forEach((k) => {
-            responseKeys.forEach((key) => {
+    _addResponses(responseKeys, responsesByCategory) {
+        Object.keys(responsesByCategory).forEach(k => {
+            responseKeys.forEach(key => {
                 if (key.survey_stage === k) {
                     key.responses = responsesByCategory[k]
                 }
         })
         return responseKeys
     }
+    _addComponents(responseKeys) {
+        responseKeys.forEach(key => {
+            switch (key.category) {
+                case 'input':
+                    key.component = 'FormInput'
+                    break
+                case 'choice':
+                    key.component = 'FormDropdown'
+                    break
+                case 'aspect':
+                    key.component = 'QuestionResponse'
+                    break
+            }
+        })
+        return responseKeys
+    }
+    // TODO: in _setSteps(), reorder survey steps based off of allSteps in lang.js
+    _setSteps() {
+        const responseKeys = this.questionsFromDb
+        const responsesByCategory = possible['usa']
+        let mutatedResponseKeys = this._addResponses(responseKeys, responsesByCategory)
+        mutatedResponseKeys = this._addComponents(responseKeys)
+        // Splash page is spliced into first step of survey
+        mutatedResponseKeys.splice(0, 1, splash)
+        return mutatedResponseKeys
+    }
     async getQuestions() {
         try {
             this.questionsFromDb = await fetchQuestions()