fix: Empty placeholder on message composer (#6560)

Author: diegolmello

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -43,19 +43,6 @@ const initialStoreState = () => {
 };
 initialStoreState();
 
-jest.mock('./hooks/useSubscription', () => ({
-	useSubscription: jest.fn(() => ({
-		rid: 'rid',
-		t: 'd',
-		tmid: undefined,
-		name: 'Rocket Chat',
-		fname: 'Rocket Chat',
-		usernames: ['user1', 'user2'],
-		prid: undefined,
-		federated: false
-	}))
-}));
-
 jest.mock('../../lib/database/services/Message', () => ({
 	getMessageById: (messageId: any) => ({
 		id: messageId,
@@ -75,6 +62,16 @@ jest.mock('../../lib/database/services/Message', () => ({
 const initialContext = {
 	rid: 'rid',
 	tmid: undefined,
+	room: {
+		rid: 'rid',
+		t: 'd',
+		tmid: undefined,
+		name: 'Rocket Chat',
+		fname: 'Rocket Chat',
+		usernames: ['user1', 'user2'],
+		prid: undefined,
+		federated: false
+	},
 	sharing: false,
 	action: null,
 	selectedMessages: [],

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -9,7 +9,7 @@ import I18n from '../../../i18n';
 import { IAutocompleteItemProps, IComposerInput, IComposerInputProps, IInputSelection, TSetInput } from '../interfaces';
 import { useAutocompleteParams, useFocused, useMessageComposerApi, useMicOrSend } from '../context';
 import { fetchIsAllOrHere, getMentionRegexp } from '../helpers';
-import { useSubscription, useAutoSaveDraft } from '../hooks';
+import { useAutoSaveDraft } from '../hooks';
 import sharedStyles from '../../../views/Styles';
 import { useTheme } from '../../../theme';
 import { userTyping } from '../../../actions/room';
@@ -38,19 +38,18 @@ const defaultSelection: IInputSelection = { start: 0, end: 0 };
 export const ComposerInput = memo(
 	forwardRef<IComposerInput, IComposerInputProps>(({ inputRef }, ref) => {
 		const { colors, theme } = useTheme();
-		const { rid, tmid, sharing, action, selectedMessages, setQuotesAndText } = useRoomContext();
+		const { rid, tmid, sharing, action, selectedMessages, setQuotesAndText, room } = useRoomContext();
 		const focused = useFocused();
 		const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
 		const autocompleteType = useAutocompleteParams()?.type;
 		const textRef = React.useRef('');
 		const firstRender = React.useRef(true);
 		const selectionRef = React.useRef<IInputSelection>(defaultSelection);
 		const dispatch = useDispatch();
-		const subscription = useSubscription(rid);
 		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 		let placeholder = tmid ? I18n.t('Add_thread_reply') : '';
-		if (subscription && !tmid) {
-			placeholder = I18n.t('Message_roomname', { roomName: (subscription.t === 'd' ? '@' : '#') + getRoomTitle(subscription) });
+		if (room && !tmid) {
+			placeholder = I18n.t('Message_roomname', { roomName: (room.t === 'd' ? '@' : '#') + getRoomTitle(room) });
 			if (!isTablet && placeholder.length > COMPOSER_INPUT_PLACEHOLDER_MAX_LENGTH) {
 				placeholder = `${placeholder.slice(0, COMPOSER_INPUT_PLACEHOLDER_MAX_LENGTH)}...`;
 			}
@@ -333,7 +332,7 @@ export const ComposerInput = memo(
 				setAutocompleteParams({ text: autocompleteText, type: ':' });
 				return;
 			}
-			if (lastWord.match(/^!/) && subscription?.t === 'l') {
+			if (lastWord.match(/^!/) && room?.t === 'l') {
 				setAutocompleteParams({ text: autocompleteText, type: '!' });
 				return;
 			}

app/containers/MessageComposer/hooks/index.ts

@@ -2,5 +2,4 @@ export * from './useAutocomplete';
 export * from './useAutoSaveDraft';
 export * from './useCanUploadFile';
 export * from './useChooseMedia';
-export * from './useSubscription';
 export * from './useMessage';

app/containers/MessageComposer/hooks/useSubscription.ts

@@ -6,6 +6,7 @@ export interface IRoomContext {
 	rid?: string;
 	t?: string;
 	tmid?: string;
+	room: any; // FIXME: type it properly after we migrate RoomView to hooks
 	sharing?: boolean;
 	action?: TMessageAction;
 	isAutocompleteVisible?: boolean;

app/views/RoomView/context.ts

@@ -1523,6 +1523,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				value={{
 					rid,
 					t,
+					room,
 					tmid: this.tmid,
 					sharing: false,
 					action,

app/views/RoomView/index.tsx

@@ -366,6 +366,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 					value={{
 						rid: room.rid,
 						t: room.t,
+						room,
 						tmid: this.getThreadId(thread),
 						sharing: true,
 						action: route.params?.action,