:fire: simplifying | removing cruft

frontend/src/App.vue

@@ -8,38 +8,41 @@ import * as sss from '@/sss/import.css'
 
 import SideBar from './components/SideBar.vue'
 
-import { Chatter, StonkAlert } from './services'
+import { Chatter, StonkAlert, currentProfile } from './services'
 
 const DEFAULT_PID = 45
 
 export default {
     components: { SideBar },
     data: () => ({
-        pid: null,
         showSidebar: false
     }),
+    computed:{
+        pid: () => {
+            return currentProfile.id ?  currentProfile.id : DEFAULT_PID
+        }
+    },
     created() {
-        this.setPid()
         this.setupChatter()
         this.setupToaster()
     },
     methods: {
-        setPid(pid) {
-            this.pid = pid ? parseInt(pid) : DEFAULT_PID
-        },
-
-        // For push notifications and chat 
+        /**
+         * For push notifications and chat group initiation
+         */
         setupToaster() {
             const t = new StonkAlert(this.pid)
         },
+        /**
+         * Pubnub stuff
+         */
         setupChatter() {
             const c = new Chatter()
             const testAccountUUID = import.meta.env.VITE_TEST_ACCOUNT_UUID
             c.setup(testAccountUUID)
             console.log('---')
-        },
+        }
     },
-    
 }
 </script>
 

frontend/src/main.js

@@ -1,26 +1,32 @@
 import { createApp } from 'vue'
-import App from './App.vue'
 import router from './router'
+import { currentProfile } from './services'
 
+import App from './App.vue'
 import MainNav from './components/MainNav.vue'
 
