From 132853aa964c0928857eabb117e5b0ad1bd436f1 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Tue, 26 Dec 2023 14:08:25 -0300 Subject: [PATCH] fix: Displaying wrong composer for archived room (#31292) --- .changeset/thin-chairs-clean.md | 5 +++++ .../views/room/composer/ComposerArchived.tsx | 16 ++++++++++++++++ .../views/room/composer/ComposerContainer.tsx | 18 +++++++++++++----- .../hooks/useMessageComposerIsArchived.ts | 16 ++++++++++++++++ .../hooks/useMessageComposerIsReadOnly.ts | 15 ++++++--------- 5 files changed, 56 insertions(+), 14 deletions(-) create mode 100644 .changeset/thin-chairs-clean.md create mode 100644 apps/meteor/client/views/room/composer/ComposerArchived.tsx create mode 100644 apps/meteor/client/views/room/composer/hooks/useMessageComposerIsArchived.ts diff --git a/.changeset/thin-chairs-clean.md b/.changeset/thin-chairs-clean.md new file mode 100644 index 000000000000..0ad80730f293 --- /dev/null +++ b/.changeset/thin-chairs-clean.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Fixed the problem of displaying the wrong composer for archived room diff --git a/apps/meteor/client/views/room/composer/ComposerArchived.tsx b/apps/meteor/client/views/room/composer/ComposerArchived.tsx new file mode 100644 index 000000000000..d8e269f9986c --- /dev/null +++ b/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 ( + + {t('Room_archived')} + + ); +}; + +export default ComposerReadOnly; diff --git a/apps/meteor/client/views/room/composer/ComposerContainer.tsx b/apps/meteor/client/views/room/composer/ComposerContainer.tsx index 3988c080bff2..225ac00e13c7 100644 --- a/apps/meteor/client/views/room/composer/ComposerContainer.tsx +++ b/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 ; } - if (mustJoinWithCode) { - return ; - } - if (isReadOnly) { return ; } + if (isArchived) { + return ; + } + + if (mustJoinWithCode) { + return ; + } + if (isBlockedOrBlocker) { return ; } diff --git a/apps/meteor/client/views/room/composer/hooks/useMessageComposerIsArchived.ts b/apps/meteor/client/views/room/composer/hooks/useMessageComposerIsArchived.ts new file mode 100644 index 000000000000..d0214f37d960 --- /dev/null +++ b/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); +}; diff --git a/apps/meteor/client/views/room/composer/hooks/useMessageComposerIsReadOnly.ts b/apps/meteor/client/views/room/composer/hooks/useMessageComposerIsReadOnly.ts index 23a79b405c31..8f538bf493ad 100644 --- a/apps/meteor/client/views/room/composer/hooks/useMessageComposerIsReadOnly.ts +++ b/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); };