:sparkles: grabbing chat history | SIIMEE-T-82

frontend/src/components/ProfileCardList.vue

 
 <script setup>
 import { ref } from 'vue'
-import { currentProfile } from '../services'
 import { cardAspects } from '../entities'
 import ProfileCard from './ProfileCard.vue'
 
         ],
     },
 })
-
-/**
- * publish a new message to the chatter with the channel and the message & title is optional
- */
-const subscribeToChannel = async channelName => {
-    // You MUST send chatter channels as an array in an object
-    const channels = [channelName]
-    currentProfile.chatter.subscribe({ channels })
-}
 </script>
 
 <style lang="sass">

frontend/src/services/chat.service.js

         this.subscribe({ channels: this._subscriptions })
         return this.subscriptions
     }
+    async getHistory(channel, count = 10) {
+        console.warn('[chatter] grabbing history for channel:', channel)
+        let pastMessages = null
+        try {
+            pastMessages = await this.provider.fetchMessages({
+                channels: [channel],
+                count: count,
+                includeMessageType: true,
+                includeUUID: true,
+                includeMeta: true,
+                includeMessageActions: false,
+            })
+        } catch (error) {
+            console.error('[chatter]', error)
+        }
+        const channelHistory = pastMessages.channels[channel]
+        console.log('channelHistory :>> ', channelHistory)
+        return channelHistory
+            ? channelHistory.map(msg => ({
+                  publisher: msg.uuid,
+                  message: new ChatMessage(msg.message.description),
+                  timetoken: msg.timetoken,
+              }))
+            : []
+    }
     /**
      * Send a message to a channel
      * example = new ChatMessage({ title: 'example', description: 'ni' })
     /**
      * Subscribe to a channels
      * Facade so we can hide provider specific methods
-     * @param {array} channels
+     * @param {array} channels grouping name
      */
     subscribe({ channels }) {
         _providerMethods.subscribe({ channels })
     _listenFor({ listeners }) {
         _providerMethods.listen(listeners)
     }
-    //  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
+    /**
+     * Get all groupings for this profile and
+     * then store them as subscriptions
+     */
     async _setupAllChannels(groupings) {
         groupings.forEach(grouping => {
             this._subscriptions.push(grouping.grouping_name)

frontend/src/utils/db.js

 class Connector {
     constructor() {
         this.apiPrefix = prefix
+        this._verbs = {
+            get: 'GET',
+            post: 'POST',
+            patch: 'PATCH',
+        }
     }
-    async get(endpoint) {
+    _makeHeader({ method, payload }) {
         const header = { ...headerTemplate }
-        header.method = 'GET'
+        header.method = method
+        if (payload) {
+            header.body = JSON.stringify(payload)
+        }
+        return header
+    }
+    async _tryFetch({ endpoint, header }) {
         try {
-            // console.log(`${remote}${endpoint}`)
-            let res = await fetch(`${remote}${endpoint}`, header)
+            const res = await fetch(`${remote}${endpoint}`, header)
             if (!res.ok) {
                 throw Error(res.statusText)
             }
             console.error(`[API Util]: ${error}\nroute:`, endpoint)
         }
     }
+    async get(endpoint) {
+        return await this._tryFetch({
+            endpoint,
+            header: this._makeHeader(this._verbs.get),
+        })
+    }
     async post(endpoint, payload = {}) {
-        const header = { ...headerTemplate }
-        header.method = 'POST'
-        header.body = JSON.stringify(payload)
-        try {
-            let res = await fetch(`${remote}${endpoint}`, header)
-            if (!res.ok) {
-                throw Error(res.statusText)
-            }
-            const jsonRes = await res.json()
-            return jsonRes.data
-        } catch (error) {
-            console.error(error)
-        }
+        return await this._tryFetch({
+            endpoint,
+            header: this._makeHeader(this._verbs.post, payload),
+        })
     }
     async patch(endpoint, payload = {}) {
-        const header = { ...headerTemplate }
-        header.method = 'PATCH'
-        header.body = JSON.stringify(payload)
-        try {
-            let res = await fetch(`${remote}${endpoint}`, header)
-            if (!res.ok) {
-                throw Error(res.statusText)
-            }
-            const jsonRes = await res.json()
-            return jsonRes.data
-        } catch (error) {
-            console.error(error)
-        }
+        return await this._tryFetch({
+            endpoint,
+            header: this._makeHeader(this._verbs.patch, payload),
+        })
     }
 
     /** !: DEV ONLY */

frontend/src/utils/index.js

 import Joi from 'joi'
-import { Connector } from './db.js'
 import { SurveyFactory } from './survey.js'
 import { possible } from './lang.js'
 import { pidMixin, profileMixin } from './mixins.js'
     '97075',
 ]
 
-const api = new Connector('kittens')
-
 const validatorMapping = {
     'input-string': Joi.string(),
     'tag-cloud': Joi.string(),
 }
 
 export {
-    api,
     validatorMapping,
     surveyFactory,
     makeKebob,

frontend/src/utils/lang.js

         distance: 'distance',
         blurb: 'blurb',
         image: 'image',
-    }
+    },
 }
 
 const aspectResponses = {
         mostly: 'mostly',
         often: 'often',
         everytime: 'everytime',
-    }
+    },
 }
 
 const possible = {}
         'casually_browsing',
     ],
     // key 11
