refactor: migrate RoomView to a function component

.rnstorybook/preview.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import type { Preview } from '@storybook/react';
 import { Provider } from 'react-redux';
 
-import { themes } from '../app/lib/constants/colors';
-import MessageContext from '../app/containers/message/Context';
 import { selectServerRequest } from '../app/actions/server';
 import { mockedStore as store } from '../app/reducers/mockedStore';
 import { setUser } from '../app/actions/login';
@@ -19,26 +17,7 @@ const preview: Preview = {
 	decorators: [
 		Story => (
 			<Provider store={store}>
-				<MessageContext.Provider
-					value={{
-						user: {
-							id: 'y8bd77ptZswPj3EW8',
-							username: 'diego.mello',
-							token: 'abc'
-						},
-						baseUrl,
-						onPress: () => {},
-						onLongPress: () => {},
-						reactionInit: () => {},
-						onErrorPress: () => {},
-						replyBroadcast: () => {},
-						onReactionPress: () => {},
-						onDiscussionPress: () => {},
-						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.badgeBackgroundLevel1
-					}}>
-					<Story />
-				</MessageContext.Provider>
+				<Story />
 			</Provider>
 		)
 	]

CLAUDE.md

@@ -9,7 +9,7 @@ Rocket.Chat React Native mobile client. Single-package React Native app (not a m
 - React 19.1, React Native 0.81, Expo 54
 - TypeScript with strict mode, baseUrl set to `app/` (imports resolve from there)
 - Node: engines `>=18`, volta pins 24.13.1
-- Read UBIQUITOUS_LANGUAGE.md
+- Read CONTEXT.md
 
 ## Commands
 

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -10,9 +10,10 @@ import { selectServerRequest } from '../../actions/server';
 import { setUser } from '../../actions/login';
 import { mockedStore } from '../../reducers/mockedStore';
 import { type IPermissionsState } from '../../reducers/permissions';
-import { type IMessage, type IShareAttachment } from '../../definitions';
+import { type IMessage, type IShareAttachment, type TMessageActionState } from '../../definitions';
 import { colors } from '../../lib/constants/colors';
-import { type IRoomContext, RoomContext } from '../../views/RoomView/context';
+import { type ComposerState, ComposerProvider } from '../../views/RoomView/stores/ComposerStore';
+import { MessageActionProvider } from '../message/stores/MessageActionStore';
 import * as EmojiKeyboardHook from './hooks/useEmojiKeyboard';
 import { initStore } from '../../lib/store/auxStore';
 import { searchRemote } from '../../lib/methods/search';
@@ -110,24 +111,32 @@ const initialContext = {
 		federated: false
 	},
 	sharing: false,
-	action: null,
-	selectedMessages: [],
 	editCancel: jest.fn(),
 	editRequest: jest.fn(),
 	onSendMessage: jest.fn(),
 	onRemoveQuoteMessage: jest.fn()
 };
 
-const Render = ({ context, children }: { context?: Partial<IRoomContext>; children?: ReactElement }) => (
+const Render = ({
+	context,
+	action,
+	children
+}: {
+	context?: Partial<ComposerState>;
+	action?: TMessageActionState;
+	children?: ReactElement;
+}) => (
 	<Provider store={mockedStore}>
-		<RoomContext.Provider value={{ ...initialContext, ...context }}>
-			<MessageComposerContainer>
-				<>
-					<ComposerAttachments />
-					{children}
-				</>
-			</MessageComposerContainer>
-		</RoomContext.Provider>
+		<MessageActionProvider initialAction={action}>
+			<ComposerProvider {...initialContext} {...context}>
+				<MessageComposerContainer>
+					<>
+						<ComposerAttachments />
+						{children}
+					</>
+				</MessageComposerContainer>
+			</ComposerProvider>
+		</MessageActionProvider>
 	</Provider>
 );
 
@@ -639,7 +648,7 @@ describe('MessageComposer', () => {
 		const id = 'messageId';
 		beforeEach(() => {
 			return renderAndFlush(
-				<Render context={{ rid: 'rid', selectedMessages: [id], action: 'edit', onSendMessage, editCancel, editRequest }} />
+				<Render context={{ rid: 'rid', onSendMessage, editCancel, editRequest }} action={{ kind: 'edit', messageId: id }} />
 			);
 		});
 		test('init', async () => {
@@ -671,7 +680,7 @@ describe('MessageComposer', () => {
 		const editRequest = jest.fn();
 		const id = 'image';
 		test('edit image', async () => {
-			await renderAndFlush(<Render context={{ rid: 'rid', selectedMessages: [id], action: 'edit', editRequest }} />);
+			await renderAndFlush(<Render context={{ rid: 'rid', editRequest }} action={{ kind: 'edit', messageId: id }} />);
 			await screen.findByTestId('message-composer');
 			await user.press(screen.getByTestId('message-composer-send'));
 			expect(editRequest).toHaveBeenCalledWith({ id, msg: `Attachment description for ${id}`, rid: 'rid' });
@@ -703,14 +712,14 @@ describe('MessageComposer', () => {
 
 	describe('Quote', () => {
 		test('Add quote `abc`', async () => {
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc'] }} />);
+			render(<Render action={{ kind: 'quote', messageIds: ['abc'] }} />);
 			await screen.findByTestId('composer-quote-abc');
 			expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
 			expect(screen.toJSON()).toMatchSnapshot();
 		});
 
 		test('Add quote `def`', async () => {
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'] }} />);
+			render(<Render action={{ kind: 'quote', messageIds: ['abc', 'def'] }} />);
 			await screen.findByTestId('composer-quote-abc');
 			expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
 			expect(screen.queryByTestId('composer-quote-def')).toBeOnTheScreen();
@@ -719,7 +728,7 @@ describe('MessageComposer', () => {
 
 		test('Remove a quote', async () => {
 			const onRemoveQuoteMessage = jest.fn();
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'], onRemoveQuoteMessage }} />);
+			render(<Render context={{ onRemoveQuoteMessage }} action={{ kind: 'quote', messageIds: ['abc', 'def'] }} />);
 			await screen.findByTestId('composer-quote-def');
 			await user.press(screen.getByTestId('composer-quote-remove-def'));
 			expect(onRemoveQuoteMessage).toHaveBeenCalledTimes(1);

app/containers/MessageComposer/MessageComposer.tsx

@@ -4,7 +4,15 @@ import { useBackHandler } from '@react-native-community/hooks';
 import { Q } from '@nozbe/watermelondb';
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
-import { useRoomContext } from '../../views/RoomView/context';
+import {
+	useComposerRid,
+	useComposerSharing,
+	useComposerTmid,
+	useEditRequest,
+	useOnSendMessage,
+	useSetQuotesAndText
+} from '../../views/RoomView/stores/ComposerStore';
+import { useMessageAction } from '../message/stores/MessageActionStore';
 import { Autocomplete } from './components';
 import { MIN_HEIGHT } from './constants';
 import {
@@ -54,7 +62,13 @@ export const MessageComposer = ({
 	});
 	const contentHeight = useSharedValue(MIN_HEIGHT);
 	useCloseKeyboardWhenOrientationChanges();
-	const { rid, tmid, action, selectedMessages, sharing, editRequest, onSendMessage, setQuotesAndText } = useRoomContext();
+	const rid = useComposerRid();
+	const tmid = useComposerTmid();
+	const sharing = useComposerSharing();
+	const editRequest = useEditRequest();
+	const onSendMessage = useOnSendMessage();
+	const setQuotesAndText = useSetQuotesAndText();
+	const action = useMessageAction();
 	const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
 	const { showEmojiKeyboard, showEmojiSearchbar, openEmojiSearchbar, resetKeyboard, keyboardHeight } = useEmojiKeyboard();
 	const { setAlsoSendThreadToChannel, setAutocompleteParams, clearAttachments } = useMessageComposerApi();
@@ -108,22 +122,22 @@ export const MessageComposer = ({
 
 		const textFromInput = composerInputComponentRef.current.getTextAndClear();
 
-		if (action === 'edit') {
+		if (action?.kind === 'edit') {
 			const updatedAttachments = attachments.length
 				? attachments.map(({ description, altText, fileId, filename }) =>
 						altTextSupported ? { description: altText || '', fileId, filename } : { description: description || '' }
 				  )
 				: undefined;
-			editRequest?.({ id: selectedMessages[0], msg: textFromInput, rid, attachments: updatedAttachments });
+			editRequest?.({ id: action.messageId, msg: textFromInput, rid, attachments: updatedAttachments });
 			clearAttachments();
 			return;
 		}
 
 		if (attachments.length) {
 			let quotedMessage: string | undefined;
 
-			if (action === 'quote') {
-				quotedMessage = await prepareQuoteMessage(textFromInput, selectedMessages);
+			if (action?.kind === 'quote') {
+				quotedMessage = await prepareQuoteMessage(textFromInput, action.messageIds);
 			}
 
 			try {
@@ -146,8 +160,8 @@ export const MessageComposer = ({
 			}
 		}
 
-		if (action === 'quote') {
-			const quoteMessage = await prepareQuoteMessage(textFromInput, selectedMessages);
+		if (action?.kind === 'quote') {
+			const quoteMessage = await prepareQuoteMessage(textFromInput, action.messageIds);
 			onSendMessage?.(quoteMessage);
 			return;
 		}
@@ -245,7 +259,7 @@ export const MessageComposer = ({
 			}}>
 			<MessageComposerContent
 				recordingAudio={recordingAudio}
-				action={action}
+				action={action?.kind ?? null}
 				showEmojiSearchbar={showEmojiSearchbar}
 				composerInputComponentRef={composerInputComponentRef}
 				composerInputRef={composerInputRef}

app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap

@@ -9488,7 +9488,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
         borderless={true}
         collapsable={false}
         delayLongPress={600}
-        handlerTag={11}
+        handlerTag={-1}
         handlerType="NativeViewGestureHandler"
         hitSlop={
           {

app/containers/MessageComposer/components/Autocomplete/Autocomplete.tsx

@@ -8,7 +8,7 @@ import { AutocompleteItem } from './AutocompleteItem';
 import { useAutocomplete } from '../../hooks';
 import { type IAutocompleteItemProps } from '../../interfaces';
 import { AutocompletePreview } from './AutocompletePreview';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useComposerRid, useUpdateAutocompleteVisible } from '../../../../views/RoomView/stores/ComposerStore';
 import { useStyle } from './styles';
 
 export const Autocomplete = ({
@@ -22,7 +22,8 @@ export const Autocomplete = ({
 }): ReactElement | null => {
 	'use memo';
 
-	const { rid, updateAutocompleteVisible } = useRoomContext();
+	const rid = useComposerRid();
+	const updateAutocompleteVisible = useUpdateAutocompleteVisible();
 	const { text, type, params } = useAutocompleteParams();
 	const items = useAutocomplete({
 		rid,

app/containers/MessageComposer/components/Buttons/ActionsButton.tsx

@@ -9,12 +9,14 @@ import Navigation from '../../../../lib/navigation/appNavigation';
 import { useMasterDetail } from '../../../../lib/hooks/useMasterDetail';
 import { usePermissions } from '../../../../lib/hooks/usePermissions';
 import { useCanUploadFile, useChooseMedia } from '../../hooks';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useComposerRid, useComposerTmid, useComposerType } from '../../../../views/RoomView/stores/ComposerStore';
 
 export const ActionsButton = () => {
 	'use memo';
 
-	const { rid, tmid, t } = useRoomContext();
+	const rid = useComposerRid();
+	const tmid = useComposerTmid();
+	const t = useComposerType();
 	const { closeEmojiKeyboardAndAction } = useContext(MessageInnerContext);
 	const permissionToUpload = useCanUploadFile(rid);
 	const [permissionToViewCannedResponses] = usePermissions(['view-canned-responses'], rid);

app/containers/MessageComposer/components/Buttons/MicOrSendButton.tsx

@@ -7,15 +7,16 @@ import i18n from '../../../../i18n';
 import { useAppSelector } from '../../../../lib/hooks/useAppSelector';
 import { openAppSettings } from '../../../../lib/methods/helpers/openAppSettings';
 import { useTheme } from '../../../../theme';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useComposerRid, useComposerSharing } from '../../../../views/RoomView/stores/ComposerStore';
 import { MessageInnerContext, useComposerAttachments, useMessageComposerApi, useMicOrSend } from '../../context';
 import { useCanUploadFile } from '../../hooks';
 import { BaseButton } from './BaseButton';
 
 export const MicOrSendButton = (): ReactElement | null => {
 	'use memo';
 
-	const { rid, sharing } = useRoomContext();
+	const rid = useComposerRid();
+	const sharing = useComposerSharing();
 	const micOrSend = useMicOrSend();
 	const attachments = useComposerAttachments();
 	const { sendMessage } = useContext(MessageInnerContext);

app/containers/MessageComposer/components/CancelEdit.tsx

@@ -1,13 +1,15 @@
 import { BaseButton } from './Buttons';
-import { useRoomContext } from '../../../views/RoomView/context';
+import { useEditCancel } from '../../../views/RoomView/stores/ComposerStore';
+import { useMessageAction } from '../../message/stores/MessageActionStore';
 import { Gap } from './Gap';
 
 export const CancelEdit = () => {
 	'use memo';
 
-	const { action, editCancel } = useRoomContext();
+	const editCancel = useEditCancel();
+	const action = useMessageAction();
 
-	if (action !== 'edit') {
+	if (action?.kind !== 'edit') {
 		return null;
 	}
 	return (