:recycle: integrating chat channel subscription with group creation

backend/lib/routes/membership/active.js

                 profileId,
                 membershipType,
             )
-
+            console.log('groupings :>> ', groupings)
             /**
              * Heavily process the result by storing just a profile_id
              * and attach complete profiles

backend/lib/services/membership.js

             profileId,
             type,
         )
+        console.log('dedupedGroupings :>> ', dedupedGroupings)
         /** Grab just the Groupings this id has a Membership for */
         return await Grouping.query()
             .whereIn('grouping_id', dedupedGroupings)

frontend/src/components/ProfileCardList.vue

                     h4 {{ profile.name }}
                     nav.swipe_icons
                         //- Accept
-                        button(@click="chat(profile.pid)") chat
                         button(@click="accept(profile.pid)") Accept
                         button(@click="view(profile.pid)") view
                         //- Pass
                     h4 {{ profile.name }}
                     nav.swipe_icons
                         button(@click="view(profile.pid)") view
-                        button(@click="chat(profile.pid)") chat
 </template>
 
 <script setup>
     // const charmander = await db.get(`/profile/{profile_id}/queue/{target_id}/delete?include_profile=true&reinsert=false`)
     // http://localhost:3001/api/profile/38/queue/9/delete?include_profile=true&reinsert=true
     const profileId = props.pid
-    updateQueueByProfileId(profileId, targetId, false)
-
-    postMembershipByProfileId({ profileId, targetId })
-
+    await updateQueueByProfileId(profileId, targetId, false)
+    const { membershipMatch, groupingName } = await postMembershipByProfileId({
+        profileId,
+        targetId,
+    })
+    console.log('membershipMatch :>> ', membershipMatch)
+    if (membershipMatch?.hasMatch) {
+        await subscribeToChat(groupingName)
+    }
     emit('reload')
 }
 
     router.push({ path: `/matches/${pid}` })
 }
 
-const chat = async targetId => {
+const subscribeToChat = async groupingName => {
     // create a chatter reference from the current profile
     const chatter = currentProfile.chatter
     // console.log('mock sender:', pid)
 
-    /**  publish a new message to the chatter with the channel and the message & title is optional
+    /**
+     * publish a new message to the chatter with the channel and the message & title is optional
      */
-    const res = await chatter.publish(chatter.subscriptions[1], {
+    // You MUST send chatter channels as an array
+    chatter.subscribe([groupingName])
+    const res = await chatter.publish(groupingName, {
         title: 'New Message',
-        description:
-            'This is the checking to see if we are subscribed to a channel!',
+        description: `This is the checking to see if we are subscribed to the ${groupingName} channel!`,
     })
     // PubNub response will be a timecode of when the message was published
     console.log('res:', res)

frontend/src/services/chat.service.js

     title: 'testing',
     description: 'hello world!',
 })
-const MAIN_CHANNEL = 'Channel-Barcelona'
+const MAIN_CHANNEL = 'Channel-Siimee'
 
 /** Singleton that holds all our chat information */
 class Chatter {
 
         // Setup the main channel
         //  subscriptions array will be built dynamically from the "this.groupings" object
-        this.subscriptions = [MAIN_CHANNEL, 'Channel-LosAngeles']
+        this.subscriptions = [MAIN_CHANNEL]
         this.listeners = {
             status: async e => {
-                await this.publish(this.subscriptions[0], testMessage)
+                // await this.publish(this.subscriptions[0], testMessage)
                 if (e.category !== 'PNConnectedCategory') return
             },
             message: this._onMessage,
         this.provider = await setupPubnub(this.uuid)
 
         //  step 1: build the this.groupings object from the backend
-        // ? .then() to wait for the groupings to be fetched before subscribing to channels
-        this.getGroupingsByProfileId(this.uuid).then(() => {
-            this._listenFor({ listeners: this.listeners })
-            this._subscribe(this.subscriptions)
-        })
-
-        console.log('this.subscriptions', this.subscriptions)
+        // ? .await for the groupings to be fetched before subscribing to channels
+        await this._setupAllChannels(this.uuid)
+        this._listenFor({ listeners: this.listeners })
+        this.subscribe(this.subscriptions)
     }
     /**
      * Send a message to a channel
      */
     async publish(channel, message) {
         console.log('publishing message to channel:', channel)
-        return await providerMethods['publish']({ channel, message })
+        return providerMethods.publish({ channel, message })
     }
     /**
      * Subscribe to a channels
      * Facade so we can hide provider specific methods
      * @param {array} channels
      */
-    _subscribe(channels) {
-        providerMethods['subscribe']({ channels })
+    subscribe(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 getGroupingsByProfileId(profileId) {
-        console.log('fetching groupings for profileId:', profileId)
+    async _setupAllChannels(profileId) {
         const groupings = await fetchMembershipsByProfileId(profileId)
-        this.groupings = groupings
-        this.createChannelNamesByGroupings(this.groupings)
-    }
-    // building a list of channel names from the groupings object.grouping_name
-    createChannelNamesByGroupings(groupings) {
-        groupings.forEach(item => {
-            this.subscriptions.push(item.grouping_name)
+        console.log(`fetched groupings for profileId: ${profileId}`, groupings)
+        groupings.forEach(grouping => {
+            this.subscriptions.push(grouping.grouping_name)
         })
     }
     stop() {

frontend/src/services/grouping.service.js

         grouping_type: groupingType,
         grouping_name: `${utcDateInSeconds}_${profileId}_${targetId}`,
     }
-    const createdMembershipRecord = await db.post(
+    const membershipMatch = await db.post(
         `/membership/${profileId}/join`,
         membership,
     )
-    console.warn(`${groupingType} created between ${profileId} and ${targetId}`)
-    return createdMembershipRecord
+    return { membershipMatch, groupingName: membership.grouping_name }
 }
 export { fetchMembershipsByProfileId, postMembershipByProfileId }