verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweaks and optimization

This commit is contained in:
Danish Ahmed Mirza 2022-07-29 18:44:54 +05:30 committed by Danish
parent 086b98f8fb
commit 37ac131618
5 changed files with 70 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/containers/EmojiPicker/EmojiCategory.tsx
View File

@ -13,26 +13,21 @@ 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) {
return (
<CustomEmoji
style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]}
emoji={emoji}
baseUrl={baseUrl}
/>
);
}
if (typeof emoji === 'string')
return (
<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
{shortnameToUnicode(`:${emoji}:`)}
</Text>
);
return (
<CustomEmoji style={[styles.customCategoryEmoji, { height: size - 16, width: size - 16 }]} emoji={emoji} baseUrl={baseUrl} />
);
});
const EmojiCategory = ({ baseUrl, onEmojiSelected, emojis, width, tabsCount }: IEmojiCategory): React.ReactElement | null => {
@ -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)}

33
app/containers/EmojiPicker/frequentlyUsedEmojis.ts Normal file
View File

@ -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;

65
app/containers/EmojiPicker/index.tsx
View File

@ -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 }

13
app/containers/MessageBox/EmojiSearchbar.tsx
View File

@ -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<TextInput, IEmojiSearchbarProps>(
const EmojiSearchBar = React.forwardRef<TextInput, IEmojiSearchBarProps>(
({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
const { colors } = useTheme();
const [searchText, setSearchText] = useState<string>('');
@ -63,13 +63,14 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
onChangeText(text);
};
const renderItem = (emoji: IEmoji) => (
const renderItem = React.memo((emoji: IEmoji) => (
<View style={[styles.emojiContainer]}>
<Pressable onPress={() => onEmojiSelected(emoji)}>
<Emoji emoji={emoji} baseUrl={baseUrl} />
</Pressable>
</View>
);
));
return (
<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
<FlatList
@ -117,4 +118,4 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
}
);
export default EmojiSearchbar;
export default EmojiSearchBar;

4
app/views/RoomView/ReactionPicker.tsx
View File

@ -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<string>('');
const [searchedEmojis, setSearchedEmojis] = React.useState<(string | IEmoji)[]>([]);
@ -92,6 +92,6 @@ const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }:
<EmojiPicker onItemClicked={handleEmojiSelect} searching={searching} searchedEmojis={searchedEmojis} />
</View>
);
});
};
export default ReactionPicker;