Migrate EmojiPicker to hooks

app/containers/EmojiPicker/EmojiCategory.tsx

@@ -26,24 +26,17 @@ const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => {
 	);
 };
 
-class EmojiCategory extends React.Component<IEmojiCategory> {
+const EmojiCategory = React.memo(({ baseUrl, onEmojiSelected, emojis, width, ...props }: IEmojiCategory) => {
-	renderItem(emoji: IEmoji) {
+	const renderItem = (emoji: IEmoji) => (
-		const { baseUrl, onEmojiSelected } = this.props;
-		return (
 		<TouchableOpacity
 			activeOpacity={0.7}
 			// @ts-ignore
 			key={emoji && emoji.isCustom ? emoji.content : emoji}
 			onPress={() => onEmojiSelected(emoji)}
-				testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}
+			testID={`reaction-picker-${emoji && emoji.isCustom ? emoji.content : emoji}`}>
-			>
 			{renderEmoji(emoji, EMOJI_SIZE, baseUrl)}
 		</TouchableOpacity>
 	);
-	}
-
-	render() {
-		const { emojis, width } = this.props;
 
 	if (!width) {
 		return null;
@@ -60,8 +53,8 @@ class EmojiCategory extends React.Component<IEmojiCategory> {
 			// @ts-ignore
 			keyExtractor={item => (item && item.isCustom && item.content) || item}
 			data={emojis}
-				extraData={this.props}
+			extraData={{ baseUrl, onEmojiSelected, width, ...props }}
-				renderItem={({ item }) => this.renderItem(item)}
+			renderItem={({ item }) => renderItem(item)}
 			numColumns={numColumns}
 			initialNumToRender={45}
 			removeClippedSubviews
@@ -69,7 +62,6 @@ class EmojiCategory extends React.Component<IEmojiCategory> {
 			keyboardDismissMode={'none'}
 		/>
 	);
-	}
+});
-}
 
 export default EmojiCategory;

app/containers/EmojiPicker/TabBar.tsx

@@ -2,31 +2,17 @@ import React from 'react';
 import { StyleProp, Text, TextStyle, TouchableOpacity, View } from 'react-native';
 
 import styles from './styles';
-import { themes } from '../../lib/constants';
+import { useTheme } from '../../theme';
-import { TSupportedThemes } from '../../theme';
 
 interface ITabBarProps {
 	goToPage?: (page: number) => void;
 	activeTab?: number;
 	tabs?: string[];
 	tabEmojiStyle: StyleProp<TextStyle>;
-	theme: TSupportedThemes;
 }
 
-export default class TabBar extends React.Component<ITabBarProps> {
+const TabBar = React.memo(({ activeTab, tabs, goToPage, tabEmojiStyle }: ITabBarProps) => {
-	shouldComponentUpdate(nextProps: ITabBarProps) {
+	const { colors } = useTheme();
-		const { activeTab, theme } = this.props;
-		if (nextProps.activeTab !== activeTab) {
-			return true;
-		}
-		if (nextProps.theme !== theme) {
-			return true;
-		}
-		return false;
-	}
-
-	render() {
-		const { tabs, goToPage, tabEmojiStyle, activeTab, theme } = this.props;
 
 	return (
 		<View style={styles.tabsContainer}>
@@ -40,11 +26,10 @@ export default class TabBar extends React.Component<ITabBarProps> {
 						}
 					}}
 					style={styles.tab}
-						testID={`reaction-picker-${tab}`}
+					testID={`reaction-picker-${tab}`}>
-					>
 					<Text style={[styles.tabEmoji, tabEmojiStyle]}>{tab}</Text>
 					{activeTab === i ? (
-							<View style={[styles.activeTabLine, { backgroundColor: themes[theme].tintColor }]} />
+						<View style={[styles.activeTabLine, { backgroundColor: colors.tintColor }]} />
 					) : (
 						<View style={styles.tabLine} />
 					)}
@@ -52,5 +37,6 @@ export default class TabBar extends React.Component<ITabBarProps> {
 			))}
 		</View>
 	);
-	}
+});
-}
+
+export default TabBar;

