Refactoring

app/containers/EmojiPicker/categories.ts

@@ -1,19 +1,9 @@
 import { TIconsName } from '../CustomIcon';
+import { IEmojiCategoryName } from '../../definitions';
 
-export type IEmojiCategory =
-	| 'frequentlyUsed'
-	| 'custom'
-	| 'people'
-	| 'nature'
-	| 'food'
-	| 'activity'
-	| 'travel'
-	| 'objects'
-	| 'symbols'
-	| 'flags';
 const tabs: {
 	key: TIconsName;
-	title: IEmojiCategory;
+	title: IEmojiCategoryName;
 }[] = [
 	{
 		key: 'clock',

app/containers/EmojiPicker/index.tsx

@@ -7,17 +7,44 @@ import TabBar from './TabBar';
 import EmojiCategory from './EmojiCategory';
 import Footer from './Footer';
 import styles from './styles';
-import categories, { IEmojiCategory } from './categories';
+import categories from './categories';
 import { emojisByCategory } from './emojis';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import log from '../../lib/methods/helpers/log';
 import { useTheme } from '../../theme';
-import { IEmoji, ICustomEmojis } from '../../definitions';
+import { IEmoji, ICustomEmojis, IEmojiPickerCategory, IEmojiCategoryName } from '../../definitions';
 import { useAppSelector } from '../../lib/hooks';
 import { IEmojiPickerProps, EventTypes } from './interfaces';
 import { useFrequentlyUsedEmoji, addFrequentlyUsed } from './frequentlyUsedEmojis';
 import { TIconsName } from '../CustomIcon';
 
+const Category = ({
+	title,
+	frequentlyUsed,
+	customEmojis,
+	handleEmojiSelect,
+	baseUrl,
+	tabsCount
+}: IEmojiPickerCategory): React.ReactElement => {
+	let emojis: (IEmoji | string)[] = [];
+	if (title === 'frequentlyUsed') {
+		emojis = frequentlyUsed;
+	} else if (title === 'custom') {
+		emojis = customEmojis;
+	} else {
+		emojis = emojisByCategory[title];
+	}
+	return (
+		<EmojiCategory
+			emojis={emojis}
+			onEmojiSelected={(emoji: IEmoji | string) => handleEmojiSelect(emoji)}
+			style={styles.categoryContainer}
+			baseUrl={baseUrl}
+			tabsCount={tabsCount}
+		/>
+	);
+};
+
 const EmojiPicker = ({
 	onItemClicked,
 	isEmojiKeyboard = false,
@@ -31,7 +58,7 @@ const EmojiPicker = ({
 
 	const baseUrl = useAppSelector(state => state.server?.server);
 	const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis, shallowEqual);
-	const customEmojis = useMemo(
+	const customEmojis: IEmoji[] = useMemo(
 		() =>
 			Object.keys(allCustomEmojis)
 				.filter(item => item === allCustomEmojis[item].name)
@@ -66,29 +93,9 @@ const EmojiPicker = ({
 
 	const tabsCount = frequentlyUsed.length === 0 ? categories.length - 1 : categories.length;
 
-	const Category = React.memo(({ title }: { title: IEmojiCategory }) => {
-		let emojis = [];
-		if (title === 'frequentlyUsed') {
-			emojis = frequentlyUsed;
-		} else if (title === 'custom') {
-			emojis = customEmojis;
-		} else {
-			emojis = emojisByCategory[title];
-		}
-		return (
-			<EmojiCategory
-				emojis={emojis}
-				onEmojiSelected={(emoji: IEmoji | string) => handleEmojiSelect(emoji)}
-				style={styles.categoryContainer}
-				baseUrl={baseUrl}
-				tabsCount={tabsCount}
-			/>
-		);
-	});
-
 	type Route = {
-		key: string;
+		key: TIconsName;
-		title: string;
+		title: IEmojiCategoryName;
 	};
 	type State = NavigationState<Route>;
 	const renderTabBar = (props: SceneRendererProps & { navigationState: State }) => (
@@ -113,14 +120,17 @@ const EmojiPicker = ({
 				<TabView
 					lazy
 					navigationState={{ index, routes }}
-					renderScene={({
+					renderScene={({ route }: { route: Route }) => (
-						route
+						<Category
-					}: {
+							key={route.key}
-						route: {
+							title={route.title}
-							key: TIconsName;
+							frequentlyUsed={frequentlyUsed}
-							title: IEmojiCategory;
+							customEmojis={customEmojis}
-						};
+							handleEmojiSelect={handleEmojiSelect}
-					}) => <Category key={route.key} title={route.title} />}
+							baseUrl={baseUrl}
+							tabsCount={tabsCount}
+						/>
+					)}
 					onIndexChange={setIndex}
 					style={{ backgroundColor: colors.focusedBackground }}
 					renderTabBar={renderTabBar}

app/definitions/IEmoji.ts

@@ -36,6 +36,27 @@ export interface IEmojiCategory {
 	tabsCount: number;
 }
 
+export type IEmojiCategoryName =
+	| 'frequentlyUsed'
+	| 'custom'
+	| 'people'
+	| 'nature'
+	| 'food'
+	| 'activity'
+	| 'travel'
+	| 'objects'
+	| 'symbols'
+	| 'flags';
+
+export interface IEmojiPickerCategory {
+	title: IEmojiCategoryName;
+	frequentlyUsed: (IEmoji | string)[];
+	customEmojis: IEmoji[];
+	handleEmojiSelect: (emoji: IEmoji | string) => void;
+	baseUrl: string;
+	tabsCount: number;
+}
+
 export type TGetCustomEmoji = (name: string) => any;
 
 export type TFrequentlyUsedEmojiModel = IEmoji & Model;