fix: keep props reactive when passing it to composable

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

4 files changed, 16 insertions, 8 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 960c67c87..535db7157 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -250,6 +250,7 @@
 <script>
 import { frequently, EmojiIndex as EmojiIndexFactory } from 'emoji-mart-vue-fast'
 import data from 'emoji-mart-vue-fast/data/all.json'
+import { toRefs } from 'vue'
 
 import AccountIcon from 'vue-material-design-icons/Account.vue'
 import AlarmIcon from 'vue-material-design-icons/Alarm.vue'
@@ -462,6 +463,7 @@ export default {
 	emits: ['delete', 'update:isActionMenuOpen', 'update:isEmojiPickerOpen', 'update:isReactionsMenuOpen', 'update:isForwarderOpen', 'show-translate-dialog', 'reply', 'edit'],
 
 	setup(props) {
+		const { token, id } = toRefs(props)
 		const reactionsStore = useReactionsStore()
 		const { messageActions } = useIntegrationsStore()
 		const {
@@ -472,7 +474,7 @@ export default {
 			isFileShareWithoutCaption,
 			isConversationReadOnly,
 			isConversationModifiable,
-		} = useMessageInfo(props.token, props.id)
+		} = useMessageInfo(token, id)
 
 		return {
 			messageActions,
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 87217d8bf..7990c5b4c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -110,6 +110,7 @@
 
 <script>
 import emojiRegex from 'emoji-regex'
+import { toRefs } from 'vue'
 
 import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
 import CancelIcon from 'vue-material-design-icons/Cancel.vue'
@@ -245,10 +246,11 @@ export default {
 	},
 
 	setup(props) {
+		const { token, id } = toRefs(props)
 		const {
 			isEditable,
 			isFileShare,
-		} = useMessageInfo(props.token, props.id)
+		} = useMessageInfo(token, id)
 		return {
 			isInCall: useIsInCall(),
 			isEditable,
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 446edaebb..4dc7774cd 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -54,6 +54,8 @@ components.
 </template>
 
 <script>
+import { toRefs } from 'vue'
+
 import Close from 'vue-material-design-icons/Close.vue'
 import PencilIcon from 'vue-material-design-icons/Pencil.vue'
 
@@ -141,11 +143,12 @@ export default {
 	},
 
 	setup(props) {
+		const { token, id } = toRefs(props)
 		const chatExtrasStore = useChatExtrasStore()
 		const {
 			isFileShare,
 			isFileShareWithoutCaption,
-		} = useMessageInfo(props.token, props.id)
+		} = useMessageInfo(token, id)
 
 		return {
 			AVATAR,
diff --git a/src/composables/useMessageInfo.js b/src/composables/useMessageInfo.js
index 906bd6881..2bcc1d707 100644
--- a/src/composables/useMessageInfo.js
+++ b/src/composables/useMessageInfo.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { computed } from 'vue'
+import { computed, unref, ref } from 'vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import moment from '@nextcloud/moment'
@@ -17,12 +17,13 @@ const canEditMessage = getCapabilities()?.spreed?.features?.includes('edit-messa
 /**
  * Check whether the user can edit the message or not
  *
- * @param {string} token conversation token
- * @param {string} messageId message id to edit
- *
+ * @param {import('vue').Ref} tokenRef conversation token
+ * @param {import('vue').Ref} messageIdRef message id to edit
  * @return {import('vue').ComputedRef<boolean>}
  */
-export function useMessageInfo(token = null, messageId = null) {
+export function useMessageInfo(tokenRef = ref(null), messageIdRef = ref(null)) {
+	const token = unref(tokenRef)
+	const messageId = unref(messageIdRef)
 	const store = useStore()
 
 	// Get the conversation and message