From 7d64b262cf010747456596182f47b23c18246d7e Mon Sep 17 00:00:00 2001 From: Danish Ahmed Mirza Date: Sun, 24 Jul 2022 18:13:25 +0530 Subject: [PATCH] Fix hardware backpress behavior and remove redundant code --- app/containers/EmojiPicker/index.tsx | 4 +- app/containers/MessageBox/EmojiSearchbar.tsx | 46 ++++++++++---------- app/containers/MessageBox/index.tsx | 14 +++++- 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx index 344cad49d..92aa2d48c 100644 --- a/app/containers/EmojiPicker/index.tsx +++ b/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([]); + 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); }; diff --git a/app/containers/MessageBox/EmojiSearchbar.tsx b/app/containers/MessageBox/EmojiSearchbar.tsx index a834b69e2..f2bfd7a6a 100644 --- a/app/containers/MessageBox/EmojiSearchbar.tsx +++ b/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 ; } return ( @@ -39,30 +43,24 @@ const EmojiSearchbar = React.forwardRef( ({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => { const { colors } = useTheme(); const [searchText, setSearchText] = useState(''); - 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( renderItem(item)} + data={searchText ? emojis : frequentlyUsedEmojis} + renderItem={({ item }) => renderItem(item as IEmoji)} showsHorizontalScrollIndicator={false} ListEmptyComponent={() => ( diff --git a/app/containers/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx index 223e6f85e..2c6af0dd8 100644 --- a/app/containers/MessageBox/index.tsx +++ b/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 { ...videoPickerConfig, ...libPickerLabels }; + + BackHandler.addEventListener('hardwareBackPress', this.handleBackPress); } get sendThreadToChannel() { @@ -457,6 +459,7 @@ class MessageBox extends Component { if (isTablet) { EventEmiter.removeListener(KEY_COMMAND, this.handleCommands); } + BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress); } setOptions = async () => { @@ -1179,6 +1182,15 @@ class MessageBox extends Component { ) : null; }; + handleBackPress = () => { + const { showEmojiSearchbar } = this.state; + if (showEmojiSearchbar) { + this.setState({ showEmojiSearchbar: false }); + return true; + } + return false; + }; + renderContent = () => { const { recording,