Merge pull request #42 from Freegle/bugfix/messages-not-reactive

Fix issue with messages on myposts page being unreactive
Freegle · Oct 18, 2023 · ffa72cd · ffa72cd
2 parents fe82155 + de23361
commit ffa72cd
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 18 deletions.
diff --git a/components/MainHeader.vue b/components/MainHeader.vue
@@ -506,7 +506,7 @@ const distance = ref(1000)
 const logo = ref('/icon.png')
 const unreadNotificationCount = ref(0)
 const chatCount = ref(0)
-const activePostsCount = ref(0)
+const activePostsCount = computed(() => messageStore.activePostsCounter)
 const showAboutMeModal = ref(false)
 const mobileNav = ref(null)
 const countTimer = ref(null)
@@ -628,8 +628,6 @@ const getCounts = async () => {
       // cause Nuxt to bail out with JS errors.
       await newsfeedStore.fetchCount(false)
 
-      let messages = []
-
       if (
         route.path !== '/profile/' + myid.value &&
         !route.path.includes('/unsubscribe')
@@ -641,16 +639,7 @@ const getCounts = async () => {
         //
         // We also don't do this on unsubscribe pages as there are timing windows which can lead to the call
         // failing and consequent Sentry errors.
-        messages = await messageStore.fetchByUser(myid.value, true)
-      }
-
-      activePostsCount.value = 0
-
-      if (messages) {
-        // Count messages with no outcome
-        activePostsCount.value = messages.filter((msg) => {
-          return !msg.hasoutcome
-        }).length
+        await messageStore.fetchActivePostCount();
       }
 
       unreadNotificationCount.value = await notificationStore.fetchCount()

diff --git a/pages/myposts.vue b/pages/myposts.vue
@@ -139,7 +139,7 @@ const { showDonationAskModal } = useDonationAskModal()
 const myid = authStore.user?.id
 
 // `posts` holds both OFFERs and WANTEDs (both old and active)
-const posts = ref([])
+const posts = computed(() => messageStore.byUserList[myid])
 
 const offersLoading = ref(true)
 const wantedsLoading = ref(true)
@@ -148,7 +148,7 @@ if (myid) {
   offersLoading.value = true
   wantedsLoading.value = true
 
-  posts.value = await messageStore.fetchByUser(myid, false, true)
+  await messageStore.fetchByUser(myid, false, true)
 
   offersLoading.value = false
   wantedsLoading.value = false

diff --git a/stores/message.js b/stores/message.js
@@ -5,6 +5,7 @@ import api from '~/api'
 import { GROUP_REPOSTS, MESSAGE_EXPIRE_TIME } from '~/constants'
 import { useGroupStore } from '~/stores/group'
 import { APIError } from '~/api/BaseAPI'
+import { useAuthStore } from '~/stores/auth';
 
 export const useMessageStore = defineStore({
   id: 'message',
@@ -14,6 +15,7 @@ export const useMessageStore = defineStore({
 
     // In bounds
     bounds: {},
+    activePostsCounter: 0,
   }),
   actions: {
     init(config) {
@@ -188,7 +190,6 @@ export const useMessageStore = defineStore({
             }
           }
         }
-
         this.byUserList[userid] = messages
       } else if (this.byUserList[userid]) {
         // Fetch but don't wait
@@ -202,7 +203,6 @@ export const useMessageStore = defineStore({
               }
             }
           }
-
           this.byUserList[userid] = msgs
         })
 
@@ -215,14 +215,26 @@ export const useMessageStore = defineStore({
       await api(this.config).message.view(id)
     },
     async update(params) {
+      const authStore = useAuthStore()
+      const userUid = authStore.user?.id
       const data = await api(this.config).message.update(params)
 
       if (data.deleted) {
         // This can happen if we withdraw a post while it is pending.
         delete this.list[params.id]
+        if (userUid && this.byUserList[userUid]) {
+          this.byUserList[userUid] = this.byUserList[userUid].filter(message => message.id !== params.id);
+        }
       } else {
         // Fetch back the updated version.
-        await this.fetch(params.id, true)
+        const message = await this.fetch(params.id, true)
+        this.list[params.id] = message
+        if (userUid && this.byUserList[userUid]) {
+          const index = this.byUserList[userUid].findIndex(curMessage => curMessage.id === params.id)
+          if (index !== -1) {
+            this.byUserList[userUid][index] = message
+          }
+        }
       }
 
       return data
@@ -274,6 +286,13 @@ export const useMessageStore = defineStore({
     async intend(id, outcome) {
       await api(this.config).message.intend(id, outcome)
     },
+    async fetchActivePostCount() {
+      const authStore = useAuthStore()
+      const userUid = authStore.user?.id
+
+      const activeMessages = await api(this.config).message.fetchByUser(userUid, true);
+      this.activePostsCounter = Array.isArray(activeMessages) ? activeMessages.length : 0;
+    },
   },
   getters: {
     byId: (state) => {