fix: Displaying wrong composer for archived room (#31292)

.changeset/thin-chairs-clean.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed the problem of displaying the wrong composer for archived room

apps/meteor/client/views/room/composer/ComposerArchived.tsx

@@ -0,0 +1,16 @@
+import { MessageFooterCallout, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import React from 'react';
+
+const ComposerReadOnly = (): ReactElement => {
+	const t = useTranslation();
+
+	return (
+		<MessageFooterCallout>
+			<MessageFooterCalloutContent>{t('Room_archived')}</MessageFooterCalloutContent>
+		</MessageFooterCallout>
+	);
+};
+
+export default ComposerReadOnly;

apps/meteor/client/views/room/composer/ComposerContainer.tsx

@@ -5,6 +5,7 @@ import React, { memo } from 'react';
 
 import { useRoom } from '../contexts/RoomContext';
 import ComposerAnonymous from './ComposerAnonymous';
+import ComposerArchived from './ComposerArchived';
 import ComposerBlocked from './ComposerBlocked';
 import ComposerFederation from './ComposerFederation';
 import ComposerJoinWithPassword from './ComposerJoinWithPassword';
@@ -14,6 +15,7 @@ import ComposerOmnichannel from './ComposerOmnichannel';
 import ComposerReadOnly from './ComposerReadOnly';
 import ComposerVoIP from './ComposerVoIP';
 import { useMessageComposerIsAnonymous } from './hooks/useMessageComposerIsAnonymous';
+import { useMessageComposerIsArchived } from './hooks/useMessageComposerIsArchived';
 import { useMessageComposerIsBlocked } from './hooks/useMessageComposerIsBlocked';
 import { useMessageComposerIsReadOnly } from './hooks/useMessageComposerIsReadOnly';
 
@@ -24,7 +26,9 @@ const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactE
 
 	const isAnonymous = useMessageComposerIsAnonymous();
 	const isBlockedOrBlocker = useMessageComposerIsBlocked({ subscription: props.subscription });
-	const isReadOnly = useMessageComposerIsReadOnly(room._id, props.subscription);
+	const isArchived = useMessageComposerIsArchived(room._id, props.subscription);
+	const isReadOnly = useMessageComposerIsReadOnly(room._id);
+
 	const isOmnichannel = isOmnichannelRoom(room);
 	const isFederation = isRoomFederated(room);
 	const isVoip = isVoipRoom(room);
@@ -45,14 +49,18 @@ const ComposerContainer = ({ children, ...props }: ComposerMessageProps): ReactE
 		return <ComposerAnonymous />;
 	}
 
-	if (mustJoinWithCode) {
-		return <ComposerJoinWithPassword />;
-	}
-
 	if (isReadOnly) {
 		return <ComposerReadOnly />;
 	}
 
+	if (isArchived) {
+		return <ComposerArchived />;
+	}
+
+	if (mustJoinWithCode) {
+		return <ComposerJoinWithPassword />;
+	}
+
 	if (isBlockedOrBlocker) {
 		return <ComposerBlocked />;
 	}

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsArchived.ts

@@ -0,0 +1,16 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { useCallback } from 'react';
+
+import { useReactiveValue } from '../../../../hooks/useReactiveValue';
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+
+export const useMessageComposerIsArchived = (rid: string, subscription?: ISubscription): boolean => {
+	const isArchived = useReactiveValue(
+		useCallback(
+			() => roomCoordinator.archived(rid) || Boolean(subscription && subscription.t === 'd' && subscription.archived),
+			[rid, subscription],
+		),
+	);
+
+	return Boolean(isArchived);
+};

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsReadOnly.ts

@@ -1,20 +1,17 @@
-import type { ISubscription, IUser } from '@rocket.chat/core-typings';
+import type { IUser } from '@rocket.chat/core-typings';
 import { Meteor } from 'meteor/meteor';
 import { useCallback } from 'react';
 
 import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
 
-export const useMessageComposerIsReadOnly = (rid: string, subscription?: ISubscription): boolean => {
-	const [isReadOnly, isArchived] = useReactiveValue(
+export const useMessageComposerIsReadOnly = (rid: string): boolean => {
+	const isReadOnly = useReactiveValue(
 		useCallback(
-			() => [
-				roomCoordinator.readOnly(rid, Meteor.users.findOne(Meteor.userId() as string, { fields: { username: 1 } }) as IUser),
-				roomCoordinator.archived(rid) || Boolean(subscription && subscription.t === 'd' && subscription.archived),
-			],
-			[rid, subscription],
+			() => roomCoordinator.readOnly(rid, Meteor.users.findOne(Meteor.userId() as string, { fields: { username: 1 } }) as IUser),
+			[rid],
 		),
 	);
 
-	return Boolean(isReadOnly || isArchived);
+	return Boolean(isReadOnly);
 };