[IMPROVE] Add All tab in Reactions List

.storybook/index.js

@@ -6,11 +6,13 @@ import RNBootSplash from 'react-native-bootsplash';
 import { selectServerRequest } from '../app/actions/server';
 import { mockedStore as store } from '../app/reducers/mockedStore';
 import database from '../app/lib/database';
+import { setUser } from '../app/actions/login';
 
 RNBootSplash.hide();
 
 const baseUrl = 'https://open.rocket.chat';
 store.dispatch(selectServerRequest(baseUrl));
+store.dispatch(setUser({ id: 'abc', username: 'rocket.cat', name: 'Rocket Cat' }));
 database.setActiveDB(baseUrl);
 
 const StorybookUIRoot = getStorybookUI({});

.storybook/storybook.requires.js

@@ -30,6 +30,7 @@ const getStories = () => {
     require("../app/containers/markdown/new/NewMarkdown.stories.tsx"),
     require("../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.tsx"),
     require("../app/containers/message/Message.stories.tsx"),
+    require("../app/containers/ReactionsList/ReactionsList.stories.tsx"),
     require("../app/containers/RoomHeader/RoomHeader.stories.tsx"),
     require("../app/containers/RoomItem/RoomItem.stories.tsx"),
     require("../app/containers/SearchBox/SearchBox.stories.tsx"),

app/containers/ReactionsList/AllTab.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Text, View, FlatList } from 'react-native';
+
+import Emoji from '../message/Emoji';
+import { useTheme } from '../../theme';
+import { IReaction } from '../../definitions';
+import { TGetCustomEmoji } from '../../definitions/IEmoji';
+import I18n from '../../i18n';
+import styles from './styles';
+import { useAppSelector } from '../../lib/hooks';
+
+interface IAllReactionsListItemProps {
+	getCustomEmoji: TGetCustomEmoji;
+	item: IReaction;
+}
+
+interface IAllTabProps {
+	getCustomEmoji: TGetCustomEmoji;
+	tabLabel: IReaction;
+	reactions?: IReaction[];
+}
+
+const AllReactionsListItem = ({ item, getCustomEmoji }: IAllReactionsListItemProps) => {
+	const { colors } = useTheme();
+	const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
+	const server = useAppSelector(state => state.server.server);
+	const username = useAppSelector(state => state.login.user.username);
+	const count = item.usernames.length;
+
+	let displayNames;
+	if (useRealName && item.names) {
+		displayNames = item.names
+			.slice(0, 3)
+			.map((name, index) => (item.usernames[index] === username ? I18n.t('you') : name))
+			.join(', ');
+	} else {
+		displayNames = item.usernames
+			.slice(0, 3)
+			.map((otherUsername: string) => (username === otherUsername ? I18n.t('you') : otherUsername))
+			.join(', ');
+	}
+	if (count > 3) {
+		displayNames = `${displayNames} ${I18n.t('and_more')} ${count - 3}`;
+	} else {
+		displayNames = displayNames.replace(/,(?=[^,]*$)/, ` ${I18n.t('and')}`);
+	}
+	return (
+		<View style={styles.listItemContainer}>
+			<Emoji
+				content={item.emoji}
+				standardEmojiStyle={styles.allTabStandardEmojiStyle}
+				customEmojiStyle={styles.allTabCustomEmojiStyle}
+				baseUrl={server}
+				getCustomEmoji={getCustomEmoji}
+			/>
+			<View style={styles.textContainer}>
+				<Text style={[styles.allListNPeopleReacted, { color: colors.bodyText }]}>
+					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
+				</Text>
+				<Text style={[styles.allListWhoReacted, { color: colors.auxiliaryText }]}>{displayNames}</Text>
+			</View>
+		</View>
+	);
+};
+
+const AllTab = ({ reactions, getCustomEmoji }: IAllTabProps): React.ReactElement => (
+	<View style={styles.allTabContainer} testID='reactionsListAllTab'>
+		<FlatList
+			data={reactions}
+			contentContainerStyle={styles.listContainer}
+			renderItem={({ item }) => <AllReactionsListItem item={item} getCustomEmoji={getCustomEmoji} />}
+			keyExtractor={item => item.emoji}
+		/>
+	</View>
+);
+
+export default AllTab;

