:sparkles: working pubnub chat gui

frontend/src/router/index.js

     {
         path: '/chat/:tid',
         component: ChatView,
-        meta: { requiresAuth: true, requiresCompleteProfile: true },
+        meta: {
+            requiresAuth: true,
+            requiresCompleteProfile: true,
+            props: true,
+        },
     },
     {
         path: `/survey`,

frontend/src/services/chat.service.js

         // Setup the main channel
         //  subscriptions array will be built dynamically from the "this.groupings" object
         this.subscriptions = [MAIN_CHANNEL]
+
         this.listeners = {
             status: async e => {
                 // await this.publish(this.subscriptions[0], testMessage)
                 if (e.category !== 'PNConnectedCategory') return
             },
-            message: this._onMessage,
+            message: null, // Set manually in chat view
             presence: this._onPresence,
         }
     }
-    /**
-     * Callback that fires on every message
-     * @param {event} e
-     */
-    async _onMessage(e) {
-        if (e.message) {
-            console.log(
-                `received message: ${e.message.title} - ${e.message.description}`,
-                e,
-            )
-        }
-    }
     async _onPresence(e) {
         return
     }
+    setOnMessage(cb) {
+        this.listeners.message = cb
+    }
+
     async setup(uuid, groupings) {
         this.uuid = `${uuid}`
         this.provider = await setupPubnub(this.uuid)
     //  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(groupings) {
-        console.log(`fetched groupings for profileId: ${this.uusid}`, groupings)
         groupings.forEach(grouping => {
             this.subscriptions.push(grouping.grouping_name)
         })

frontend/src/views/ChatView.vue

 <template lang="pug">
-main.view--chat.f-col.start.w-full
+main.view--chat
     header 
         h2 Chat Page
  
         h3 {{ profile.id }} 
             span chatting with: {{ target.profile_id }}
         p subscriptions: {{ profile.chatter.subscriptions }}
-        p target: {{ target }}
-    
+
+        ul(id="messages").w-flex.column
+            li(v-for="message, i in messages" class="pa1")
+                w-card.w-flex.row
+                    article
+                        p {{ message.message }}
+                    footer
+                        p {{ message.publisher }} | {{ message.timetoken }}
+                        w-button(class="my12" @click="openDrawer = i" text) setting
+                    w-drawer(v-model="openDrawer" absolute width="160px")
+                        p some settings things
+
+        input(v-model="toSend" @keyup.enter="sendMessage")
+        button(@click="sendMessage") send
+
     p(v-else-if="profile.isLoggedIn && !target") No match found between profile {{ $route.params.tid }} and {{profile.id}}... 
     p(v-else) Loading...
 
     name: 'ProfileView',
     data: () => ({
         target: null,
+        toSend: '',
+        messages: [],
+        openDrawer: null,
     }),
     computed: {
         profile: () => currentProfile,
     },
     watch: {
-        async profile() {
-            await this.loadTargetProfile(this.$route.params.tid)
-            console.log('target :>> ', this.$route.params.tid)
+        profile() {
+            this.loadTargetProfile()
+            currentProfile.chatter.setOnMessage(this._onMessage)
         },
     },
-    async created() {
-        await this.loadTargetProfile()
+    created() {
+        this.loadTargetProfile()
+        currentProfile.chatter.setOnMessage(this._onMessage)
     },
     methods: {
-        async loadTargetProfile() {
+        /**
+         * Pubnub message callback fires when message event
+         * is detected. We define is HERE because we need the
+         * component state and `this` context
+         */
+        _onMessage(e) {
+            if (!e.message) return
+            this.messages.push(e)
+        },
+        getGrouping() {
+            return currentProfile.groupings.find(
+                g => g.profile.profile_id == this.$route.params.tid,
+            )
+        },
+        sendMessage() {
+            const grouping = this.getGrouping()
+            currentProfile.chatter.publish(grouping.grouping_name, this.toSend)
+            this.toSend = ''
+        },
+        loadTargetProfile() {
             try {
-                const match = this.profile.groupings.find(
-                    grouping =>
-                        grouping.profile.profile_id == this.$route.params.tid,
-                )
-                this.target = match.profile
+                const grouping = this.getGrouping()
+                if (!grouping) {
+                    throw `no match found for ${currentProfile.id.value}`
+                }
+
+                this.target = grouping.profile
             } catch (err) {
                 console.error(err)
             }