:recycle: fixing route guards | moving around loging handling

backend/package.json

@@ -42,4 +42,4 @@
         "nyc": "^15.1.0",
         "sinon": "^11.1.2"
     }
-}
+}

frontend/src/App.vue

@@ -8,7 +8,8 @@ import * as sss from '@/sss/import.css'
 
 import SideBar from './components/SideBar.vue'
 
-import { Chatter, StonkAlert, currentProfile } from './services'
+import { Chatter, StonkAlert, currentProfile } from '@/services'
+import { surveyFactory } from '@/utils'
 
 const DEFAULT_PID = 45
 
@@ -22,7 +23,8 @@ export default {
             return currentProfile.id ?  currentProfile.id : DEFAULT_PID
         }
     },
-    created() {
+    async created() {
+        await this.setupSurveyFactory()
         this.setupChatter()
         this.setupToaster()
     },
@@ -41,6 +43,16 @@ export default {
             const testAccountUUID = import.meta.env.VITE_TEST_ACCOUNT_UUID
             c.setup(testAccountUUID)
             console.log('---')
+        },
+        /**
+         * Get all the questions early because lots
+         * of things depend on the count
+         * 
+         * Note: only make the survey if the
+         * SurveyView is accessed
+         */
+        async setupSurveyFactory() {
+            await surveyFactory.getQuestions()
         }
     },
 }

frontend/src/main.js

@@ -1,28 +1,14 @@
 import { createApp } from 'vue'
 import router from './router'
-import { currentProfile } from './services'
+import { checkLoginStatus } from './router/guards'
 
 import App from './App.vue'
 import MainNav from './components/MainNav.vue'
 
