:recycle: more simplifications | storing stating in components > large services

frontend/src/App.vue

@@ -1,6 +1,15 @@
 <template lang="pug">
-SideBar(v-if="showSidebar" :pid="pid" @updatePid="setPid" @hide="showSidebar = false")
-RouterView(:pid="pid" @show-sidebar="showSidebar = !showSidebar" @updatePid="setPid")
+SideBar(
+    v-if="showSidebar"
+    :pid="getPid"
+    @updatePid="setPid"
+    @hide="showSidebar = false"
+)
+RouterView(
+    :pid="getPid"
+    @updatePid="setPid"
+    @show-sidebar="showSidebar = !showSidebar"
+)
 </template>
 
 <script>
@@ -11,21 +20,27 @@ import SideBar from './components/SideBar.vue'
 import { Chatter, currentProfile, StonkAlert } from './services'
 import { surveyFactory } from './utils'
 
-const DEV = import.meta.env.VITE_DEV == 'true'
-const DEFAULT_PID = 45
+const DEV_MODE = import.meta.env.VITE_DEV == 'true'
+const DEV_PID = 45
 
 export default {
     components: { SideBar },
     data: () => ({
-        pid: null,
         showSidebar: false
     }),
+    computed: {
+        getPid: () => currentProfile.id.value
+    },
     async created() {
+        /** Get questions so we can compare against profile responses */
         await surveyFactory.getQuestions()
 
-        if(DEV) {
-            this.setPid(DEFAULT_PID)
-        }
+        /** 
+         * Development mode turns router guards off so
+         * we hard set the profile id instead of 
+         * using the login form
+        */
+        if(DEV_MODE) { this.setPid(DEV_PID) }
 
         this.setupChatter()
         this.setupToaster()
@@ -36,9 +51,8 @@ export default {
          * Sync up this components state with
          * the currentProfile handler
          */
-        setPid(pid) {
-            currentProfile.login(pid)
-            this.pid = currentProfile.id
+        setPid(profileId) {
+            currentProfile.login(profileId)
         },
 
         /**

frontend/src/services/login.service.js

@@ -1,12 +1,14 @@
+import { ref } from 'vue'
 import { fetchQueueByProfileId, fetchResponsesByProfileId } from '../services'
 import { surveyFactory } from '../utils'
 
 class Login {
     constructor() {
         this._loading = false
+        
+        // Make reactive with vue observer
+        this.id = ref(null)
 
-        this.id = null
-        this.queue = []
         this.matches = []
         this.responses = []
     }
@@ -14,14 +16,11 @@ class Login {
         return this._loading
     }
     isLoggedIn() {
-        return this.id != null
+        return this.id.value != null
     }
     isComplete() {
         return this.responses.length == surveyFactory.questions.length
     }
-    hasQueue() {
-        return this.queue.length && this.queue.length > 0
-    }
     hasMatches() {
         return this.matches.length && this.matches.length > 0
     } 
@@ -29,28 +28,15 @@ class Login {
         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
+    /**
+     * Login a profile id
+     */
+     async login(pid) {
+        this.id.value = parseInt(pid)
+        console.warn('logging in:', this.id.value)
+        return this.id.value
     }
-    _setQueue(queue) { this.queue = queue }
+    logout() { this.id.value = null }
 
     async getResponses() {
         try {
@@ -61,16 +47,6 @@ class Login {
         }
     }
     _setResponses(responses) { this.responses = responses }
-    
-    /**
-     * Login a profile id
-     */
-    async login(pid) {
-        console.warn('logging in:', pid)
-        this.id = parseInt(pid)
-        return this.id
-    }
-    logout() { this.id = null }
 }
 
 const currentProfile = new Login()

frontend/src/views/HomeView.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 main.view--home.f-col.start.w-full
     header
-        h2 home
+        h2 home - profile: {{ pid }}
 
-    article(v-if="!loading")
+    article(v-if="cards.length && !loading")
         ProfileCardList(:profiles="cards" :pid="pid" @reload-queue="getQueue")
 
     p(v-else) Loading...
@@ -30,11 +30,10 @@ export default {
         loading: true,
     }),
     watch: {
-        pid() {
-            this.getQueue()
-        },
+        /** Fetch the queue if pid changes */
+        async pid() { await this.getQueue() },
     },
-    async created() {
+    async mounted() {
         await this.getQueue()
     },
     methods: {
@@ -57,44 +56,6 @@ export default {
             }
             this.loading = false
         },
-
-        // 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>

frontend/src/views/MatchesView.vue

@@ -4,7 +4,7 @@ main.view--matches.f-col.start.w-full
         h2 Match Page
 
     article(v-if="!loading")
-        ProfileCardList(:profiles="profiles" :pid="pid" :is-grid="true")
+        ProfileCardList(:profiles="cards" :pid="pid" :is-grid="true")
     
     p(v-else) Loading...
     
@@ -24,40 +24,37 @@ export default {
         },
     },
     data: () => ({
-        matches: null,
+        cards: [],
         loading: true,
     }),
-    computed: {
-        profiles() {
-            if (this.loading || this.matches.length < 1) return []
-            return this.matches.map(m => {
+    watch: {
+        pid() { this.getMatches() },
+    },
+    async created() {
+        await this.getMatches()
+    },
+    methods: {
+        _reformatMatches(matches) {
+            return matches.map(m => {
                 return {
                     pid: m.profile.profile_id,
-                    avatar: m.profile.profile_media[0],
                     name: m.profile.user_name,
+                    avatar: m.profile.profile_media[0],
                 }
             })
         },
-    },
-    watch: {
-        pid() {
-            this.getMatches()
-        },
-    },
-    methods: {
         async getMatches() {
             this.loading = true
             try {
-                this.matches = await fetchMembershipsByProfileId(this.pid)
+                const matchList = await fetchMembershipsByProfileId(this.pid)
+                console.log('matchList :', matchList)
+                this.cards = this._reformatMatches(matchList)
             } catch (err) {
                 console.error(err)
             }
             this.loading = false
         },
     },
-    mounted() {
-        this.getMatches()
-    },
 }
 </script>