:recycle: integrating chat view into pairs and reworking pubnub

backend/docker-compose.yml

-version: "3"
+version: '3'
 
 services:
     siimee-db:
-        image: mariadb:latest
+        image: mariadb:10.7
         container_name: siimee-dev-mariadb
         volumes:
-          - siimee_db:/var/lib/mysql
+            - siimee_db:/var/lib/mysql
         environment:
-          MYSQL_ROOT_PASSWORD: "${DB_ROOT_PASSWORD}"
-          MYSQL_DATABASE: "${DB_NAME}"
+            MYSQL_ROOT_PASSWORD: '${DB_ROOT_PASSWORD}'
+            MYSQL_DATABASE: '${DB_NAME}'
         ports:
-          - "${DB_PORT}:3306"
+            - '${DB_PORT}:3306'
 
 volumes:
     siimee_db:

backend/knexfile.js

-require('dotenv').config({path: './server/.env'})
-// require('dotenv').config()
+require('dotenv').config()
 
 const local = {
     host: process.env.DB_HOST,
     user: process.env.DB_USER,
     password: process.env.DB_ROOT_PASSWORD,
     database: process.env.DB_NAME,
-    port: process.env.DB_PORT
+    port: process.env.DB_PORT,
 }
 const pscale = {
     host: process.env.PSCALE_DB_HOST ? process.env.PSCALE_DB_HOST : '127.0.0.1',
     user: process.env.PSCALE_DB_USER ? process.env.PSCALE_DB_USER : 'root',
-    password: process.env.PSCALE_DB_PASSWORD ? process.env.PSCALE_DB_PASSWORD : '', 
+    password: process.env.PSCALE_DB_PASSWORD
+        ? process.env.PSCALE_DB_PASSWORD
+        : '',
     database: process.env.PSCALE_DB_NAME,
-    port: process.env.PSCALE_DB_PORT ? process.env.PSCALE_DB_PORT : 3306
+    port: process.env.PSCALE_DB_PORT ? process.env.PSCALE_DB_PORT : 3306,
 }
 
-const connectionSettings = process.env.USE_LOCAL_DB == "true" ? local : pscale
+const connectionSettings = process.env.USE_LOCAL_DB == 'true' ? local : pscale
 
 module.exports = {
     development: {
         connection: connectionSettings,
         pool: {
             min: 2,
-            max: 10
+            max: 10,
         },
         migrations: {
-            directory: './db/migrations'
+            directory: './db/migrations',
         },
         seeds: {
-            directory: './db/seeds'
-        }
+            directory: './db/seeds',
+        },
     },
 }

backend/package-lock.json

             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001312",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
