From 8b104ebc029b990fdfe4938256cfae2d5a22c158 Mon Sep 17 00:00:00 2001 From: misterpekert Date: Thu, 12 Oct 2023 04:38:28 +0200 Subject: [PATCH 1/4] Fix issue with messages on myposts page being unreactive - use value from store instead of response from API - correctly update store when item is processed (withdraw/taken) closes #39 --- pages/myposts.vue | 4 ++-- stores/message.js | 47 ++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 46 insertions(+), 5 deletions(-) diff --git a/pages/myposts.vue b/pages/myposts.vue index 8689fcd2..07688593 100644 --- 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 index 0284e97d..2d106ebe 100644 --- 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', @@ -173,6 +174,16 @@ export const useMessageStore = defineStore({ }, async fetchByUser(userid, active, force) { let messages = [] + const findByIdAndUpdate = (messages) => { + messages.forEach((message) => { + const i = this.byUserList[userid].findIndex(curMessage => curMessage.id === message.id) + if (i !== -1) { + this.byUserList[userid][i] = message + } else { + this.byUserList[userid].push(message) + } + }) + } const promise = api(this.config).message.fetchByUser(userid, active) @@ -189,7 +200,11 @@ export const useMessageStore = defineStore({ } } - this.byUserList[userid] = messages + if (Array.isArray(this.byUserList[userid])) { + findByIdAndUpdate(messages) + } else { + this.byUserList[userid] = messages + } } else if (this.byUserList[userid]) { // Fetch but don't wait promise.then(async (msgs) => { @@ -203,7 +218,11 @@ export const useMessageStore = defineStore({ } } - this.byUserList[userid] = msgs + if (Array.isArray(this.byUserList[userid])) { + findByIdAndUpdate(msgs) + } else { + this.byUserList[userid] = msgs + } }) messages = this.byUserList[userid] @@ -215,14 +234,36 @@ export const useMessageStore = defineStore({ await api(this.config).message.view(id) }, async update(params) { + const authStore = useAuthStore() + const userUid = authStore.user?.id + const removeFromUserList = (id) => { + const index = this.byUserList[userUid].findIndex(curMessage => curMessage.id === id) + if (index !== -1) { + this.byUserList[userUid] = [ + ...this.byUserList[userUid].slice(0, index), + ...this.byUserList[userUid].slice(index + 1) + ] + } + } + 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]) { + removeFromUserList(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 From 3fac352cffcf0067976450eaca90c7e778ef1692 Mon Sep 17 00:00:00 2001 From: misterpekert Date: Thu, 12 Oct 2023 12:32:56 +0200 Subject: [PATCH 2/4] Update per message when `active: true`, otherwise just replace the list. --- stores/message.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stores/message.js b/stores/message.js index 2d106ebe..d6e2468e 100644 --- a/stores/message.js +++ b/stores/message.js @@ -200,7 +200,7 @@ export const useMessageStore = defineStore({ } } - if (Array.isArray(this.byUserList[userid])) { + if (Array.isArray(this.byUserList[userid]) && active) { findByIdAndUpdate(messages) } else { this.byUserList[userid] = messages @@ -218,7 +218,7 @@ export const useMessageStore = defineStore({ } } - if (Array.isArray(this.byUserList[userid])) { + if (Array.isArray(this.byUserList[userid]) && active) { findByIdAndUpdate(msgs) } else { this.byUserList[userid] = msgs From 701476b63ff9af26faa91837f5bf0f6d5c8fa224 Mon Sep 17 00:00:00 2001 From: misterpekert Date: Mon, 16 Oct 2023 01:07:41 +0200 Subject: [PATCH 3/4] use separate store method to handle activePosts count. --- components/MainHeader.vue | 15 ++------------- stores/message.js | 28 +++++++++++++++++----------- 2 files changed, 19 insertions(+), 24 deletions(-) diff --git a/components/MainHeader.vue b/components/MainHeader.vue index 0a1ff1a2..10d45f28 100644 --- 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/stores/message.js b/stores/message.js index d6e2468e..315426a7 100644 --- a/stores/message.js +++ b/stores/message.js @@ -15,6 +15,7 @@ export const useMessageStore = defineStore({ // In bounds bounds: {}, + activePostsCounter: 0, }), actions: { init(config) { @@ -236,23 +237,13 @@ export const useMessageStore = defineStore({ async update(params) { const authStore = useAuthStore() const userUid = authStore.user?.id - const removeFromUserList = (id) => { - const index = this.byUserList[userUid].findIndex(curMessage => curMessage.id === id) - if (index !== -1) { - this.byUserList[userUid] = [ - ...this.byUserList[userUid].slice(0, index), - ...this.byUserList[userUid].slice(index + 1) - ] - } - } - 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]) { - removeFromUserList(params.id) + this.byUserList[userUid] = this.byUserList[userUid].filter(message => message.id !== params.id); } } else { // Fetch back the updated version. @@ -315,6 +306,21 @@ 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 + + return api(this.config).message.fetchByUser(userUid, false) + .then(async (msgs) => { + for (const message of msgs) { + if (!message.hasoutcome) { + message.hasoutcome = await this.hasExpired(message) + } + } + return msgs; + }) + .then((messages) => { this.activePostsCounter = messages ? messages.filter(m => !m.hasoutcome).length : 0 }) + }, }, getters: { byId: (state) => { From de23361a6443d32fc5d2e047c0fbbfae9a220c98 Mon Sep 17 00:00:00 2001 From: misterpekert Date: Wed, 18 Oct 2023 09:26:28 +0200 Subject: [PATCH 4/4] - Remove updateById - When fetching for counter, fetch with active: true --- stores/message.js | 36 ++++-------------------------------- 1 file changed, 4 insertions(+), 32 deletions(-) diff --git a/stores/message.js b/stores/message.js index 315426a7..d8bc9702 100644 --- a/stores/message.js +++ b/stores/message.js @@ -175,16 +175,6 @@ export const useMessageStore = defineStore({ }, async fetchByUser(userid, active, force) { let messages = [] - const findByIdAndUpdate = (messages) => { - messages.forEach((message) => { - const i = this.byUserList[userid].findIndex(curMessage => curMessage.id === message.id) - if (i !== -1) { - this.byUserList[userid][i] = message - } else { - this.byUserList[userid].push(message) - } - }) - } const promise = api(this.config).message.fetchByUser(userid, active) @@ -200,12 +190,7 @@ export const useMessageStore = defineStore({ } } } - - if (Array.isArray(this.byUserList[userid]) && active) { - findByIdAndUpdate(messages) - } else { - this.byUserList[userid] = messages - } + this.byUserList[userid] = messages } else if (this.byUserList[userid]) { // Fetch but don't wait promise.then(async (msgs) => { @@ -218,12 +203,7 @@ export const useMessageStore = defineStore({ } } } - - if (Array.isArray(this.byUserList[userid]) && active) { - findByIdAndUpdate(msgs) - } else { - this.byUserList[userid] = msgs - } + this.byUserList[userid] = msgs }) messages = this.byUserList[userid] @@ -310,16 +290,8 @@ export const useMessageStore = defineStore({ const authStore = useAuthStore() const userUid = authStore.user?.id - return api(this.config).message.fetchByUser(userUid, false) - .then(async (msgs) => { - for (const message of msgs) { - if (!message.hasoutcome) { - message.hasoutcome = await this.hasExpired(message) - } - } - return msgs; - }) - .then((messages) => { this.activePostsCounter = messages ? messages.filter(m => !m.hasoutcome).length : 0 }) + const activeMessages = await api(this.config).message.fetchByUser(userUid, true); + this.activePostsCounter = Array.isArray(activeMessages) ? activeMessages.length : 0; }, }, getters: {