From 37ac1316185bf69547979c3c3ab4c67b2614db4c Mon Sep 17 00:00:00 2001 From: Danish Ahmed Mirza Date: Fri, 29 Jul 2022 18:44:54 +0530 Subject: [PATCH] Tweaks and optimization --- app/containers/EmojiPicker/EmojiCategory.tsx | 19 ++---- .../EmojiPicker/frequentlyUsedEmojis.ts | 33 ++++++++++ app/containers/EmojiPicker/index.tsx | 65 ++++++------------- app/containers/MessageBox/EmojiSearchbar.tsx | 13 ++-- app/views/RoomView/ReactionPicker.tsx | 4 +- 5 files changed, 70 insertions(+), 64 deletions(-) create mode 100644 app/containers/EmojiPicker/frequentlyUsedEmojis.ts diff --git a/app/containers/EmojiPicker/EmojiCategory.tsx b/app/containers/EmojiPicker/EmojiCategory.tsx index 19800744d..adee9d843 100644 --- a/app/containers/EmojiPicker/EmojiCategory.tsx +++ b/app/containers/EmojiPicker/EmojiCategory.tsx @@ -13,25 +13,20 @@ import { isIOS } from '../../lib/methods/helpers'; const MAX_EMOJI_SIZE = 50; interface IEmojiProps { - emoji: IEmoji; + emoji: string | IEmoji; size: number; baseUrl: string; } const Emoji = React.memo(({ emoji, size, baseUrl }: IEmojiProps) => { - if (emoji?.isCustom || emoji?.name) { + if (typeof emoji === 'string') return ( - + + {shortnameToUnicode(`:${emoji}:`)} + ); - } return ( - - {shortnameToUnicode(`:${emoji}:`)} - + ); }); @@ -64,7 +59,7 @@ const EmojiCategory = ({ baseUrl, onEmojiSelected, emojis, width, tabsCount }: I // rerender FlatList in case of width changes key={`emoji-category-${width}`} // @ts-ignore - keyExtractor={item => (item && item.isCustom && item.content) || item} + keyExtractor={item => (item?.isCustom && item.content) || item} data={emojis} extraData={{ baseUrl, width }} renderItem={({ item }) => renderItem(item)} diff --git a/app/containers/EmojiPicker/frequentlyUsedEmojis.ts b/app/containers/EmojiPicker/frequentlyUsedEmojis.ts new file mode 100644 index 000000000..6b6b574ca --- /dev/null +++ b/app/containers/EmojiPicker/frequentlyUsedEmojis.ts @@ -0,0 +1,33 @@ +import { useEffect, useState } from 'react'; +import orderBy from 'lodash/orderBy'; + +import database from '../../lib/database'; +import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode'; +import { IEmoji } from '../../definitions'; + +const useFrequentlyUsedEmoji = (): { + frequentlyUsed: (string | IEmoji)[]; + loaded: boolean; +} => { + const [frequentlyUsed, setFrequentlyUsed] = useState<(string | IEmoji)[]>([]); + const [loaded, setLoaded] = useState(false); + 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 { content: item.content, extension: item.extension, isCustom: item.isCustom }; + } + return shortnameToUnicode(`${item.content}`); + }) as (string | IEmoji)[]; + setFrequentlyUsed(frequentlyUsedEmojis); + setLoaded(true); + }; + useEffect(() => { + getFrequentlyUsedEmojis(); + }, []); + return { frequentlyUsed, loaded }; +}; + +export default useFrequentlyUsedEmoji; diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx index a8325e58c..2d20c1c73 100644 --- a/app/containers/EmojiPicker/index.tsx +++ b/app/containers/EmojiPicker/index.tsx @@ -1,7 +1,6 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import { View } from 'react-native'; import ScrollableTabView from 'react-native-scrollable-tab-view'; -import orderBy from 'lodash/orderBy'; import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord'; import TabBar from './TabBar'; @@ -18,28 +17,7 @@ import { useTheme } from '../../theme'; import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definitions'; import { useAppSelector } from '../../lib/hooks'; import { IEmojiPickerProps, EventTypes } from './interfaces'; - -export const useFrequentlyUsedEmoji = () => { - const [frequentlyUsed, setFrequentlyUsed] = useState<(string | IEmoji)[]>([]); - const [loaded, setLoaded] = useState(false); - 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 { content: item.content, extension: item.extension, isCustom: item.isCustom }; - } - return shortnameToUnicode(`${item.content}`); - }) as (string | IEmoji)[]; - setFrequentlyUsed(frequentlyUsedEmojis); - setLoaded(true); - }; - useEffect(() => { - getFrequentlyUsedEmojis(); - }, []); - return { frequentlyUsed, loaded }; -}; +import useFrequentlyUsedEmoji from './frequentlyUsedEmojis'; const EmojiPicker = ({ onItemClicked, @@ -66,26 +44,6 @@ const EmojiPicker = ({ [allCustomEmojis] ); - const handleEmojiSelect = (emoji: IEmoji) => { - try { - if (emoji.isCustom) { - _addFrequentlyUsed({ - content: emoji.content, - extension: emoji.extension, - isCustom: true - }); - onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`); - } else { - const content = emoji; - _addFrequentlyUsed({ content, isCustom: false }); - const shortname = `:${emoji}:`; - onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname); - } - } catch (e) { - log(e); - } - }; - const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => { const db = database.active; const freqEmojiCollection = db.get('frequently_used_emojis'); @@ -113,6 +71,25 @@ const EmojiPicker = ({ }); }); + const handleEmojiSelect = (emoji: IEmoji) => { + try { + if (emoji.isCustom) { + _addFrequentlyUsed({ + content: emoji.content, + extension: emoji.extension, + isCustom: true + }); + onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`); + } else { + _addFrequentlyUsed({ content: emoji, isCustom: false }); + const shortname = `:${emoji}:`; + onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname); + } + } catch (e) { + log(e); + } + }; + const onLayout = ({ nativeEvent: { layout: { width } diff --git a/app/containers/MessageBox/EmojiSearchbar.tsx b/app/containers/MessageBox/EmojiSearchbar.tsx index f2bfd7a6a..66a861f36 100644 --- a/app/containers/MessageBox/EmojiSearchbar.tsx +++ b/app/containers/MessageBox/EmojiSearchbar.tsx @@ -9,12 +9,12 @@ import { IEmoji } from '../../definitions'; import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode'; import CustomEmoji from '../EmojiPicker/CustomEmoji'; import styles from './styles'; -import { useFrequentlyUsedEmoji } from '../EmojiPicker'; +import useFrequentlyUsedEmoji from '../EmojiPicker/frequentlyUsedEmojis'; 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 { +interface IEmojiSearchBarProps { openEmoji: () => void; onChangeText: (value: string) => void; emojis: IEmoji[]; @@ -39,7 +39,7 @@ const Emoji = React.memo(({ emoji, baseUrl }: { emoji: IEmoji; baseUrl: string } ); }); -const EmojiSearchbar = React.forwardRef( +const EmojiSearchBar = React.forwardRef( ({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => { const { colors } = useTheme(); const [searchText, setSearchText] = useState(''); @@ -63,13 +63,14 @@ const EmojiSearchbar = React.forwardRef( onChangeText(text); }; - const renderItem = (emoji: IEmoji) => ( + const renderItem = React.memo((emoji: IEmoji) => ( onEmojiSelected(emoji)}> - ); + )); + return ( ( } ); -export default EmojiSearchbar; +export default EmojiSearchBar; diff --git a/app/views/RoomView/ReactionPicker.tsx b/app/views/RoomView/ReactionPicker.tsx index 2ce74f8e3..9b0c59759 100644 --- a/app/views/RoomView/ReactionPicker.tsx +++ b/app/views/RoomView/ReactionPicker.tsx @@ -25,7 +25,7 @@ interface IReactionPickerProps { const MAX_EMOJIS_TO_DISPLAY = 20; -const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }: IReactionPickerProps) => { +const ReactionPicker = ({ onEmojiSelected, message, reactionClose }: IReactionPickerProps): React.ReactElement => { const { colors } = useTheme(); const [searchText, setSearchText] = React.useState(''); const [searchedEmojis, setSearchedEmojis] = React.useState<(string | IEmoji)[]>([]); @@ -92,6 +92,6 @@ const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }: ); -}); +}; export default ReactionPicker;