-/**
- * Router guard functions
- */
-const checkLoginStatus = (destination, nextCb) => {
-    const requiresCompleteProfile = destination.meta.requiresAuth
-
-    if(!currentProfile.isLoggedIn() && requiresCompleteProfile) {
-        nextCb('login')
-    } else {
-        nextCb()
-    }
-}
-
 /**
  * Check between route changes for login/timeout
  */
 router.beforeEach((to, from, next) => {
-    console.log(currentProfile.isLoggedIn())
     /**
      * Use the loginService to deal with login details
      */

frontend/src/router/guards.js

@@ -0,0 +1,22 @@
+import { currentProfile } from '../services'
+
+const checkLoginStatus = (destination, nextCb) => {
+    console.warn('currentProfile logged in:', currentProfile.isLoggedIn())
+    console.log('destination:', destination.meta)
+    if (
+        destination.meta.requiresCompleteProfile &&
+        currentProfile.isLoggedIn() &&
+        !currentProfile.isComplete() 
+    ) {
+        nextCb('survey')
+    } else if(
+        destination.meta.requiresAuth &&
+        !currentProfile.isLoggedIn()
+    ) {
+        nextCb('login')
+    } else {
+        nextCb()
+    }
+}
+
+export { checkLoginStatus }

frontend/src/router/index.js

@@ -11,30 +11,31 @@ const routes = [
         path: '/',
         component: HomeView,
         name: 'HomeView',
-        meta: { requiresAuth: true, requiresProfile: true },
+        meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
     {
         path: '/profile/:pid',
         component: ProfileView,
         name: 'ProfileView',
-        meta: { requiresAuth: true, requiresProfile: true },
+        meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
     {
         path: '/matches',
         component: MatchesView,
         name: 'MatchesView',
-        meta: { requiresAuth: true, requiresProfile: true },
+        meta: { requiresAuth: true, requiresCompleteProfile: true },
     },
     {
         path: `/survey`,
         component: SurveyView,
         name: `SurveyView`,
-        meta: { requiresAuth: true, requiresProfile: true },
+        meta: { requiresAuth: true, requiresCompleteProfile: false },
     },
     {
         path: `/login`,
         component: LoginView,
         name: `LoginView`,
+        meta: { requiresAuth: false, requiresCompleteProfile: false },
     },
 ]
 

frontend/src/services/login.service.js

@@ -1,4 +1,5 @@
 import { fetchQueueByProfileId, fetchResponsesByProfileId } from '../services'
+import { surveyFactory } from '../utils'
 
 class Login {
     constructor() {
@@ -15,6 +16,9 @@ class Login {
     isLoggedIn() {
         return this.id != null
     }
+    isComplete() {
+        return this.responses.length == surveyFactory.questions.length
+    }
     hasQueue() {
         return this.queue.length && this.queue.length > 0
     }

frontend/src/services/survey.service.js

@@ -7,7 +7,7 @@ import { db } from '../utils/db'
  * @param {number} profileId
  * @returns {array} instantiated Profile objects (see: /entites/profile)
  */
-const fetchQuestionsByProfileId = async profileId => {
+const fetchQuestions = async () => {
     return await db.get(`/survey/questions`)
 }
 
@@ -54,7 +54,7 @@ const fetchResponsesByProfileId = async profileId => {
 }
 
 export {
-    fetchQuestionsByProfileId,
+    fetchQuestions,
     saveSurveyByProfileId,
     updateSurveyByProfileId,
     scoreSurveyByProfileId,

frontend/src/utils/index.js

@@ -1,4 +1,6 @@
 import Joi from 'joi'
+import { fetchQuestions } from '../services'
+
 import { Connector } from './db'
 import { SurveyFactory } from './survey'
 import { possible } from './lang'

frontend/src/utils/survey.js

@@ -1,17 +1,17 @@
 import { Survey } from '../entities'
-import { fetchQuestionsByProfileId } from '../services'
+import { fetchQuestions } from '../services'
 
 class SurveyFactory {
     constructor(responses) {
         this.responsesByCategory = responses
+        this.questions = []
     }
-    async setSteps(langFile) {
+    _setSteps(langFile) {
         const stepsToProcess = [...Object.values(langFile) ]
-        const questions = await fetchQuestionsByProfileId()
         const seenIds = []
         const stepsInCommon = stepsToProcess.map(step => {
             // Match question to step
-            const match = questions.filter(q => q.response_key_prompt == step)[0]
+            const match = this.questions.filter(q => q.response_key_prompt == step)[0]
             if(match) { seenIds.push(match.response_key_id) }
             return {
                 response_key_category: match ? match.response_key_category: 'profile',
@@ -21,11 +21,19 @@ class SurveyFactory {
                 responses: this.responsesByCategory[step] ? this.responsesByCategory[step] : [] 
             }
         })
-        const unseen = questions.filter(q => !seenIds.includes(q.response_key_id))
+        const unseen = this.questions.filter(q => !seenIds.includes(q.response_key_id))
         return [...stepsInCommon, ...unseen]
     }
-    async createSurvey(langFile, roleTree) {
-        const steps = await this.setSteps(langFile)
+    async getQuestions() {
+        this.questions = await fetchQuestions()
+    }
+    createSurvey(langFile, roleTree) {
+        if(!this.questions.length) {
+            console.error('Get questions before creating a survey')
+            return
+        }
+
+        const steps = this._setSteps(langFile)
         return new Survey(steps, roleTree)
     }
 }

frontend/src/views/LoginView.vue

@@ -35,9 +35,6 @@ export default {
             const alreadyLoggedIn = await currentProfile.isLoggedIn()
             if(!alreadyLoggedIn) {
                 await currentProfile.login(this.form.profileId)
-                if(!currentProfile.hasResponses()) {
-                    toRoute.name = 'SurveyView'
-                }
             }
 
             this.$router.push(toRoute)

frontend/src/views/SurveyView.vue

@@ -72,8 +72,10 @@ main.view--survey.f-col.start.w-full
 </template>
 
 <script>
+import { checkLoginStatus } from '../router/guards'
 import { surveyFactory } from '../utils'
 import { allSteps, possible, stepToComponentMap } from '../utils/lang'
+
 import SurveyForm from '../components/form.vue'
 import ButtonMulti from '../components/form/button-multi.vue'
 import ButtonChoice from '../components/form/button-choice.vue'
@@ -119,8 +121,12 @@ export default {
             )
         },
     },
-    async created() {
-        this.validSurvey = await surveyFactory.createSurvey(
+    /**
+     * Before this ever gets called, surveyFactory.questions
+     * must be set by App.created()
+     */
+    created() {
+        this.validSurvey = surveyFactory.createSurvey(
             allSteps['usa'],
             possible['usa']['roles'],
         )