:recycle: using groupings to create matches list | cleaning up login conditions to better display subscriptions | tracking groupings on login state

frontend/src/App.vue

 <template lang="pug">
 w-app
-    div.nav(v-if="isLoggedIn" style="display: flex; justify-content: space-between;")
+    .nav(v-if="profile.isLoggedIn" style="display: flex; justify-content: space-between;")
         header
-            h2 home - profile: {{ getPid }}
+            h2 current - profile: {{ profile.id }}
         w-drawer(v-model="openDrawer")
-            SideBar(
-                :pid="getPid"
-                @updatePid="setPid"
-                @hide="showSidebar = false"
-            )
+            SideBar(@updatePid="setPid" :pid="profile.id.value")
         w-button(@click="openDrawer = true" outline="")
             | Active Chats
+
     RouterView(
-        v-if="isLoggedIn"
-        :pid="getPid"
+        v-if="profile.isLoggedIn"
+        :pid="profile.id.value"
         @updatePid="setPid"
         @show-sidebar="showSidebar = !showSidebar"
     )
 export default {
     components: { SideBar },
     data: () => ({
-        showSidebar: false,
         sliderVal: 1,
         openDrawer: false,
     }),
     computed: {
-        getPid: () => {
-            return currentProfile.id.value ? currentProfile.id.value : null
-        },
-        isLoggedIn: () => {
-            return currentProfile.isLoggedIn
+        profile: () => {
+            return currentProfile
         },
     },
     async created() {
          * using the login form
          */
         if (DEV_MODE) {
-            this.setPid(DEV_PID)
+            await this.setPid(DEV_PID)
         }
     },
     methods: {
             }
             await currentProfile.login(profileId, this.$waveui.notify)
             console.log('---')
-            //  step 3: subscribe to the this.subscriptions array
-            // view current subscriptions on the currentProfile.chatter.subscriptions
-            console.log('subscriptions', currentProfile.chatter.subscriptions)
         },
     },
 }

frontend/src/components/Messages.vue

 .sidebar--messages
   h5.message__title messages from matches
   router-link(
-        :to="`/chats/${profile.profile_id}`" 
-        v-for='profile in matches' 
-        :key='profile.profile_id' 
-        :class="[pid == profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
+        :to="`/chats/${match.profile.profile_id}`" 
+        v-for='match in matches' 
+        :key='match.profile.profile_id' 
+        :class="[pid == match.profile.profile_id ? 'active' : '', 'sidebar__message', 'f-col', 'start']"
     )
-    img(:src='profile.avatar' style="max-height:100px")
+    img(:src='match.profile.avatar' style="max-height:100px")
     .message__right
-        h4.message__name {{ profile.name }}
-        p.message__content {{ profile.metadata.rawMetadata || "Hello I'm using tinder!" }}
+        h4.message__name {{ match.profile.name }}
+        p.message__content {{ match.profile }}
 </template>
 
 <script>

frontend/src/components/SideBar.vue

 <template lang="pug">
 aside.sidebar
+    p(v-if="profile.isLoggedIn") chans: {{profile.groupings}}
     .temp-control-box
         input(v-model="switchToPID" @keyup.enter="$emit('updatePid', switchToPID)")
         button(@click="$emit('updatePid', switchToPID)") switch profile
 </template>
 
 <script>
+import { currentProfile } from '../services'
 import Messages from './Messages.vue'
 import { mixins } from '../utils'
 
     mixins: [mixins.pidMixin],
     data: () => ({
         switchToPID: null,
-        matches: [
-            {
-                name: 'Bob McRob',
-                profile_id: 111,
-                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
-                metadata: { rawMetadata: 'howdy howdy howdy' },
-            },
-            {
-                name: 'Rob Bebob',
-                profile_id: 112,
-                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
-                metadata: { rawMetadata: 'this is the last message' },
-            },
-        ],
     }),
