:recycle: making tag list reactive

frontend/src/entities/grouping/grouping.js

@@ -1,5 +1,6 @@
 /** @module entities/grouping */
 
+import { ref } from 'vue'
 import { _baseRecord } from '../index.js'
 import { groupingSchema } from './grouping.schema.js'
 import { revealProfileInfo } from '../../services/profile.service.js'
@@ -14,6 +15,7 @@ class Grouping extends _baseRecord {
      */
     constructor({ ...membership }) {
         super()
+        this._loading = ref(true)
 
         this.type = this.constructor.name.toLowerCase()
         this.tags = []
@@ -41,7 +43,26 @@ class Grouping extends _baseRecord {
         return [this.profile.profile_id]
     }
     async reveal(profileId, tagId) {
-        return await revealProfileInfo(this.grouping_id, profileId, tagId)
+        console.log('[Grouping Entity log]: Attempting to reveal...', tagId)
+        this._loading.value = true
+        try {
+            const revealed = await revealProfileInfo(
+                this.grouping_id,
+                profileId,
+                tagId,
+            )
+            if (!revealed.tags) {
+                throw `[Grouping Entity error]: Could not reveal ${tagId} for ${profileId}`
+            }
+            // Overwrite with new revealed tags completely
+            const toKeep = this.tags.filter(
+                assoc => assoc.profile_id != profileId,
+            )
+            this.tags = [...toKeep, ...revealed.tags]
+        } catch (err) {
+            console.error(err)
+        }
+        this._loading.value = false
     }
     /**
      * validate this record

frontend/src/entities/grouping/grouping.schema.js

@@ -10,6 +10,9 @@ import Joi from 'joi'
 const groupingSchema = {
     type: 'object',
     properties: Joi.object().keys({
+        /** for vue reactivity */
+        _loading: Joi.object(),
+
         /** _baseRecord fields */
         createdAt: Joi.string(),
         _id: Joi.string(),

frontend/src/services/grouping.service.js

@@ -25,7 +25,7 @@ const fetchMembershipsByProfileId = async profileId => {
                     `/profile/${profileId}/tags/${grouping.grouping_id}`,
                 )
                 grouping.tags = [...targetTags, ...profileTags]
-                console.log('grouping.tags :>> ', grouping.tags)
+                grouping._loading.value = false
                 validGroupingInstances.push(grouping)
             }
         }

frontend/src/views/ChatView.vue

@@ -4,8 +4,9 @@ main.view--chat
         h3 chatting with: {{ target.profile_id }}
         p {{ grouping.profile.user_name }}
         p {{ grouping.profile.user_email }}
-        p {{ grouping.profile }}
+        p(v-if='!grouping._loading') {{ grouping.revealed }}
         //- p subscriptions: {{ profile.chatter.subscriptions }}
+
         .w-flex.column
             p reveal: {{ grouping.revealed }}
             .w-flex.row
@@ -54,16 +55,8 @@ export default {
         toSend: '',
         messages: [],
         openDrawer: null,
+        grouping: null,
     }),
-    computed: {
-        grouping() {
-            return this.profile.groupings.find(profileGrouping =>
-                profileGrouping.participants.includes(
-                    parseInt(this.$route.params.pid),
-                ),
-            )
-        },
-    },
     watch: {
         profile() {
             this.loadTargetProfile()
@@ -73,15 +66,12 @@ export default {
     created() {
         this.loadTargetProfile()
         currentProfile.chatter.setOnMessage(this._onMessage)
+        this.grouping = this.getGrouping()
     },
     methods: {
         async reveal(tagId) {
-            console.log('trying to reveal')
-            const thing = await this.grouping.reveal(
-                currentProfile.id.value,
-                tagId,
-            )
-            console.log('thing :>> ', thing)
+            const grouping = this.getGrouping()
+            await grouping.reveal(currentProfile.id.value, tagId)
         },
         /**
          * Pubnub message callback fires when message event