refactor: apply useCustomEmoji

app/containers/Avatar/Avatar.stories.tsx

@@ -1,9 +1,13 @@
 import { StyleSheet } from 'react-native';
 
+import { setCustomEmojis } from '../../actions/customEmojis';
+import { mockedStore } from '../../reducers/mockedStore';
 import Status from '../Status/Status';
 import sharedStyles from '../../views/Styles';
 import Avatar from './Avatar';
 
+mockedStore.dispatch(setCustomEmojis({ troll: { name: 'troll', extension: 'jpg' } }));
+
 const styles = StyleSheet.create({
 	custom: {
 		padding: 16
@@ -40,9 +44,7 @@ export const WithETag = () => (
 
 export const WithoutETag = () => <Avatar type='d' text='djorkaeff.alexandre' server={server} size={56} />;
 
-export const Emoji = () => (
-	<Avatar emoji='troll' getCustomEmoji={() => ({ name: 'troll', extension: 'jpg' })} server={server} size={56} />
-);
+export const Emoji = () => <Avatar emoji='troll' server={server} size={56} />;
 
 export const Direct = () => <Avatar text='diego.mello' server={server} type='d' size={56} />;
 

app/containers/Avatar/Avatar.tsx

@@ -7,7 +7,6 @@ import Emoji from '../markdown/components/emoji/Emoji';
 import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
 import { SubscriptionType } from '../../definitions';
 import { type IAvatar } from './interfaces';
-import MarkdownContext from '../markdown/contexts/MarkdownContext';
 import I18n from '../../i18n';
 import Touch from '../Touch';
 
@@ -21,7 +20,6 @@ const Avatar = memo(
 		token,
 		onPress,
 		emoji,
-		getCustomEmoji,
 		avatarETag,
 		isStatic,
 		rid,
@@ -51,16 +49,11 @@ const Avatar = memo(
 		let image;
 		if (emoji) {
 			image = (
-				<MarkdownContext.Provider
-					value={{
-						getCustomEmoji
-					}}>
-					<Emoji
-						block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }}
-						style={avatarStyle}
-						isAvatar={true}
-					/>
-				</MarkdownContext.Provider>
+				<Emoji
+					block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }}
+					style={avatarStyle}
+					isAvatar={true}
+				/>
 			);
 		} else {
 			let uri = avatar;

app/containers/Avatar/AvatarContainer.tsx

@@ -17,7 +17,6 @@ const AvatarContainer = ({
 	type,
 	children,
 	onPress,
-	getCustomEmoji,
 	isStatic,
 	rid,
 	accessibilityLabel,
@@ -61,7 +60,6 @@ const AvatarContainer = ({
 			userId={id}
 			token={token}
 			onPress={onPress}
-			getCustomEmoji={getCustomEmoji}
 			isStatic={isStatic}
 			rid={rid}
 			blockUnauthenticatedAccess={blockUnauthenticatedAccess}

app/containers/Avatar/AvatarWithEdit.tsx

@@ -39,7 +39,6 @@ const AvatarWithEdit = ({
 	type,
 	children,
 	onPress,
-	getCustomEmoji,
 	isStatic,
 	rid,
 	handleEdit,
@@ -62,7 +61,6 @@ const AvatarWithEdit = ({
 				borderRadius={borderRadius}
 				type={type}
 				onPress={onPress}
-				getCustomEmoji={getCustomEmoji}
 				isStatic={isStatic}
 				rid={rid}>
 				{children}

app/containers/Avatar/interfaces.ts

@@ -1,8 +1,6 @@
 import { type ReactElement } from 'react';
 import { type ViewStyle } from 'react-native';
 
-import { type TGetCustomEmoji } from '../../definitions/IEmoji';
-
 export interface IAvatar {
 	server?: string;
 	style?: ViewStyle;
@@ -16,7 +14,6 @@ export interface IAvatar {
 	userId?: string;
 	token?: string;
 	onPress?: () => void;
-	getCustomEmoji?: TGetCustomEmoji;
 	avatarETag?: string;
 	isStatic?: boolean | string;
 	rid?: string;

app/containers/ReactionsList/AllTab.tsx

@@ -4,22 +4,19 @@ import { Text, View, FlatList } from 'react-native';
 import Emoji from '../message/Emoji';
 import { useTheme } from '../../theme';
 import { type IReaction } from '../../definitions';
-import { type TGetCustomEmoji } from '../../definitions/IEmoji';
 import I18n from '../../i18n';
 import styles from './styles';
 import { useAppSelector } from '../../lib/hooks/useAppSelector';
 
 interface IAllReactionsListItemProps {
-	getCustomEmoji: TGetCustomEmoji;
 	item: IReaction;
 }
 
 interface IAllTabProps {
-	getCustomEmoji: TGetCustomEmoji;
 	reactions?: IReaction[];
 }
 
-const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemProps) => {
+const AllReactionsListItem = ({ item }: IAllReactionsListItemProps) => {
 	const { colors } = useTheme();
 	const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
 	const username = useAppSelector(state => state.login.user.username);
@@ -48,7 +45,6 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 				content={item.emoji}
 				standardEmojiStyle={styles.allTabStandardEmojiStyle}
 				customEmojiStyle={styles.allTabCustomEmojiStyle}
-				getCustomEmoji={getCustomEmoji}
 			/>
 			<View style={styles.textContainer}>
 				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
@@ -60,12 +56,12 @@ const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemPro
 	);
 };
 
-const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): ReactElement => (
+const AllTab = ({ reactions }: IAllTabProps): ReactElement => (
 	<View style={styles.allTabContainer} testID='reactionsListAllTab'>
 		<FlatList
 			data={reactions}
 			contentContainerStyle={styles.listContainer}
-			renderItem={({ item }) => <AllReactionsListItem item={item} getCustomEmoji={getCustomEmoji} />}
+			renderItem={({ item }) => <AllReactionsListItem item={item} />}
 			keyExtractor={item => item.emoji}
 		/>
 	</View>

app/containers/ReactionsList/ReactionsList.stories.tsx

@@ -1,18 +1,17 @@
 import { View } from 'react-native';
 
-import { type TGetCustomEmoji, type ICustomEmoji } from '../../definitions';
 import ReactionsList from '.';
 import { mockedStore as store } from '../../reducers/mockedStore';
 import { updateSettings } from '../../actions/settings';
+import { setCustomEmojis } from '../../actions/customEmojis';
 
-const getCustomEmoji: TGetCustomEmoji = content => {
-	const customEmoji = {
-		marioparty: { name: content, extension: 'gif' },
-		react_rocket: { name: content, extension: 'png' },
-		nyan_rocket: { name: content, extension: 'png' }
-	}[content] as ICustomEmoji;
-	return customEmoji;
-};
+store.dispatch(
+	setCustomEmojis({
+		marioparty: { name: 'marioparty', extension: 'gif' },
+		react_rocket: { name: 'react_rocket', extension: 'png' },
+		nyan_rocket: { name: 'nyan_rocket', extension: 'png' }
+	})
+);
 
 const reactions = [
 	{
@@ -51,7 +50,7 @@ export const ReactionsListStory = () => {
 	store.dispatch(updateSettings('UI_Use_Real_Name', false));
 	return (
 		<View style={{ paddingVertical: 10, flex: 1 }}>
-			<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+			<ReactionsList reactions={reactions} />
 		</View>
 	);
 };
@@ -60,7 +59,7 @@ export const ReactionsListFullName = () => {
 	store.dispatch(updateSettings('UI_Use_Real_Name', true));
 	return (
 		<View style={{ paddingVertical: 10, flex: 1 }}>
-			<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+			<ReactionsList reactions={reactions} />
 		</View>
 	);
 };

app/containers/ReactionsList/ReactionsList.test.tsx

@@ -2,6 +2,7 @@ import { type ReactElement, type ReactNode } from 'react';
 import { screen, render, fireEvent, within } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
+import { Image as ExpoImage } from 'expo-image';
 
 import ReactionsList from './index';
 import { type IReaction } from '../../definitions';
@@ -105,16 +106,12 @@ const mockStore = createStore(
 			server: {
 				server: 'https://open.rocket.chat',
 				version: '6.0.0'
-			}
+			},
+			customEmojis: {}
 		}
 	) => state
 );
 
-const mockGetCustomEmoji = (emoji: string) => ({
-	name: emoji,
-	extension: 'png'
-});
-
 const mockReactions: IReaction[] = [
 	{
 		_id: 'reaction1',
@@ -138,13 +135,13 @@ describe('ReactionsList Integration Tests', () => {
 	});
 
 	it('renders empty ReactionsList when no reactions', () => {
-		renderWithRedux(<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={[]} />);
+		renderWithRedux(<ReactionsList reactions={[]} />);
 		expect(screen.getByTestId('reactionsList')).toBeOnTheScreen();
 		expect(screen.getByTestId('reactionsListAllTab')).toBeOnTheScreen();
 	});
 
 	it('renders ReactionsList with reactions and allows navigation between tabs', () => {
-		renderWithRedux(<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={mockReactions} />);
+		renderWithRedux(<ReactionsList reactions={mockReactions} />);
 
 		// Verify All tab content
 		expect(screen.getByText('4 people reacted')).toBeOnTheScreen();
@@ -185,14 +182,15 @@ describe('ReactionsList Integration Tests', () => {
 					server: {
 						server: 'https://open.rocket.chat',
 						version: '6.0.0'
-					}
+					},
+					customEmojis: {}
 				}
 			) => state
 		);
 
 		render(
 			<Provider store={storeWithoutRealNames}>
-				<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={mockReactions} />
+				<ReactionsList reactions={mockReactions} />
 			</Provider>
 		);
 
@@ -218,6 +216,30 @@ describe('ReactionsList Integration Tests', () => {
 	});
 
 	it('handles custom emojis correctly', () => {
+		const storeWithCustomEmoji = createStore(
+			(
+				state = {
+					settings: {
+						UI_Use_Real_Name: true
+					},
+					login: {
+						user: {
+							id: 'user123',
+							username: 'testuser',
+							name: 'Test User'
+						}
+					},
+					server: {
+						server: 'https://open.rocket.chat',
+						version: '6.0.0'
+					},
+					customEmojis: {
+						custom_emoji: { name: 'custom_emoji', extension: 'png' }
+					}
+				}
+			) => state
+		);
+
 		const customReactions: IReaction[] = [
 			{
 				_id: 'reaction3',
@@ -227,11 +249,18 @@ describe('ReactionsList Integration Tests', () => {
 			}
 		];
 
-		renderWithRedux(<ReactionsList getCustomEmoji={mockGetCustomEmoji} reactions={customReactions} />);
+		render(
+			<Provider store={storeWithCustomEmoji}>
+				<ReactionsList reactions={customReactions} />
+			</Provider>
+		);
 
-		// Verify custom emoji is rendered
 		expect(screen.getByTestId('tab-:custom_emoji:')).toBeOnTheScreen();
 		expect(screen.getByText('1 person reacted')).toBeOnTheScreen();
+
+		// Resolves against the store and renders as a custom emoji image, not the shortname text
+		expect(screen.UNSAFE_getAllByType(ExpoImage).length).toBeGreaterThan(0);
+		expect(screen.queryByText(':custom_emoji:')).toBeNull();
 	});
 });
 

app/containers/ReactionsList/index.tsx

@@ -1,6 +1,5 @@
 import { Text, View } from 'react-native';
 
-import { type TGetCustomEmoji } from '../../definitions/IEmoji';
 import { type IReaction } from '../../definitions';
 import I18n from '../../i18n';
 import styles from './styles';
@@ -10,7 +9,6 @@ import { TabView } from '../TabView';
 import Emoji from '../message/Emoji';
 
 interface IReactionsListProps {
-	getCustomEmoji: TGetCustomEmoji;
 	reactions?: IReaction[];
 }
 
@@ -50,12 +48,12 @@ const useRoutes = (reactions: IReaction[] | undefined) => {
 	};
 };
 
-const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
+const ReactionsList = ({ reactions }: IReactionsListProps) => {
 	const { routes, sortedReactions } = useRoutes(reactions);
 
 	const renderScene = ({ route }: { route: IRoute }) => {
 		if (route.key === 'all') {
-			return <AllTab reactions={sortedReactions} getCustomEmoji={getCustomEmoji} />;
+			return <AllTab reactions={sortedReactions} />;
 		}
 		if (route.emoji && route.usernames && route.names) {
 			return <UsersList emoji={route.emoji} usernames={route.usernames} names={route.names} />;
@@ -74,12 +72,7 @@ const ReactionsList = ({ reactions, getCustomEmoji }: IReactionsListProps) => {
 		if (tab.emoji) {
 			return (
 				<View style={styles.tabBarItem}>
-					<Emoji
-						content={tab.emoji}
-						standardEmojiStyle={styles.standardEmojiStyle}
-						customEmojiStyle={styles.customEmojiStyle}
-						getCustomEmoji={getCustomEmoji}
-					/>
+					<Emoji content={tab.emoji} standardEmojiStyle={styles.standardEmojiStyle} customEmojiStyle={styles.customEmojiStyle} />
 					<Text style={[styles.reactionCount, { color }]}>{tab.usernames?.length}</Text>
 				</View>
 			);