+    computed: {
+        profile: () => currentProfile,
+        matches: () =>
+            currentProfile.groupings.filter(g => g.grouping_type == 'match'),
+    },
     mounted() {
         // Set the form to display the default pid set in Home.vue
         this.switchToPID = this.pid

frontend/src/services/chat.service.js

 import PubNub from 'pubnub'
 
-// custom services
-import { fetchMembershipsByProfileId } from '../services/grouping.service'
-
 /**
  * Provider method holder
  * We always reference this object so
     async _onPresence(e) {
         return
     }
-    async setup(uuid) {
+    async setup(uuid, groupings) {
         this.uuid = `${uuid}`
         this.provider = await setupPubnub(this.uuid)
 
         //  step 1: build the this.groupings object from the backend
         // ? .await for the groupings to be fetched before subscribing to channels
-        await this._setupAllChannels(this.uuid)
+        await this._setupAllChannels(groupings)
         this._listenFor({ listeners: this.listeners })
         this.subscribe({ channels: this.subscriptions })
+        return this.subscriptions
     }
     /**
      * Send a message to a channel
     }
     //  step 2: build the this.subscriptions array from the this.groupings object
     // fetch all groupings for this profile and then store them in the chatter groupings object for reference
-    async _setupAllChannels(profileId) {
-        const groupings = await fetchMembershipsByProfileId(profileId)
-        console.log(`fetched groupings for profileId: ${profileId}`, groupings)
+    async _setupAllChannels(groupings) {
+        console.log(`fetched groupings for profileId: ${this.uusid}`, groupings)
         groupings.forEach(grouping => {
             this.subscriptions.push(grouping.grouping_name)
         })
     }
     stop() {
+        this.subscriptions = [MAIN_CHANNEL]
         console.warn('chatter stop no implemented')
     }
 }

frontend/src/services/login.service.js

 import { ref } from 'vue'
-import { fetchResponsesByProfileId, Chatter, StonkAlert } from '../services'
+import {
+    fetchMembershipsByProfileId,
+    fetchResponsesByProfileId,
+    Chatter,
+    StonkAlert,
+} from '../services'
 import { surveyFactory } from '../utils'
 
-
 /**
  * Logged in profile state manager
  * Sort of a util and service hybrid
  */
 class Login {
     constructor() {
-        this._loading = false
+        this._loading = ref(true)
 
         // Make reactive with vue observer
         this.id = ref(null)
 
+        this.groupings = []
         this.responses = []
         this.tags = []
 
         this.chatter = null
     }
     get isLoading() {
-        return this._loading
+        return this._loading.value
     }
     /**
      * Track login separate from complete-ess
      * @returns {boolean}
      */
     get isLoggedIn() {
-        return this.id.value != null
+        return this.id.value != null && this.isLoading == false
     }
     /**
      * Combine questions retrieved from the database and
      * @returns {number} stored reactive id
      */
     async login(profileId, cb) {
+        this._loading.value = true
+
         console.warn('logging in:', profileId)
         this.id.value = parseInt(profileId)
 
-        this.setupChatter()
+        await this.getGroupings()
+
+        await this.setupChatter()
         this.setupToaster(cb)
 
+        this._loading.value = false
+        console.warn('logged in:', this.isLoggedIn)
         return this.id.value
     }
     logout() {
 
     async getResponses() {
         try {
-            const responseList = await fetchResponsesByProfileId(this.id)
+            const responseList = await fetchResponsesByProfileId(this.id.value)
             this.setResponses(responseList)
         } catch (err) {
             console.error(err)
     setResponses(responses) {
         this.responses = responses
     }
+
+    async getGroupings() {
+        try {
+            this.groupings = await fetchMembershipsByProfileId(this.id.value)
+        } catch (err) {
+            console.error(err)
+        }
+    }
     /**
      * For push notifications and chat
      */
     setupToaster(waveCb) {
         this.toaster = new StonkAlert(this.id.value, waveCb)
     }
-    setupChatter() {
+    async setupChatter() {
         this.chatter = new Chatter()
         // Use the reactive id object
         const testAccountUUID = this.id.value
-        this.chatter.setup(testAccountUUID)
+        await this.chatter.setup(testAccountUUID, this.groupings)
     }
-
-    
 }
 
 const currentProfile = new Login()

frontend/src/utils/mixins.js

         pid: {
             type: Number,
             required: true,
-            validator: prop => typeof prop === 'number' || prop === null
+            validator: prop => typeof prop === 'number' || prop === null,
         },
-    }
+    },
 }
 
 const cardMixin = {
     }),
     watch: {
         /** Fetch the queue if pid changes */
-        pid() { this.getCards() },
+        pid() {
+            this.getCards()
+        },
     },
     async created() {
         await this.getCards()
     methods: {
         _reformat(data, mapCb) {
             return data.map(mapCb)
-        }
-    }
+        },
+    },
 }
 
-export { pidMixin, cardMixin }
+export { pidMixin, cardMixin }

frontend/src/views/ChatView.vue

     header 
         h2 Chat Page
  
-    article(v-if="!loading")
+    article(v-if="!loading && target && profile.isLoggedIn")
         h3 {{ profile.id }} 
             span chatting with: {{ target.profile_id }}
         p subscriptions: {{ profile.chatter.subscriptions }}
+    
     p(v-else) Loading...
 
     MainNav(@show-sidebar="$emit('show-sidebar')")
     data: () => ({
         loading: true,
         target: {},
-        profile: currentProfile,
     }),
-    created() {
-        this.getProfile()
+    computed: {
+        profile: () => currentProfile,
+    },
+    watch: {
+        async profile() {
+            await this.loadTargetProfile(this.$route.params.tid)
+            console.log('target :>> ', this.$route.params.tid)
+        },
+    },
+    async created() {
+        await this.loadTargetProfile()
     },
     methods: {
-        async getProfile() {
+        async loadTargetProfile() {
             this.loading = true
             try {
                 this.target = await fetchProfileByProfileId(