[IMPROVE] - migrating the MessageBox container (in progress)

app/containers/MessageBox/CommandsPreview/Item.tsx

@@ -1,5 +1,4 @@
 import React, { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
 import { TouchableOpacity } from 'react-native';
 import FastImage from '@rocket.chat/react-native-fast-image';
 
@@ -9,7 +8,16 @@ import { themes } from '../../../constants/colors';
 import MessageboxContext from '../Context';
 import ActivityIndicator from '../../ActivityIndicator';
 
-const Item = ({ item, theme }) => {
+interface IMessageBoxCommandsPreviewItem {
+	item: {
+		type: string;
+		id: string;
+		value: string;
+	};
+	theme: string;
+}
+
+const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
 	const context = useContext(MessageboxContext);
 	const { onPressCommandPreview } = context;
 	const [loading, setLoading] = useState(true);
@@ -38,9 +46,4 @@ const Item = ({ item, theme }) => {
 	);
 };
 
-Item.propTypes = {
-	item: PropTypes.object,
-	theme: PropTypes.string
-};
-
 export default Item;

app/containers/MessageBox/CommandsPreview/index.tsx

@@ -8,7 +8,13 @@ import styles from '../styles';
 import { themes } from '../../../constants/colors';
 import { withTheme } from '../../../theme';
 
-const CommandsPreview = React.memo(({ theme, commandPreview, showCommandPreview }) => {
+interface IMessageBoxCommandsPreview {
+	commandPreview: [];
+	showCommandPreview: boolean;
+	theme: string;
+}
+
+const CommandsPreview = React.memo(({ theme, commandPreview, showCommandPreview }: IMessageBoxCommandsPreview) => {
 	if (!showCommandPreview) {
 		return null;
 	}
@@ -18,7 +24,7 @@ const CommandsPreview = React.memo(({ theme, commandPreview, showCommandPreview
 			style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
 			data={commandPreview}
 			renderItem={({ item }) => <Item item={item} theme={theme} />}
-			keyExtractor={item => item.id}
+			keyExtractor={(item: any) => item.id}
 			keyboardShouldPersistTaps='always'
 			horizontal
 			showsHorizontalScrollIndicator={false}
@@ -37,10 +43,4 @@ const CommandsPreview = React.memo(({ theme, commandPreview, showCommandPreview
 	return true;
 });
 
-CommandsPreview.propTypes = {
-	commandPreview: PropTypes.array,
-	showCommandPreview: PropTypes.bool,
-	theme: PropTypes.string
-};
-
 export default withTheme(CommandsPreview);

app/containers/MessageBox/Context.js

@@ -1,4 +0,0 @@
-import React from 'react';
-
-const MessageboxContext = React.createContext();
-export default MessageboxContext;

app/containers/MessageBox/Context.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+// @ts-ignore
+const MessageboxContext = React.createContext<any>();
+export default MessageboxContext;

app/containers/MessageBox/Mentions/FixedMentionItem.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import styles from '../styles';
 import I18n from '../../../i18n';
 import { themes } from '../../../constants/colors';
 
-const FixedMentionItem = ({ item, onPress, theme }) => (
+interface IMessageBoxFixedMentionItem {
+	item: {
+		username: string;
+	};
+	onPress({}): void;
+	theme: string;
+}
+
+const FixedMentionItem = ({ item, onPress, theme }: IMessageBoxFixedMentionItem) => (
 	<TouchableOpacity
 		style={[
 			styles.mentionItem,
@@ -24,10 +31,4 @@ const FixedMentionItem = ({ item, onPress, theme }) => (
 	</TouchableOpacity>
 );
 
-FixedMentionItem.propTypes = {
-	item: PropTypes.object,
-	onPress: PropTypes.func,
-	theme: PropTypes.string
-};
-
 export default FixedMentionItem;

app/containers/MessageBox/Mentions/MentionEmoji.tsx

@@ -6,8 +6,13 @@ import shortnameToUnicode from '../../../utils/shortnameToUnicode';
 import styles from '../styles';
 import MessageboxContext from '../Context';
 import CustomEmoji from '../../EmojiPicker/CustomEmoji';
+import {TEmoji} from "../../EmojiPicker";
 
-const MentionEmoji = ({ item }) => {
+interface IMessageBoxMentionEmoji {
+	item: TEmoji;
+}
+
+const MentionEmoji = ({ item }: IMessageBoxMentionEmoji) => {
 	const context = useContext(MessageboxContext);
 	const { baseUrl } = context;
 

app/containers/MessageBox/Mentions/MentionItem.tsx

@@ -1,25 +1,32 @@
 import React, { useContext } from 'react';
 import { TouchableOpacity, Text } from 'react-native';
-import PropTypes from 'prop-types';
 
 import styles from '../styles';
 import Avatar from '../../Avatar';
 import MessageboxContext from '../Context';
 import FixedMentionItem from './FixedMentionItem';
 import MentionEmoji from './MentionEmoji';
-import {
-	MENTIONS_TRACKING_TYPE_EMOJIS,
-	MENTIONS_TRACKING_TYPE_COMMANDS
-} from '../constants';
+import { MENTIONS_TRACKING_TYPE_EMOJIS,  MENTIONS_TRACKING_TYPE_COMMANDS } from '../constants';
 import { themes } from '../../../constants/colors';
+import {TEmoji} from "../../EmojiPicker";
 
-const MentionItem = ({
-	item, trackingType, theme
-}) => {
+interface IMessageBoxMentionItem {
+	item: {
+		name: string;
+		command: string;
+		username: string;
+		t: string;
+		id: string;
+	} & TEmoji;
+	trackingType: string;
+	theme: string;
+}
+
+const MentionItem = ({ item, trackingType, theme }: IMessageBoxMentionItem) => {
 	const context = useContext(MessageboxContext);
 	const { onPressMention } = context;
 
-	const defineTestID = (type) => {
+	const defineTestID = (type: string) => {
 		switch (type) {
 			case MENTIONS_TRACKING_TYPE_EMOJIS:
 				return `mention-item-${ item.name || item }`;
@@ -83,10 +90,4 @@ const MentionItem = ({
 	);
 };
 
-MentionItem.propTypes = {
-	item: PropTypes.object,
-	trackingType: PropTypes.string,
-	theme: PropTypes.string
-};
-
 export default MentionItem;

app/containers/MessageBox/Mentions/index.tsx

@@ -7,7 +7,12 @@ import styles from '../styles';
 import MentionItem from './MentionItem';
 import { themes } from '../../../constants/colors';
 
-const Mentions = React.memo(({ mentions, trackingType, theme }) => {
+interface IMessageBoxMentions {
+	mentions: [];
+	trackingType: string;
+	theme: string;
+}
+const Mentions = React.memo(({ mentions, trackingType, theme }: IMessageBoxMentions) => {
 	if (!trackingType) {
 		return null;
 	}
@@ -18,7 +23,7 @@ const Mentions = React.memo(({ mentions, trackingType, theme }) => {
 				data={mentions}
 				extraData={mentions}
 				renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} theme={theme} />}
-				keyExtractor={item => item.rid || item.name || item.command || item}
+				keyExtractor={(item: any) => item.rid || item.name || item.command || item}
 				keyboardShouldPersistTaps='always'
 			/>
 		</View>
@@ -36,10 +41,4 @@ const Mentions = React.memo(({ mentions, trackingType, theme }) => {
 	return true;
 });
 
-Mentions.propTypes = {
-	mentions: PropTypes.array,
-	trackingType: PropTypes.string,
-	theme: PropTypes.string
-};
-
 export default Mentions;

app/containers/MessageBox/buttons/ActionsButton.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import BaseButton from './BaseButton';
 
-const ActionsButton = React.memo(({ theme, onPress }) => (
+interface IActionsButton {
+	theme: string;
+	onPress(): void;
+}
+
+const ActionsButton = React.memo(({ theme, onPress }: IActionsButton) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-actions'
@@ -13,9 +16,4 @@ const ActionsButton = React.memo(({ theme, onPress }) => (
 	/>
 ));
 
-ActionsButton.propTypes = {
-	theme: PropTypes.string,
-	onPress: PropTypes.func.isRequired
-};
-
 export default ActionsButton;

app/containers/MessageBox/buttons/BaseButton.tsx

@@ -1,33 +1,31 @@
 import React from 'react';
 import { BorderlessButton } from 'react-native-gesture-handler';
-import PropTypes from 'prop-types';
 
 import { themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import styles from '../styles';
 import I18n from '../../../i18n';
 
-const BaseButton = React.memo(({
-	onPress, testID, accessibilityLabel, icon, theme, color
-}) => (
+interface IBaseButton {
+	theme: string;
+	onPress(): void;
+	testID: string;
+	accessibilityLabel: string;
+	icon: string;
+	color: string;
+}
+
+const BaseButton = React.memo(({ onPress, testID, accessibilityLabel, icon, theme, color }: Partial<IBaseButton>) => (
 	<BorderlessButton
 		onPress={onPress}
 		style={styles.actionButton}
 		testID={testID}
+		// @ts-ignore
 		accessibilityLabel={I18n.t(accessibilityLabel)}
 		accessibilityTraits='button'
 	>
-		<CustomIcon name={icon} size={24} color={color ?? themes[theme].auxiliaryTintColor} />
+		<CustomIcon name={icon} size={24} color={color ?? themes[theme!].auxiliaryTintColor} />
 	</BorderlessButton>
 ));
 
-BaseButton.propTypes = {
-	theme: PropTypes.string,
-	onPress: PropTypes.func.isRequired,
-	testID: PropTypes.string.isRequired,
-	accessibilityLabel: PropTypes.string.isRequired,
-	icon: PropTypes.string.isRequired,
-	color: PropTypes.string
-};
-
 export default BaseButton;

app/containers/MessageBox/buttons/CancelEditingButton.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import BaseButton from './BaseButton';
 
-const CancelEditingButton = React.memo(({ theme, onPress }) => (
+interface ICancelEditingButton {
+	theme: string;
+	onPress():void;
+}
+
+const CancelEditingButton = React.memo(({ theme, onPress }: ICancelEditingButton) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-cancel-editing'
@@ -13,9 +16,4 @@ const CancelEditingButton = React.memo(({ theme, onPress }) => (
 	/>
 ));
 
-CancelEditingButton.propTypes = {
-	theme: PropTypes.string,
-	onPress: PropTypes.func.isRequired
-};
-
 export default CancelEditingButton;

app/containers/MessageBox/buttons/SendButton.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import BaseButton from './BaseButton';
 import { themes } from '../../../constants/colors';
 
-const SendButton = React.memo(({ theme, onPress }) => (
+interface ISendButton {
+	theme: string;
+	onPress(): void;
+}
+
+const SendButton = React.memo(({ theme, onPress }: ISendButton) => (
 	<BaseButton
 		onPress={onPress}
 		testID='messagebox-send-message'
@@ -15,9 +18,4 @@ const SendButton = React.memo(({ theme, onPress }) => (
 	/>
 ));
 
-SendButton.propTypes = {
-	theme: PropTypes.string,
-	onPress: PropTypes.func.isRequired
-};
-
 export default SendButton;

app/containers/MessageBox/buttons/ToggleEmojiButton.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
 import BaseButton from './BaseButton';
 
-const ToggleEmojiButton = React.memo(({
-	theme, show, open, close
-}) => {
+interface IToggleEmojiButton {
+	theme: string;
+	show: boolean;
+	open(): void;
+	close(): void;
+}
+
+const ToggleEmojiButton = React.memo(({ theme, show, open, close }: IToggleEmojiButton) => {
 	if (show) {
 		return (
 			<BaseButton
@@ -28,11 +31,4 @@ const ToggleEmojiButton = React.memo(({
 	);
 });
 
-ToggleEmojiButton.propTypes = {
-	theme: PropTypes.string,
-	show: PropTypes.bool,
-	open: PropTypes.func.isRequired,
-	close: PropTypes.func.isRequired
-};
-
 export default ToggleEmojiButton;