-    presence: [
-        'remote',
-        'in_person',
-        'hybrid',
-        'flexible'
-    ],
+    presence: ['remote', 'in_person', 'hybrid', 'flexible'],
     // key 10
-    duration: [
-        'full-time',
-        'part-time',
-        'contract',
-        'flexible',
-    ],
+    duration: ['full-time', 'part-time', 'contract', 'flexible'],
     // Experience and roles concat, key: 14
-    experience: [
-        'associate',
-        'junior',
-        'mid-level',
-        'senior',
-        'staff',
-    ],
+    experience: ['associate', 'junior', 'mid-level', 'senior', 'staff'],
     roles: {
         type: [
             'back-end',
             'manager',
             'technician',
         ],
-        candidate: [
-            'hiring_manager',
-            'recruiter',
-        ]
+        candidate: ['hiring_manager', 'recruiter'],
     },
-    pronouns: [
-        'she/her',
-        'she/they',
-        'he/him',
-        'he/they',
-        'they/them',
-    ],
+    pronouns: ['she/her', 'she/they', 'he/him', 'he/they', 'they/them'],
     image: [],
     zipcode: [],
-    blurb: []
+    blurb: [],
 }
 
-export { allSteps, aspectResponses, possible }
+export { allSteps, aspectResponses, possible, DELIMITER }

frontend/src/views/ChatView.vue

 <template lang="pug">
 main.view--chat
     header.mb6(v-if='profile && grouping')
-        h3 chatting with: {{ target.profile_id }}
-        p {{ grouping.profile.user_name }}
-        p {{ grouping.profile.user_email }}
-        p(v-if='!grouping._loading') {{ grouping.revealed }}
+        h3 chatting with:
+        p {{ target.profile_id }} | {{ grouping.profile.user_name }} | {{ grouping.profile.user_email }}
+
+        h3 logged in as:
+        p {{ profile.id }} | {{ profile._profile.user_name }} | {{ profile._profile.user_email }}
         //- p subscriptions: {{ profile.chatter.subscriptions }}
+        hr
 
-        .w-flex.column
-            p reveal: {{ grouping.revealed }}
+        .w-flex.column(v-if='!grouping._loading')
+            p you revealed: {{ grouping.revealed[profile.id.value].map(tag => tag.description) }}
             .w-flex.row
-                button(@click='reveal(7)') my name
-                button(@click='reveal(8)') my email
+                button(@click='reveal(7)') reveal my name
+                button(@click='reveal(8)') reveal my email
+            p they revealed: {{ grouping.revealed[target.profile_id].map(tag => tag.description) }}
 
     article
         template(v-if='isLoading')
                 template(v-for='chatmessage in messages')
                     li(
                         :class='[{ me: chatmessage.publisher == profile.id.value }, chatmessage.publisher]'
-                        v-if='chatmessage.message.description'
+                        v-if='chatmessage.message && chatmessage.message.description'
                     )
                         ChatBubble(
                             :message='chatmessage.message.description'
     MainNav
 </template>
 
-<script>
+<script lang="js">
 import ChatBubble from '../components/ChatBubble.vue'
 import { currentProfile } from '../services'
 import { mixins } from '../utils'
         target: null,
         toSend: '',
         messages: [],
-        openDrawer: null,
         grouping: null,
     }),
     watch: {
-        profile() {
+        async profile() {
             this.loadTargetProfile()
+            currentProfile._loading.value = true
+            this.messages = await currentProfile.chatter.getHistory(this.grouping.grouping_name)
             currentProfile.chatter.setOnMessage(this._onMessage)
+            currentProfile._loading.value = false
         },
     },
-    created() {
+    async created() {
         this.loadTargetProfile()
-        currentProfile.chatter.setOnMessage(this._onMessage)
+        currentProfile._loading.value = true
         this.grouping = this.getGrouping()
+        this.messages = await currentProfile.chatter.getHistory(this.grouping.grouping_name)
+        console.log('this.messages :>> ', this.messages)
+        currentProfile.chatter.setOnMessage(this._onMessage)
+        currentProfile._loading.value = false
     },
     methods: {
         async reveal(tagId) {