app/containers/EmojiPicker/index.tsx

@@ -1,11 +1,8 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleProp, TextStyle, View } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { dequal } from 'dequal';
-import { connect } from 'react-redux';
 import orderBy from 'lodash/orderBy';
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
-import { ImageStyle } from 'react-native-fast-image';
 
 import TabBar from './TabBar';
 import EmojiCategory from './EmojiCategory';
@@ -16,74 +13,43 @@ import { emojisByCategory } from './emojis';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
 import shortnameToUnicode from '../../lib/methods/helpers/shortnameToUnicode';
 import log from '../../lib/methods/helpers/log';
-import { themes } from '../../lib/constants';
+import { useTheme } from '../../theme';
-import { TSupportedThemes } from '../../theme';
+import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definitions';
-import { IEmoji, TGetCustomEmoji, IApplicationState, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definitions';
+import { useAppSelector } from '../../lib/hooks';
 
 interface IEmojiPickerProps {
-	isMessageContainsOnlyEmoji?: boolean;
-	getCustomEmoji?: TGetCustomEmoji;
-	baseUrl: string;
-	customEmojis: ICustomEmojis;
-	style?: StyleProp<ImageStyle>;
-	theme: TSupportedThemes;
 	onEmojiSelected: (emoji: string, shortname?: string) => void;
 	tabEmojiStyle?: StyleProp<TextStyle>;
 }
 
-interface IEmojiPickerState {
+const EmojiPicker = React.memo(({ onEmojiSelected, tabEmojiStyle }: IEmojiPickerProps) => {
-	frequentlyUsed: (string | { content?: string; extension?: string; isCustom: boolean })[];
+	const [frequentlyUsed, setFrequentlyUsed] = useState<IEmoji[]>([]);
-	customEmojis: any;
+	const [show, setShow] = useState(false);
-	show: boolean;
+	const [width, setWidth] = useState(null);
-	width: number | null;
+	const { colors } = useTheme();
-}
 
-class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
+	const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis);
-	constructor(props: IEmojiPickerProps) {
+	const baseUrl = useAppSelector(state=>state.server?.server)
-		super(props);
+	const customEmojis = Object.keys(allCustomEmojis)
-		const customEmojis = Object.keys(props.customEmojis)
+		.filter(item => item === allCustomEmojis[item].name)
-			.filter(item => item === props.customEmojis[item].name)
 		.map(item => ({
-				content: props.customEmojis[item].name,
+			content: allCustomEmojis[item].name,
-				extension: props.customEmojis[item].extension,
+			extension: allCustomEmojis[item].extension,
 			isCustom: true
 		}));
-		this.state = {
+
-			frequentlyUsed: [],
+	useEffect(() => {
-			customEmojis,
+		const init = async () => {
-			show: false,
+			await updateFrequentlyUsed();
-			width: null
+			setShow(true);
 		};
-	}
+		init();
+	}, []);
 
-	async componentDidMount() {
+	const handleEmojiSelect = (emoji: IEmoji) => {
-		await this.updateFrequentlyUsed();
-		this.setState({ show: true });
-	}
-
-	shouldComponentUpdate(nextProps: IEmojiPickerProps, nextState: IEmojiPickerState) {
-		const { frequentlyUsed, show, width } = this.state;
-		const { theme } = this.props;
-		if (nextProps.theme !== theme) {
-			return true;
-		}
-		if (nextState.show !== show) {
-			return true;
-		}
-		if (nextState.width !== width) {
-			return true;
-		}
-		if (!dequal(nextState.frequentlyUsed, frequentlyUsed)) {
-			return true;
-		}
-		return false;
-	}
-
-	onEmojiSelected = (emoji: IEmoji) => {
 		try {
-			const { onEmojiSelected } = this.props;
 			if (emoji.isCustom) {
-				this._addFrequentlyUsed({
+				_addFrequentlyUsed({
 					content: emoji.content,
 					extension: emoji.extension,
 					isCustom: true
@@ -91,7 +57,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 				onEmojiSelected(`:${emoji.content}:`);
 			} else {
 				const content = emoji;
-				this._addFrequentlyUsed({ content, isCustom: false });
+				_addFrequentlyUsed({ content, isCustom: false });
 				const shortname = `:${emoji}:`;
 				onEmojiSelected(shortnameToUnicode(shortname), shortname);
 			}
@@ -100,7 +66,7 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 		}
 	};
 
-	_addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => {
+	const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => {
 		const db = database.active;
 		const freqEmojiCollection = db.get('frequently_used_emojis');
 		let freqEmojiRecord: TFrequentlyUsedEmojiModel;
@@ -127,29 +93,26 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 		});
 	});
 
-	updateFrequentlyUsed = async () => {
+	const updateFrequentlyUsed = async () => {
 		const db = database.active;
 		const frequentlyUsedRecords = await db.get('frequently_used_emojis').query().fetch();
 		const frequentlyUsedOrdered = orderBy(frequentlyUsedRecords, ['count'], ['desc']);
-		const frequentlyUsed = frequentlyUsedOrdered.map(item => {
+		const frequentlyUsedEmojis = frequentlyUsedOrdered.map(item => {
 			if (item.isCustom) {
 				return { content: item.content, extension: item.extension, isCustom: item.isCustom };
 			}
 			return shortnameToUnicode(`${item.content}`);
-		});
+		}) as IEmoji[];
-		this.setState({ frequentlyUsed });
+		setFrequentlyUsed(frequentlyUsedEmojis);
 	};
 
-	onLayout = ({
+	const onLayout = ({
 		nativeEvent: {
 			layout: { width }
 		}
-	}: any) => this.setState({ width });
+	}: any) => setWidth(width);
-
-	renderCategory(category: keyof typeof emojisByCategory, i: number, label: string) {
-		const { frequentlyUsed, customEmojis, width } = this.state;
-		const { baseUrl } = this.props;
 
+	const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string) => {
 		let emojis = [];
 		if (i === 0) {
 			emojis = frequentlyUsed;
@@ -160,47 +123,36 @@ class EmojiPicker extends Component<IEmojiPickerProps, IEmojiPickerState> {
 		}
 		return (
 			<EmojiCategory
-				emojis={emojis}
+				emojis={emojis as IEmoji[]}
-				onEmojiSelected={(emoji: IEmoji) => this.onEmojiSelected(emoji)}
+				onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
 				style={styles.categoryContainer}
 				width={width}
 				baseUrl={baseUrl}
 				tabLabel={label}
 			/>
 		);
-	}
+	};
-
-	render() {
-		const { show, frequentlyUsed } = this.state;
-		const { tabEmojiStyle, theme } = this.props;
 
 	if (!show) {
 		return null;
 	}
 	return (
-			<View onLayout={this.onLayout} style={{ flex: 1 }}>
+		<View onLayout={onLayout} style={{ flex: 1 }}>
 			<ScrollableTabView
-					renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} theme={theme} />}
+				renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} />}
 				contentProps={{
 					keyboardShouldPersistTaps: 'always',
 					keyboardDismissMode: 'none'
 				}}
-					style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: colors.focusedBackground }}>
-				>
 				{categories.tabs.map((tab: any, i) =>
 					i === 0 && frequentlyUsed.length === 0
 						? null // when no frequentlyUsed don't show the tab
-							: this.renderCategory(tab.category, i, tab.tabLabel)
+						: renderCategory(tab.category, i, tab.tabLabel)
 				)}
 			</ScrollableTabView>
 		</View>
 	);
-	}
-}
-
-const mapStateToProps = (state: IApplicationState) => ({
-	customEmojis: state.customEmojis,
-	baseUrl: state.share.server.server || state.server.server
 });
 
-export default connect(mapStateToProps)(EmojiPicker);
+export default EmojiPicker;