fix: move more computed props to composable and rename this latter.

Signed-off-by: DorraJaouad <[email protected]>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -462,10 +462,6 @@ export default {
 				&& this.messageType !== 'command'
 				&& this.messageType !== 'comment_deleted'
 		},
-
-		isFileShareOnly() {
-			return Object.keys(Object(this.messageParameters)).some(key => key.startsWith('file')) && this.message === '{file}'
-		},
 	},
 
 	mounted() {

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue

@@ -101,7 +101,7 @@
 						</template>
 						{{ t('spreed', 'Edit message') }}
 					</NcActionButton>
-					<NcActionButton v-if="!isFileShareOnly"
+					<NcActionButton v-if="!isFileShareWithoutCaption"
 						close-after-click
 						@click.stop="handleCopyMessageText">
 						<template #icon>
@@ -302,7 +302,7 @@ import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
 
-import { useEditMessage } from '../../../../../composables/useEditMessage.js'
+import { useMessageInfo } from '../../../../../composables/useMessageInfo.js'
 import { PARTICIPANT, CONVERSATION, ATTENDEE } from '../../../../../constants.js'
 import { getMessageReminder, removeMessageReminder, setMessageReminder } from '../../../../../services/remindersService.js'
 import { useIntegrationsStore } from '../../../../../stores/integrations.js'
@@ -482,13 +482,23 @@ export default {
 	setup(props) {
 		const reactionsStore = useReactionsStore()
 		const { messageActions } = useIntegrationsStore()
-		const isEditable = useEditMessage(props.token, props.id)
+		const {
+			isEditable,
+			isModifiable,
+			isMyMsg,
+			isFileShare,
+			isFileShareWithoutCaption,
+		 } = useMessageInfo(props.token, props.id)
 
 		return {
 			messageActions,
 			supportReminders,
 			reactionsStore,
 			isEditable,
+			isModifiable,
+			isMyMsg,
+			isFileShare,
+			isFileShareWithoutCaption,
 		}
 	},
 
@@ -518,10 +528,6 @@ export default {
 			return this.getMessagesListScroller()
 		},
 
-		isModifiable() {
-			return !this.isConversationReadOnly && this.conversation.participantType !== PARTICIPANT.TYPE.GUEST
-		},
-
 		isDeleteable() {
 			if (!this.isModifiable) {
 				return false
@@ -555,23 +561,10 @@ export default {
 			}
 		},
 
-		isFileShare() {
-			return Object.keys(Object(this.messageParameters)).some(key => key.startsWith('file'))
-		},
-
-		isFileShareOnly() {
-			return this.isFileShare && this.message === '{file}'
-		},
-
 		isCurrentGuest() {
 			return this.$store.getters.isActorGuest()
 		},
 
-		isMyMsg() {
-			return this.actorId === this.$store.getters.getActorId()
-				&& this.actorType === this.$store.getters.getActorType()
-		},
-
 		isConversationReadOnly() {
 			return this.conversation.readOnly === CONVERSATION.STATE.READ_ONLY
 		},

src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue

@@ -146,8 +146,8 @@ import Poll from './Poll.vue'
 import Quote from '../../../../Quote.vue'
 import CallButton from '../../../../TopBar/CallButton.vue'
 
-import { useEditMessage } from '../../../../../composables/useEditMessage.js'
 import { useIsInCall } from '../../../../../composables/useIsInCall.js'
+import { useMessageInfo } from '../../../../../composables/useMessageInfo.js'
 import { EventBus } from '../../../../../services/EventBus.js'
 import { parseSpecialSymbols, parseMentions } from '../../../../../utils/textParse.ts'
 
@@ -262,9 +262,14 @@ export default {
 	},
 
 	setup(props) {
+		const {
+			isEditable,
+			isFileShare,
+		} = useMessageInfo(props.token, props.id)
 		return {
 			isInCall: useIsInCall(),
-			isEditable: useEditMessage(props.token, props.id),
+			isEditable,
+			isFileShare,
 		}
 	},
 
@@ -279,7 +284,7 @@ export default {
 
 	computed: {
 		renderedMessage() {
-			if (this.isFileShareMessage && this.message !== '{file}') {
+			if (this.isFileShare && this.message !== '{file}') {
 				// Add a new line after file to split content into different paragraphs
 				return '{file}' + '\n\n' + this.message
 			} else {
@@ -295,10 +300,6 @@ export default {
 			return this.messageType === 'comment_deleted'
 		},
 
-		isFileShareMessage() {
-			return this.messageParameters?.file
-		},
-
 		isNewPollMessage() {
 			if (this.messageParameters?.object?.type !== 'talk-poll') {
 				return false
@@ -348,7 +349,7 @@ export default {
 		},
 
 		showLoadingIcon() {
-			return (this.isTemporary && !this.isFileShareMessage) || this.isDeleting
+			return (this.isTemporary && !this.isFileShare) || this.isDeleting
 		},
 
 		loadingIconTooltip() {

src/components/Quote.vue

@@ -47,7 +47,7 @@ components.
 				</div>
 			</div>
 			<!-- file preview-->
-			<NcRichText v-if="isFileShareMessage"
+			<NcRichText v-if="isFileShare"
 				text="{file}"
 				:arguments="richParameters" />
 			<!-- text -->
@@ -80,6 +80,7 @@ import AvatarWrapper from './AvatarWrapper/AvatarWrapper.vue'
 import DefaultParameter from './MessagesList/MessagesGroup/Message/MessagePart/DefaultParameter.vue'
 import FilePreview from './MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue'
 
+import { useMessageInfo } from '../composables/useMessageInfo.js'
 import { ATTENDEE, AVATAR } from '../constants.js'
 import { EventBus } from '../services/EventBus.js'
 import { useChatExtrasStore } from '../stores/chatExtras.js'
@@ -155,12 +156,18 @@ export default {
 		},
 	},
 
-	setup() {
+	setup(props) {
 		const chatExtrasStore = useChatExtrasStore()
+		const {
+			isFileShare,
+			isFileShareWithoutCaption,
+		} = useMessageInfo(props.token, props.id)
 
 		return {
 			AVATAR,
 			chatExtrasStore,
+			isFileShare,
+			isFileShareWithoutCaption,
 		}
 	},
 
@@ -189,14 +196,6 @@ export default {
 				&& this.actorType === this.$store.getters.getActorType()
 		},
 
-		isFileShareMessage() {
-			return Object.keys(Object(this.messageParameters)).some(key => key.startsWith('file'))
-		},
-
-		isFileShareWithoutCaption() {
-			return this.isFileShareMessage && this.message === '{file}'
-		},
-
 		richParameters() {
 			const richParameters = {}
 			Object.keys(this.messageParameters).forEach(function(p) {

src/composables/useConversationInfo.js

@@ -131,8 +131,18 @@ export function useConversationInfo({
 		})
 	})
 
+	const isOneToOne = computed(() => {
+		return [CONVERSATION.TYPE.ONE_TO_ONE, CONVERSATION.TYPE.ONE_TO_ONE_FORMER].includes(item.value.type)
+	})
+
+	const isConversationReadOnly = computed(() => {
+		return item.value.readOnly === CONVERSATION.STATE.READ_ONLY
+	})
+
 	return {
 		counterType,
 		conversationInformation,
+		isOneToOne,
+		isConversationReadOnly,
 	}
 }

src/composables/useEditMessage.js → src/composables/useMessageInfo.js

@@ -22,8 +22,9 @@ import { computed } from 'vue'
 import { getCapabilities } from '@nextcloud/capabilities'
 import moment from '@nextcloud/moment'
 
+import { useConversationInfo } from './useConversationInfo.js'
 import { useStore } from './useStore.js'
-import { CONVERSATION, PARTICIPANT } from '../constants.js'
+import { PARTICIPANT } from '../constants.js'
 
 /**
  * Check whether the user can edit the message or not
@@ -33,40 +34,52 @@ import { CONVERSATION, PARTICIPANT } from '../constants.js'
  *
  * @return {import('vue').ComputedRef<boolean>}
  */
-export function useEditMessage(token, messageId) {
+export function useMessageInfo(token = null, messageId = null) {
 	const store = useStore()
 
 	// Get the conversation and message
 	const conversation = computed(() => store.getters.conversation(token))
 	const message = computed(() => store.getters.message(token, messageId))
 
-	const isConversationReadOnly = computed(() => conversation.value.readOnly === CONVERSATION.STATE.READ_ONLY)
+	const {
+		isOneToOne,
+		isConversationReadOnly,
+	} = useConversationInfo({ item: conversation })
 
 	const isModifiable = computed(() =>
 		!isConversationReadOnly.value
-        && conversation.value.participantType !== PARTICIPANT.TYPE.GUEST)
+		&& conversation.value.participantType !== PARTICIPANT.TYPE.GUEST)
 
 	const isObjectShare = computed(() => Object.keys(Object(message.value.messageParameters)).some(key => key.startsWith('object')))
 
 	const isMyMsg = computed(() =>
 		message.value.actorId === store.getters.getActorId()
-        && message.value.actorType === store.getters.getActorType()
-	)
-
-	const isOneToOne = computed(() =>
-		conversation.value.type === CONVERSATION.TYPE.ONE_TO_ONE
-        || conversation.value.type === CONVERSATION.TYPE.ONE_TO_ONE_FORMER
+		&& message.value.actorType === store.getters.getActorType()
 	)
 
 	const canEditMessage = getCapabilities()?.spreed?.features?.includes('edit-messages')
 
-	return computed(() => {
+	const isEditable = computed(() => {
 		if (!canEditMessage || !isModifiable.value || isObjectShare.value
-            || ((!store.getters.isModerator || isOneToOne.value) && !isMyMsg.value)) {
+			|| ((!store.getters.isModerator || isOneToOne.value) && !isMyMsg.value)) {
 			return false
 		}
 
 		return (moment(message.value.timestamp * 1000).add(1, 'd')) > moment()
 	})
 
+	const isFileShare = computed(() => Object.keys(Object(message.value.messageParameters)).some(key => key.startsWith('file')))
+
+	const isFileShareWithoutCaption = computed(() => message.value.message === '{file}' && isFileShare.value)
+
+	return {
+		isEditable,
+		isMyMsg,
+		isObjectShare,
+		isModifiable,
+		isConversationReadOnly,
+		isFileShareWithoutCaption,
+		isFileShare,
+	}
+
 }