-            "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==",
+            "version": "1.0.30001423",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz",
+            "integrity": "sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==",
             "dev": true,
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/browserslist"
-            }
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                }
+            ]
         },
         "node_modules/chalk": {
             "version": "3.0.0",
             "dev": true
         },
         "caniuse-lite": {
-            "version": "1.0.30001418",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-            "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
+            "version": "1.0.30001423",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001423.tgz",
+            "integrity": "sha512-09iwWGOlifvE1XuHokFMP7eR38a0JnajoyL3/i87c8ZjRWRrdKo1fqjNfugfBD0UDBIOz0U+jtNhJ0EPm1VleQ==",
             "dev": true
         },
         "chalk": {

frontend/src/components/PairsList.vue

 section.pairs-list
     article(v-if='pairs.length')
         template(v-for='pair in pairs')
-            router-link.pair.w-flex.align-center.justify-space-around(:to='`/profile/${pair.profile.pid}`')
+            router-link.pair.w-flex.align-center.justify-space-around(
+                :to='`/profile/${pair.profile.pid}`'
+                v-if='tabName == "pending"'
+            )
+            router-link.pair.w-flex.align-center.justify-space-around(
+                :to='`/chat/${pair.profile.pid}`'
+                v-else
+            )
                 .dot--icon
                 .avatar
                 .idCard

frontend/src/entities/chat-message/chat-message.js

+/** @module entities/chat-message */
+
+import { chatMessageSchema } from './chat-message.schema.js'
+
+/** Class representing a grouping */
+class ChatMessage {
+    /**
+     * Create the chatMessage for pubnub
+     * @param {string} message you message
+     * @return {ChatMessage} the message instance object
+     */
+    constructor(message) {
+        this.description = message
+        this.type = this.constructor.name.toLowerCase()
+    }
+    /**
+     * validate this record
+     * @return {boolean} is it valid or not?
+     */
+    isValid() {
+        const validate = chatMessageSchema.validate(this)
+
+        /**
+         * Log out some useful error messages
+         * TODO: Send validate.error to logging error handler
+         */
+        if (validate.error) {
+            console.error(`error: ${validate.error} - ${this.type} validation`)
+        }
+
+        /** validate(this) always returns something so force it to a bool */
+        return !validate.error ? true : false
+    }
+}
+
+export { ChatMessage }

frontend/src/entities/chat-message/chat-message.schema.js

+/** @module entities/chatMessageSchema */
+import Joi from 'joi'
+
+/**
+ * chat message schema object
+ * for pubnub messages
+ * @constructor
+ */
+const chatMessageSchema = {
+    type: 'object',
+    properties: Joi.object().keys({
+        description: Joi.string(),
+    }),
+    /** fields required before saving */
+    required: ['description'],
+    validate(instance) {
+        return this.properties.validate(instance)
+    },
+}
+
+export { chatMessageSchema }

frontend/src/entities/chat-message/index.js

+export * from './chat-message.js'

frontend/src/entities/index.js

 export * from './survey/index.js'
 export * from './grouping/index.js'
 export * from './card/index.js'
+export * from './chat-message/index.js'

frontend/src/services/chat.service.js

 import PubNub from 'pubnub'
 
+import { ChatMessage } from '../entities'
+
+const MAIN_CHANNEL = 'Channel-Siimee'
+
 /**
  * Provider method holder
  * We always reference this object so
  *
  * This gets overloaded later in the program
  */
-const providerMethods = {
+const _providerMethods = {
     publish: () => console.error('no provider publish method set'),
     subscribe: () => console.error('no provider subscribe method set'),
     listen: () => console.error('no provider listen method set'),
 }
+
 /**
- *
- *
  * Breaking out as much pubnub specific flavor
  */
-const setupPubnub = async uuid => {
+const _setupPubnub = async uuid => {
     const publishKey = import.meta.env.VITE_PUBNUB_PUBLISH_KEY
     const subscribeKey = import.meta.env.VITE_PUBNUB_SUBSCRIBE_KEY
 
         uuid,
     })
     // Pass pubnub specific methods to our placeholder obj
-    providerMethods['publish'] = pubnubClient.publish
-    providerMethods['subscribe'] = pubnubClient.subscribe
-    providerMethods['listen'] = pubnubClient.addListener
+    _providerMethods['publish'] = pubnubClient.publish
+    _providerMethods['subscribe'] = pubnubClient.subscribe
+    _providerMethods['listen'] = pubnubClient.addListener
 
     return pubnubClient
 }
 
-class ChatMessage {
-    constructor(message) {
-        this.description = message
-    }
-}
-const MAIN_CHANNEL = 'Channel-Siimee'
-
 /** Singleton that holds all our chat information */
 class Chatter {
     /**
     constructor() {
         // Our pubnub instance
         this.provider = null
-
-        // UUID used to identify unique users
         this.uuid = null
-
-        // Setup the main channel
-        //  subscriptions array will be built dynamically from the "this.groupings" object
-        this.subscriptions = [MAIN_CHANNEL]
+        this._subscriptions = [MAIN_CHANNEL]
 
         this.listeners = {
             status: async e => {
             presence: this._onPresence,
         }
     }
+    get subscriptions() {
+        let truncated = this._subscriptions
+
+        // Do NOT include the main channel as part of subscriptions
+        const mainChanIndex = truncated.indexOf(MAIN_CHANNEL)
+        if (mainChanIndex > -1) {
+            truncated.splice(mainChanIndex, 1)
+        }
+
+        return truncated
+    }
     async _onPresence(e) {
+        console.log('presence :', e)
         return
     }
     setOnMessage(cb) {
 
     async setup(uuid, groupings) {
         this.uuid = `${uuid}`
-        this.provider = await setupPubnub(this.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(groupings)
         this._listenFor({ listeners: this.listeners })
-        this.subscribe({ channels: this.subscriptions })
+        this.subscribe({ channels: this._subscriptions })
         return this.subscriptions
     }
     /**
      * @return {object} timestamp
      */
     async publish(channel, message) {
-        return providerMethods.publish({
+        return _providerMethods.publish({
             channel,
             message: new ChatMessage(message),
         })
      * @param {array} channels
      */
     subscribe({ channels }) {
-        providerMethods.subscribe({ channels })
+        console.log('subscribing to:', channels)
+        _providerMethods.subscribe({ channels })
     }
     /**
      * Listen to events and set callbacks
      * Facade so we can hide provider specific methods
      */
     _listenFor({ listeners }) {
-        providerMethods.listen(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
     async _setupAllChannels(groupings) {
         groupings.forEach(grouping => {
-            this.subscriptions.push(grouping.grouping_name)
+            this._subscriptions.push(grouping.grouping_name)
         })
     }
     stop() {
-        this.subscriptions = [MAIN_CHANNEL]
+        this._subscriptions = [MAIN_CHANNEL]
         console.warn('chatter stop not implemented')
     }
 }
 
-export { Chatter }
+export { Chatter, MAIN_CHANNEL }

frontend/src/services/login.service.js

 
         this._loading.value = false
         console.warn('logged in:', this.isLoggedIn)
+        console.warn('subscribed to:', this.chatter.subscriptions)
         return this.id.value
     }
     logout() {
     async setupChatter() {
         this.chatter = new Chatter()
         // Use the reactive id object
-        const testAccountUUID = this.id.value
-        await this.chatter.setup(testAccountUUID, this.groupings)
+        await this.chatter.setup(this.id.value, this.groupings)
     }
 }
 

frontend/src/views/ChatView.vue

 <template lang="pug">
 main.view--chat
-    header 
-        h2 Chat Page
- 
-    article(v-if="profile.isLoggedIn && target")
-        h3 {{ profile.id }} 
-            span chatting with: {{ target.profile_id }}
+    header(v-if='profile')
+        p {{ profile.chatter }}
+        hr
+        p messages: {{ messages }}
+        hr
         p subscriptions: {{ profile.chatter.subscriptions }}
 
-        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
+    article(v-if='profile.isLoggedIn && target')
+        h3 {{ profile.id }}&nbsp;
+            span chatting with: {{ target.profile_id }}
+
+        ul#messages.w-flex.column
+            //- li.pa1(v-for='(message, i in messages)')
+            //-     w-card.w-flex.row
+            //-         article
+                //- p {{ message.message }}
+        //-             footer
+        //-                 p {{ message.publisher }} | {{ message.timetoken }}
+        //-                 w-button.my12(@click='openDrawer = i' text) setting
+        //-             w-drawer(absolute v-model='openDrawer' width='160px')
+        //-                 p some settings things
 
-        input(v-model="toSend" @keyup.enter="sendMessage")
-        button(@click="sendMessage") send
+        input(@keyup.enter='sendMessage' v-model='toSend')
+        button(@click='sendMessage') send
 
-    p(v-else-if="profile.isLoggedIn && !target") No match found between profile {{ $route.params.pid }} and {{profile.id}}... 
-    w-spinner(v-else bounce)
+    p(v-else-if='profile.isLoggedIn && !target') No match found between profile {{ $route.params.pid }} and {{ profile.id }}...
+    w-spinner(bounce v-else)
 
     MainNav
 </template>
             if (!e.message) return
             this.messages.push(e)
         },
+        // TODO: test this
         getGrouping() {
             return currentProfile.groupings.find(
-                g => g.profile.profile_id == this.$route.params.tid,
+                g => g.profile.profile_id == this.$route.params.pid,
             )
         },
         sendMessage() {
             currentProfile.chatter.publish(grouping.grouping_name, this.toSend)
             this.toSend = ''
         },
+        // TODO: test this
         loadTargetProfile() {
             try {
                 const grouping = this.getGrouping()
                 if (!grouping) {
                     throw `no match found for ${currentProfile.id.value}`
                 }
-
+                console.log('grouping :', grouping)
                 this.target = grouping.profile
             } catch (err) {
                 console.error(err)