Fix hardware backpress behavior and remove redundant code

app/containers/EmojiPicker/index.tsx

@@ -20,7 +20,7 @@ import { useAppSelector } from '../../lib/hooks';
 import { IEmojiPickerProps, EventTypes } from './interfaces';
 
 export const useFrequentlyUsedEmoji = () => {
-	const [frequentlyUsed, setFrequentlyUsed] = useState<IEmoji[]>([]);
+	const [frequentlyUsed, setFrequentlyUsed] = useState<(string | IEmoji)[]>([]);
 	const [loaded, setLoaded] = useState(false);
 	const getFrequentlyUsedEmojis = async () => {
 		const db = database.active;
@@ -31,7 +31,7 @@ export const useFrequentlyUsedEmoji = () => {
 				return { content: item.content, extension: item.extension, isCustom: item.isCustom };
 			}
 			return shortnameToUnicode(`${item.content}`);
-		}) as IEmoji[];
+		}) as (string | IEmoji)[];
 		setFrequentlyUsed(frequentlyUsedEmojis);
 		setLoaded(true);
 	};

app/containers/MessageBox/EmojiSearchbar.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, Pressable, TextInput, FlatList } from 'react-native';
-import { orderBy } from 'lodash';
 
 import { FormTextInput } from '../TextInput/FormTextInput';
 import { useTheme } from '../../theme';
@@ -9,12 +8,12 @@ import { CustomIcon } from '../CustomIcon';
 import { IEmoji } from '../../definitions';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
-import database from '../../lib/database';
 import styles from './styles';
+import { useFrequentlyUsedEmoji } from '../EmojiPicker';
 
 const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
 const EMOJI_SIZE = 30;
-
+const DEFAULT_EMOJIS = ['clap', '+1', 'heart_eyes', 'grinning', 'thinking_face', 'smiley'];
 interface IEmojiSearchbarProps {
 	openEmoji: () => void;
 	onChangeText: (value: string) => void;
@@ -23,9 +22,14 @@ interface IEmojiSearchbarProps {
 	baseUrl: string;
 }
 
+interface ICustomEmoji {
+	name: string;
+	extension: string;
+}
+
 const Emoji = React.memo(({ emoji, baseUrl }: { emoji: IEmoji; baseUrl: string }) => {
 	const { colors } = useTheme();
-	if (emoji?.name) {
+	if (emoji.isCustom || emoji.name) {
 		return <CustomEmoji style={{ height: EMOJI_SIZE, width: EMOJI_SIZE, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />;
 	}
 	return (
@@ -39,30 +43,24 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 	({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
 		const { colors } = useTheme();
 		const [searchText, setSearchText] = useState<string>('');
-		const [frequentlyUsed, setFrequentlyUsed] = useState([]);
-
-		const getFrequentlyUsedEmojis = async () => {
-			const db = database.active;
-			const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch();
-			const frequentlyUsedOrdered = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
-			const frequentlyUsedEmojis = frequentlyUsedOrdered.map(item => {
-				if (item.isCustom) {
-					return { name: item.content, extension: item.extension };
-				}
-				return item.content;
-			});
-			// @ts-ignore
-			setFrequentlyUsed(frequentlyUsedEmojis);
-		};
+		const [frequentlyUsedEmojis, setFrequentlyUsed] = useState<(string | ICustomEmoji)[]>();
+		const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
 
 		useEffect(() => {
-			getFrequentlyUsedEmojis();
-		}, []);
+			if (loaded) {
+				const frequentlyUsedWithDefaultEmojis = frequentlyUsed
+					.filter(emoji => {
+						if (typeof emoji === 'string') return !DEFAULT_EMOJIS.includes(emoji);
+						return !DEFAULT_EMOJIS.includes(emoji.name);
+					})
+					.concat(DEFAULT_EMOJIS);
+				setFrequentlyUsed(frequentlyUsedWithDefaultEmojis);
+			}
+		}, [loaded]);
 
 		const handleTextChange = (text: string) => {
 			setSearchText(text);
 			onChangeText(text);
-			if (!text) getFrequentlyUsedEmojis();
 		};
 
 		const renderItem = (emoji: IEmoji) => (
@@ -76,8 +74,8 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
 			<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
 				<FlatList
 					horizontal
-					data={searchText ? emojis : frequentlyUsed}
-					renderItem={({ item }) => renderItem(item)}
+					data={searchText ? emojis : frequentlyUsedEmojis}
+					renderItem={({ item }) => renderItem(item as IEmoji)}
 					showsHorizontalScrollIndicator={false}
 					ListEmptyComponent={() => (
 						<View style={styles.listEmptyComponent}>

app/containers/MessageBox/index.tsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Alert, Keyboard, NativeModules, Text, View, TextInput as RNTextInput } from 'react-native';
+import { Alert, Keyboard, NativeModules, Text, View, TextInput as RNTextInput, BackHandler } from 'react-native';
 import { connect } from 'react-redux';
 import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
 import ImagePicker, { Image, ImageOrVideo, Options } from 'react-native-image-crop-picker';
@@ -220,6 +220,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 			...videoPickerConfig,
 			...libPickerLabels
 		};
+
+		BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
 	}
 
 	get sendThreadToChannel() {
@@ -457,6 +459,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		if (isTablet) {
 			EventEmiter.removeListener(KEY_COMMAND, this.handleCommands);
 		}
+		BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
 	}
 
 	setOptions = async () => {
@@ -1179,6 +1182,15 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 		) : null;
 	};
 
+	handleBackPress = () => {
+		const { showEmojiSearchbar } = this.state;
+		if (showEmojiSearchbar) {
+			this.setState({ showEmojiSearchbar: false });
+			return true;
+		}
+		return false;
+	};
+
 	renderContent = () => {
 		const {
 			recording,