-router.beforeEach((to, from, next) => {
-    const requiresAuth = false
-    const requiresProfile = true
+/**
+ * Router guard functions
+ */
+const checkLoginStatus = (destination, nextCb) => {
+    const requiresCompleteProfile = destination.meta.requiresAuth
 
-    if (requiresAuth) {
-        console.log('You are not authorized to access this area.')
-        next('login')
+    if(!currentProfile.isLoggedIn() && requiresCompleteProfile) {
+        nextCb('login')
     } else {
-        next()
+        nextCb()
     }
+}
 
-    // if (requiresProfile) {
-    //   console.log('You must first complete your profile.')
-    //   next('profile')
-    // } else {
-    //   next()
-    // }
+/**
+ * Check between route changes for login/timeout
+ */
+router.beforeEach((to, from, next) => {
+    console.log(currentProfile.isLoggedIn())
+    /**
+     * Use the loginService to deal with login details
+     */
+    checkLoginStatus(to, next)
 })
 
 const siimee = createApp(App).use(router)

frontend/src/router/index.js

@@ -2,11 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import HomeView from '../views/HomeView.vue'
 import ProfileView from '../views/ProfileView.vue'
-import Matches from '../views/Matches.vue'
-import Chats from '../views/Chats.vue'
-import Login from '../views/Login.vue'
-import Register from '../views/Register.vue'
-import Survey from '../views/Survey.vue'
+import MatchesView from '../views/MatchesView.vue'
+import LoginView from '../views/LoginView.vue'
+import SurveyView from '../views/SurveyView.vue'
 
 const routes = [
     {
@@ -19,35 +17,24 @@ const routes = [
         path: '/profile/:pid',
         component: ProfileView,
         name: 'ProfileView',
-        meta: { requiresAuth: true },
+        meta: { requiresAuth: true, requiresProfile: true },
     },
     {
         path: '/matches',
-        component: Matches,
-        name: 'matches',
+        component: MatchesView,
+        name: 'MatchesView',
         meta: { requiresAuth: true, requiresProfile: true },
     },
     {
-        path: '/chats/:uid',
-        component: Chats,
-        name: `chat`,
-        props: true,
+        path: `/survey`,
+        component: SurveyView,
+        name: `SurveyView`,
         meta: { requiresAuth: true, requiresProfile: true },
     },
     {
         path: `/login`,
-        component: Login,
-        name: `login`,
-    },
-    {
-        path: `/survey`,
-        component: Survey,
-        name: `survey`,
-    },
-    {
-        path: `/register`,
-        component: Register,
-        name: `register`,
+        component: LoginView,
+        name: `LoginView`,
     },
 ]
 

frontend/src/services/index.js

@@ -4,3 +4,5 @@ export * from './survey.service'
 export * from './queue.service'
 export * from './chat.service'
 export * from './notification.service'
+export * from './login.service'
+

frontend/src/services/login.service.js

@@ -0,0 +1,73 @@
+import { fetchQueueByProfileId, fetchResponsesByProfileId } from '../services'
+
+class Login {
+    constructor() {
+        this._loading = true
+
+        this.id = null
+        this.queue = []
+        this.matches = []
+        this.responses = []
+    }
+    isLoading() {
+        return this._loading
+    }
+    isLoggedIn() {
+        return this.id != null
+    }
+    hasQueue() {
+        return this.queue.length && this.queue.length > 0
+    }
+    hasMatches() {
+        return this.matches.length && this.matches.length > 0
+    } 
+    hasResponses() {
+        return this.responses.length && this.responses.length > 0
+    } 
+
+    async getQueue() {
+        this._loading = true
+        try {
+            const queueList = await fetchQueueByProfileId(this.id)
+            const formatted = this._reformatProfiles(queueList)
+            this._setQueue(formatted)
+            this._loading = false
+        } catch (err) {
+            console.error(err)
+        }
+    }
+    _reformatProfiles(profiles) {
+        const formattedList = profiles.map(profile => {
+            return {
+                pid: profile.profile_id,
+                name: profile.user_name,
+                avatar: '',
+            }
+        })
+        return formattedList
+    }
+    _setQueue(queue) { this.queue = queue }
+
+    async getResponses() {
+        try {
+            const responseList = await fetchResponsesByProfileId(this.id)
+            this._setResponses(responseList)
+        } catch (err) {
+            console.error(err)
+        }
+    }
+    _setResponses(responses) { this.responses = responses }
+    
+    /**
+     * Login a profile id
+     */
+    async login(pid) {
+        this.id = parseInt(pid)
+        return this.id
+    }
+    logout() { this.id = null }
+}
+
+const currentProfile = new Login()
+
+export { currentProfile }

frontend/src/services/survey.service.js

@@ -47,9 +47,16 @@ const scoreSurveyByProfileId = async (profileId, maxDistance) => {
     return scoreSurvey
 }
 
+const fetchResponsesByProfileId = async profileId => {
+    return await db.get(
+        `/profile/${profileId}/responses`,
+    )
+}
+
 export {
     fetchQuestionsByProfileId,
     saveSurveyByProfileId,
     updateSurveyByProfileId,
     scoreSurveyByProfileId,
+    fetchResponsesByProfileId,
 }

frontend/src/utils/index.js

@@ -1,7 +1,5 @@
 import Joi from 'joi'
 import { Connector } from './db'
-import { Login } from './login'
-import { Authenticator } from './auth'
 import { SurveyFactory } from './survey'
 import { possible } from './lang'
 
@@ -18,8 +16,6 @@ const makeKebob = input => {
     return input.toLowerCase().split(' ').join('-')
 }
 
-const loginHandler = new Login()
-const authHandler = new Authenticator()
 const surveyFactory = new SurveyFactory(possible['usa'])
 
-export { api, validatorMapping, loginHandler, authHandler, surveyFactory, makeKebob }
+export { api, validatorMapping, surveyFactory, makeKebob }

frontend/src/utils/login.js

@@ -1,49 +0,0 @@
-import { fetchQueueByProfileId } from '../services'
-
-class Login {
-    constructor() {
-        this.loading = true
-        this.currentProfileId = null
-        this.survey = null
-        this.queue = null
-        this.matches = null
-    }
-
-    _setSurvey(survey) {
-        this.survey = []
-    }
-
-    async getQueue() {
-        this.loading = true
-        try {
-            const queueList = await fetchQueueByProfileId(this.currentProfileId)
-            const formatted = this._reformatProfiles(queueList)
-            this._setQueue(formatted)
-            this.loading = false
-        } catch (err) {
-            console.error(err)
-        }
-    }
-    _reformatProfiles(profiles) {
-        const formattedList = profiles.map(profile => {
-            return {
-                pid: profile.profile_id,
-                name: profile.user_name,
-                avatar: '',
-            }
-        })
-        return formattedList
-    }
-    _SET_QUEUE(queue) {
-        this.queue = queue
-    }
-
-    logout() {
-        this.currentProfileId = null
-    }
-    async login(pid) {
-        this.currentProfileId = parseInt(pid)
-    }
-}
-
-export { Login }

frontend/src/views/HomeView.vue

@@ -1,9 +1,13 @@
 <template lang="pug">
-main.f-col.start.w-full
-    article#home(v-if="!loading")
-        h1 Queue Page
+main.view--home.f-col.start.w-full
+    header
+        h2 home
+
+    article(v-if="!loading")
         ProfileCardList(:profiles="cards" :pid="pid" @reload-queue="getQueue")
+
     p(v-else) Loading...
+
     MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 

frontend/src/views/Login.vue

@@ -1,48 +0,0 @@
-<template lang="pug">
-.login__box
-    h2 Login
-    form(@submit.prevent='onSubmit')
-        .user__box
-            input(required='' type='email' v-model='form.email')
-            label Email
-        .user__box
-            input(required='' type='password' v-model='form.password')
-            label Password
-        .user__box
-            router-link.forget__link(to='/forget') Forget Password
-        .user__box(style='margin-top: 10px; cursor: pointer')
-            p.forget__link(@click='guestAccount') Guest Account
-        button(type='submit')
-            span
-            span
-            span
-            span {{ requesting ? "Log..." : "Login" }}
-        router-link.links(to='/register') Register
-</template>
-
-<script>
-export default {
-    data: () => ({
-        requesting: false,
-        form: {
-            email: '',
-            password: '',
-        },
-    }),
-    methods: {
-        onSubmit() {
-            this.requesting = true
-            // Do some auth
-        },
-        guestAccount() {
-            this.form.email = 'lucy@me.com'
-            this.form.password = '123456'
-            this.onSubmit()
-        },
-    },
-}
-</script>
-
-<style lang="postcss">
-
-</style>

frontend/src/views/LoginView.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+main.view--login.w-full.f-col
+    header
+        h2 Login
+
+    article
+        form(@submit.prevent='onSubmit')
+            label profile id:
+            input(required='' type='profileId' v-model='form.profileId')
+            button(type='submit') submit
+</template>
+
+<script>
+import { currentProfile } from '../services'
+
+export default {
+    data: () => ({
+        form: {
+            profileId: null
+        },
+    }),
+    methods: {
+        async onSubmit() {
+            if(!this.form.profileId) console.error('No profile in form')
+            /**
+             * Default to the HomeView and
+             * alter as needed (side-effects!)
+             */
+            const toRoute = { name: 'HomeView' }
+            
+            /**
+             * Profile needs a complete survey and
+             * alters the url if it's incomplete
+             */
+            const alreadyLoggedIn = await currentProfile.isLoggedIn()
+            if(!alreadyLoggedIn) {
+                await currentProfile.login(this.form.profileId)
+                if(!currentProfile.hasResponses()) {
+                    toRoute.name = 'SurveyView'
+                }
+            }
+
+            this.$router.push(toRoute)
+        },
+    },
+}
+</script>
+
+<style lang="postcss">
+
+</style>

frontend/src/views/Matches.vue → frontend/src/views/MatchesView.vue

@@ -1,9 +1,13 @@
 <template lang="pug">
-main.f-col.start.w-full
-    article#match(v-if="!loading")
-        h1 Match Page
+main.view--matches.f-col.start.w-full
+    header
+        h2 Match Page
+
+    article(v-if="!loading")
         ProfileCardList(:profiles="profiles" :pid="pid" :is-grid="true")
+    
     p(v-else) Loading...
+    
     MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 

frontend/src/views/ProfileView.vue

@@ -1,10 +1,14 @@
 <template lang="pug">
-main.f-col.start.w-full
-    article#home(v-if="!loading")
-        h1 Profile Page
-        h2 {{ profile }}
+main.view--profile.f-col.start.w-full
+    header 
+        h2 Profile Page
+ 
+    article(v-if="!loading")
+        h3 {{ profile }}
         RouterLink(:to="{ name: 'HomeView' }") back
+
     p(v-else) Loading...
+
     MainNav(@show-sidebar="$emit('show-sidebar')")
 </template>
 

frontend/src/views/Register.vue

@@ -1,56 +0,0 @@
-<template lang="pug">
-.register__box
-    h2 Register
-    form(@submit.prevent='onSubmit')
-        .user__box
-            input(
-                minlength='5'
-                required=''
-                type='text'
-                v-model='form.fullname'
-            )
-            label Fullname
-        .user__box
-            input(minlength='10' required='' type='email' v-model='form.email')
-            label Email
-        .user__box
-            input(
-                minlength='6'
-                required=''
-                type='password'
-                v-model='form.password'
-            )
-            label Password
-        .user__box
-            router-link.forget__link(to='/forget') Forget Password
-        button(type='submit')
-            span
-            span
-            span
-            span {{ requesting ? "Log..." : "Register" }}
-        router-link.links(to='/login') Login
-</template>
-
-<script>
-export default {
-    data: () => ({
-        valid: true,
-        requesting: false,
-        form: {
-            email: '',
-            password: '',
-            fullname: '',
-        },
-    }),
-    methods: {
-        onSubmit() {
-            this.requesting = true
-            this.requesting = false
-        },
-    },
-}
-</script>
-
-<style lang="postcss">
-
-</style>

frontend/src/views/Survey.vue → frontend/src/views/SurveyView.vue

@@ -1,9 +1,5 @@
 <template lang="pug">
-main.f-col.start.w-full
-    p {{step }}
-    //- ButtonMulti
-    //- ButtonChoice
-    //- InputString
+main.view--survey.f-col.start.w-full
     header.w-full.f-col
         Transition(name="slide-up" :duration="1600")
             h3(v-if="step == 0") hello, what shall i call you?

frontend/src/views/home.vue

@@ -1,128 +0,0 @@
-<template lang="pug">
-sidebar(v-if='!loading' :pid="pid" @updatePid="setPid")
-main.f-col.start.w-full
-    article#home(v-if='!loading')
-        h1 Queue Page
-        profile-card-list(:profiles='swipables' :pid='parseInt(pid)' @reload-queue='getQueue')
-    p(v-else) Loading...
-    main-nav(v-if='!loading' :pid="pid")
-</template>
-
-<script>
-import sidebar from '../components/Sidebar.vue'
-import mainNav from '../components/MainNav.vue'
-import profileCardList from '../components/ProfileCardList.vue'
-
-import { Chatter, StonkAlert } from '../services'
-import { loginHandler, authHandler } from '../utils'
-
-import batch_10 from '../../../backend/db/generated/_batch_10.js.ref'
-import batch_20 from '../../../backend/db/generated/_batch_20.js.ref'
-import batch_30 from '../../../backend/db/generated/_batch_30.js.ref'
-
-const DEFAULT_PID = 45
-
-export default {
-    name: 'HomeView',
-    components: { profileCardList, sidebar, mainNav },
-    data: () => ({
-        swipables: [],
-        loading: true,
-        pid: null
-    }),
-    mounted() {
-        // Uncomment below to use API
-        let pid
-        if(!loginHandler.currentProfileId) {
-            pid  = authHandler.currentUser?.pid || DEFAULT_PID
-        } else {
-            pid = loginHandler.currentProfileId
-        }
-        this.setPid(pid)
-
-        // Uncomment below to use for batch file data
-        // this.processProfilesFromBatch(this.parseBatch([batch_10, batch_20, batch_30]))
-
-        this.setupChatter()
-        this.setupToaster()
-    },
-    methods: {
-        setPid(pid) {
-            loginHandler.login(pid)
-            this.pid = loginHandler.currentProfileId
-            this.getQueue()
-        },
-        async getQueue() {
-            this.loading = true
-            try {
-                await loginHandler.getQueue()
-                this.swipables = loginHandler.queue
-            } catch (err) {
-                console.error(err)
-            }
-            this.loading = false
-        },
-        // For push notifications and chat 
-        setupToaster() {
-            const t = new StonkAlert(this.pid)
-        },
-        setupChatter() {
-            const c = new Chatter()
-            const testAccountUUID = import.meta.env.VITE_TEST_ACCOUNT_UUID
-            c.setup(testAccountUUID)
-            console.log('---')
-        },
-        // For Batch Data Parsing & Processing
-        parseBatch(allBatches) {
-            const finished = { profiles: [], users: [], responses: [] }
-            allBatches.forEach(batch => {
-                const split = batch.value.split('\n')
-                split.splice(0, 5)
-                split.unshift('{')
-                const p = JSON.parse(split.join(''))
-                finished.profiles = [...p.profiles, ...finished.profiles]
-                finished.users = [...p.users, ...finished.users]
-                finished.responses = [...p.responses, ...finished.responses]
-            })
-            // console.log('parsed batch', finished)
-            return finished
-        },
-        processProfilesFromBatch(parsed) {
-            const findUser = profile => {
-                return parsed.users.filter(u => u.user_id == profile.user_id)[0]
-            }
-            parsed.profiles.forEach(p => {
-                // console.log(parsed)
-                const user = findUser(p)
-                p.pid = p.profile_id
-                p.name = user.user_name
-                p.email = user.user_email
-                p.avatar = p.profile_media[0]
-                p.responses = parsed.responses.filter(
-                    r => r.profile_id == p.profile_id,
-                )
-                p.responses.forEach(r => {
-                    if (r.response_key_id == 7) {
-                        p.zipcode = r.val
-                    }
-                })
-                this.swipables.push(p)
-            })
-        },
-    },
-}
-</script>
-
-<style lang="postcss">
-main
-    position: relative
-    height: 100%
-    > article
-        height: 100%
-        width: 100%
-        flex-direction: column
-
-    input, button
-        position: relative
-        z-index: 1000
-</style>