app/containers/ReactionsList/ReactionsList.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { TGetCustomEmoji, IEmoji } from '../../definitions';
+import ReactionsList from '.';
+import { mockedStore as store } from '../../reducers/mockedStore';
+import { updateSettings } from '../../actions/settings';
+
+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 IEmoji;
+	return customEmoji;
+};
+
+const reactions = [
+	{
+		emoji: ':marioparty:',
+		_id: 'marioparty',
+		usernames: ['rocket.cat', 'diego.mello'],
+		names: ['Rocket Cat', 'Diego Mello']
+	},
+	{
+		emoji: ':react_rocket:',
+		_id: 'react_rocket',
+		usernames: ['rocket.cat', 'diego.mello'],
+		names: ['Rocket Cat', 'Diego Mello']
+	},
+	{
+		emoji: ':nyan_rocket:',
+		_id: 'nyan_rocket',
+		usernames: ['rocket.cat'],
+		names: ['Rocket Cat']
+	},
+	{
+		emoji: ':grinning:',
+		_id: 'grinning',
+		usernames: ['diego.mello'],
+		names: ['Diego Mello']
+	},
+	{
+		emoji: ':tada:',
+		_id: 'tada',
+		usernames: ['diego.mello'],
+		names: ['Diego Mello']
+	}
+];
+
+export const ReactionsListStory = () => {
+	store.dispatch(updateSettings('UI_Use_Real_Name', false));
+	return (
+		<View style={{ paddingVertical: 10, flex: 1 }}>
+			<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+		</View>
+	);
+};
+
+export const ReactionsListFullName = () => {
+	store.dispatch(updateSettings('UI_Use_Real_Name', true));
+	return (
+		<View style={{ paddingVertical: 10, flex: 1 }}>
+			<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+		</View>
+	);
+};
+
+export default {
+	title: 'ReactionsList'
+};

app/containers/ReactionsList/ReactionsList.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { fireEvent, render, within } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import ReactionsList from '.';
+import { mockedStore } from '../../reducers/mockedStore';
+
+const getCustomEmoji = jest.fn();
+const reactions = [
+	{
+		emoji: 'marioparty',
+		_id: 'marioparty',
+		usernames: ['rocket.cat', 'diego.mello'],
+		names: ['Rocket Cat', 'Diego Mello']
+	},
+	{
+		emoji: 'react_rocket',
+		_id: 'react_rocket',
+		usernames: ['rocket.cat', 'diego.mello'],
+		names: ['Rocket Cat', 'Diego Mello']
+	},
+	{
+		emoji: 'nyan_rocket',
+		_id: 'nyan_rocket',
+		usernames: ['rocket.cat'],
+		names: ['Rocket Cat']
+	},
+	{
+		emoji: 'grinning',
+		_id: 'grinning',
+		usernames: ['diego.mello'],
+		names: ['Diego Mello']
+	}
+];
+
+const Render = () => (
+	<Provider store={mockedStore}>
+		<ReactionsList getCustomEmoji={getCustomEmoji} reactions={reactions} />
+	</Provider>
+);
+
+describe('ReactionsList', () => {
+	test('should render Reactions List', async () => {
+		const { findByTestId } = render(<Render />);
+		const ReactionsListView = await findByTestId('reactionsList');
+		expect(ReactionsListView).toBeTruthy();
+	});
+
+	test('should render tab bar', async () => {
+		const { findByTestId } = render(<Render />);
+		const AllTab = await findByTestId('reactionsTabBar');
+		expect(AllTab).toBeTruthy();
+	});
+
+	test('should render All tab', async () => {
+		const { findByTestId } = render(<Render />);
+		const AllTab = await findByTestId('reactionsListAllTab');
+		expect(AllTab).toBeTruthy();
+	});
+
+	test('correct tab on clicking tab item', async () => {
+		const { findByTestId } = render(<Render />);
+		const tab = await findByTestId(`tabBarItem-${reactions[0].emoji}`);
+		fireEvent.press(tab);
+		const usersList = await findByTestId(`usersList-${reactions[0].emoji}`);
+		expect(usersList).toBeTruthy();
+		const emojiName = await within(usersList).getByTestId(`usersListEmojiName`);
+		expect(emojiName.props.children).toEqual(reactions[0].emoji);
+	});
+
+	test('should render correct number of reactions', async () => {
+		const { findByTestId } = render(<Render />);
+		const tab = await findByTestId(`tabBarItem-${reactions[0].emoji}`);
+		fireEvent.press(tab);
+		const usersList = await findByTestId(`usersList-${reactions[0].emoji}`);
+		const allReactions = await within(usersList).getAllByTestId('userItem');
+		expect(allReactions).toHaveLength(reactions[0].usernames.length);
+	});
+});