:sparkles: adding http requesting of form questions | generating forms on response

backend/db/mock.js

         {
             response_key_id: 1,
             response_key_category: 'grit',
-            response_key_prompt: 'question for grit',
+            response_key_prompt: 'what is your name',
             response_key_description: null,
         },
         {
             response_key_id: 2,
             response_key_category: 'openness',
-            response_key_prompt: 'question for openness',
+            response_key_prompt: 'what is your favorite color',
             response_key_description: null,
         },
         {
             response_key_id: 3,
+            response_key_category: 'grit',
+            response_key_prompt: 'what is your quest',
+            response_key_description: null,
+        },
+        {
+            response_key_id: 4,
             response_key_category: 'empathy',
-            response_key_prompt: 'question for empathy',
+            response_key_prompt:
+                'what is the average flight speed of an unladen swallow',
             response_key_description: null,
         },
     ],

backend/lib/index.js

         })
 
         await server.register(SurveyPlugin, {
-            routes: { prefix: '/survey' },
+            routes: {
+                prefix: '/survey',
+            },
         })
 
         await server.register(ProfilePlugin, {

backend/lib/routes/survey/questions.js

         tags: ['api'],
         /** Protect this route with authentication? */
         auth: false,
-
+        cors: true,
         handler: async function (request, h) {
             const { responseService } = request.services()
             const responseKeys = await responseService.getResponseKeys()

frontend/src/App.vue

 <template lang="pug">
 .cards.f-row
     card(v-for="card in cards" :card="card" @on-remove="remove")
-.form.f-row
-    siimee-form(:form="profileForm")
+.form.f-row(v-if="completedForm")
+    siimee-form(:form="completedForm")
 hello-world(msg="Hello Vue 3 + Vite")
 </template>
 
 <script>
 import * as sss from '@/sss/import.css'
 
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { profileForm } from '@/utils/forms'
+import { Connector } from '@/utils/db'
 
 import helloWorld from '@/components/HelloWorld.vue'
 import card from '@/components/card.vue'
         const remove = card => {
             const i = cards.value.indexOf(card)
             cards.value.splice(i, 1)
-            console.log(cards.value)
         }
+
+        const db = new Connector()
+        const completedForm = ref([])
+        const compileForm = async () => {
+            const responseKeys = await db.get('/survey/questions')
+            const responsesById = responseKeys.reduce((resMap, res) => {
+                resMap[res.response_key_id] = res
+                return resMap
+            }, {})
+            completedForm.value = profileForm.map(step => {
+                const stepWithPrompts = []
+                step.forEach(prompt => {
+                    stepWithPrompts.push({
+                        ...prompt,
+                        category: responsesById[prompt.id]['response_key_category'],
+                        question: responsesById[prompt.id]['response_key_prompt'],
+                    })
+                })
+                return stepWithPrompts
+            })
+        }
+        onMounted(compileForm)
+
         return { 
             cards,
             remove,
-            profileForm
+            completedForm
         }
     }
 }

frontend/src/components/form.vue

 <template lang="pug">
-.form.f-col.start.mr-1.w-full
+.form.f-col.start.mr-1.w-full(v-if="form.length")
     header
         p answers to save: {{ answers }}
 
-    ul(v-for="(step, i) in formSteps").w-full
-        li(v-for="prompt in step" v-show="(i + 1) == state.step").f-row.start.b-solid
+    ul(v-for="(step, i) in form").w-full
+        li(
+            v-if="step && step.length"
+            v-for="prompt in step" v-show="(i + 1) == state.step"
+        ).f-row.start.b-solid.p-0
             h3 {{ prompt.question }}?
             .response-wrapper(v-if="prompt.type === 'input-string'")
                 label {{prompt.type}}
     
     footer.f-row.w-full
         button(@click="back" :disabled="state.step == 1").p-1 back
-        button(@click="next" :disabled="state.step == formSteps.length").p-1 next
-        button(@click="next" :disabled="state.step != formSteps.length").p-1 save
+        button(@click="next" :disabled="state.step == form.length").p-1 next
+        button(@click="next" :disabled="state.step != form.length").p-1 save
         .f-grow
-        p step: {{ state.step }} of {{ formSteps.length }}
+        p step: {{ state.step }} of {{ form.length }}
 </template>
 
 <script setup>
 import Joi from 'joi'
 import { validatorMapping, makeKebob } from '@/utils'
-import { defineProps, reactive, getCurrentInstance } from 'vue'
-
-const instance = getCurrentInstance()
+import { defineProps, reactive } from 'vue'
 
 const props = defineProps({ 
     form: { 
         required: true
     } 
 })
-
 /**
  * Our form is comprised of steps, and each step has a series of questions
- */
-const formSteps = props.form
+*/
+const state = reactive({ step: 1 })
+
 /**
  * Create state object to store answers based on the questions in formSteps 
  */
 const answers = reactive({})
 const resetAnswers = () => {
-    formSteps.forEach(step => {
-        step.forEach(prompt => {
-            answers[makeKebob(prompt.question)] = null
-        })
-    })
+    Object.keys(answers).forEach(key => answers[key] = null)
 }
 resetAnswers()
 /**
 const isValid = step => {
     const schema = {}
     const answeredThisStep = {}
-    formSteps[step].forEach(prompt => {
+    props.form[step].forEach(prompt => {
         const key = makeKebob(prompt.question)
         schema[key] = validatorMapping[prompt.type]
         answeredThisStep[key] = answers[key]
     })
     return Joi.object(schema).validate(answeredThisStep)
 }
-const state = reactive({ step: 1 })
 /**
  * Save or take the-nNext step in the form
  */
     if(validity.error) return console.error(validity.error)
 
     // Save or next
-    if(state.step === formSteps.length) {
+    if(state.step === props.form.length) {
         alert('saved...')
         resetAnswers()
         state.step = 1
-    } else if(state.step < formSteps.length) {
+    } else if(state.step < props.form.length) {
         state.step++
     } else {
         console.error(`Cannot perform action: next() | on form step: ${state.step} of ${props.formSteps.length}`)        
     color: $light
     ul
         list-style: none
-        li
-            padding: 1em
 </style>

frontend/src/utils/db.js

 const domain = 'localhost'
-const port = 3306
-const remote = `http://${domain}:${port}`
+const port = 3001
+const remote = `http://${domain}:${port}/api`
 
-class Connector {
-    constructor() { this.db = null }
-    async put(entry) {
-        /** from ajv schema validation */
-        if(entry.isValid()) {
-            try { }
+const headerTemplate = {
+    method: null,
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'omit', // include, *same-origin, omit
+    headers: {
+        'Content-Type': 'application/json',
+        // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'manual', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: null, // body data type must match "Content-Type" header
+}
 
-            /** valid data but can't save */
-            catch (err) {
-                console.error('can\'t put', entry)
+class Connector {
+    constructor() {
+        this.db = null
+    }
+    async get(endpoint) {
+        const header = headerTemplate
+        header.method = 'GET'
+        try {
+            let res = await fetch(`${remote}${endpoint}`, header)
+            if (!res.ok) {
+                throw Error(res.statusText)
             }
+            const jsonRes = await res.json()
+            return jsonRes.data
+        } catch (error) {
+            console.log(error)
         }
-
-        else {
+    }
+    async put(endpoint, entry) {
+        /** from ajv schema validation */
+        if (entry.isValid()) {
+            try {
+            } catch (err) {
+                /** valid data but can't save */
+                console.error("can't put", entry)
+            }
+        } else {
             /** not valid data */
             console.error('NOT VALID!', entry.isValid())
         }
     // async removeAll() { }
 }
 
-export { Connector }
+export { Connector }

frontend/src/utils/forms.js

 const profileForm = [
-  [
-    {
-      type: "input-string",
-      question: "what is your name",
-      responses: null,
-    },
-    {
-      type: "tag-cloud",
-      question: "what is your favorite color",
-      responses: ["red", "blue", "green", "white", "black"],
-    },
-  ],
-  [
-    {
-      type: "input-string",
-      question: "what is your quest",
-      responses: null,
-    },
-    {
-      type: "input-string",
-      question: "what is the average flight speed of an unladen swallow",
-      responses: null,
-    },
-  ],
-];
+    [
+        {
+            type: 'input-string',
+            id: 1,
+            responses: null,
+        },
+        {
+            type: 'tag-cloud',
+            id: 2,
+            responses: ['red', 'blue', 'green', 'white', 'black'],
+        },
+    ],
+    [
+        {
+            type: 'input-string',
+            id: 3,
+            responses: null,
+        },
+        {
+            type: 'input-string',
+            id: 4,
+            responses: null,
+        },
+    ],
+]
 
-export { profileForm };
+export { profileForm }

frontend/src/utils/index.js

-import Joi from "joi";
-import { Connector } from "./db";
+import Joi from 'joi'
+import { Connector } from './db'
 
-const api = new Connector("kittens");
+const api = new Connector('kittens')
 
 const validatorMapping = {
-  "input-string": Joi.string(),
-  "tag-cloud": Joi.string(),
-};
+    'input-string': Joi.string(),
+    'tag-cloud': Joi.string(),
+}
 
-const makeKebob = (input) => {
-  return input.toLowerCase().split(" ").join("-");
-};
+const makeKebob = input => {
+    return input.toLowerCase().split(' ').join('-')
+}
 
-export { api, validatorMapping, makeKebob };
+export { api, validatorMapping, makeKebob }