Chore: Migrate ThreadMessagesView to Typescript

app/stacks/types.ts

@@ -18,7 +18,7 @@ export type ChatsStackParamList = {
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room: IRoom;
+		room?: IRoom;
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
 		roomUserId?: string;

app/views/ThreadMessagesView/Dropdown/DropdownItem.js → app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { themes } from '../../../constants/colors';
@@ -23,7 +22,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-const DropdownItem = React.memo(({ theme, onPress, iconName, text }) => (
+interface IDropdownItem {
+	text: string;
+	iconName: string;
+	theme: string;
+	onPress: () => void;
+}
+
+const DropdownItem = React.memo(({ theme, onPress, iconName, text }: IDropdownItem) => (
 	<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
 		<View style={styles.container}>
 			<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
@@ -32,11 +38,4 @@ const DropdownItem = React.memo(({ theme, onPress, iconName, text }) => (
 	</Touch>
 ));
 
-DropdownItem.propTypes = {
-	text: PropTypes.string,
-	iconName: PropTypes.string,
-	theme: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default withTheme(DropdownItem);

app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.js → app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import I18n from '../../../i18n';
 import DropdownItem from './DropdownItem';
 
-const DropdownItemFilter = ({ currentFilter, value, onPress }) => (
+interface IDropdownItemFilter {
+	currentFilter: string;
+	value: string;
+	onPress: (value: string) => void;
+}
+
+const DropdownItemFilter = ({ currentFilter, value, onPress }: IDropdownItemFilter): JSX.Element => (
 	<DropdownItem text={I18n.t(value)} iconName={currentFilter === value ? 'check' : null} onPress={() => onPress(value)} />
 );
 
-DropdownItemFilter.propTypes = {
-	currentFilter: PropTypes.string,
-	value: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default DropdownItemFilter;

app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.js → app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { FILTER } from '../filters';
 import I18n from '../../../i18n';
 import DropdownItem from './DropdownItem';
 
-const DropdownItemHeader = ({ currentFilter, onPress }) => {
+interface IDropdownItemHeader {
+	currentFilter: string;
+	onPress: () => void;
+}
+
+const DropdownItemHeader = ({ currentFilter, onPress }: IDropdownItemHeader): JSX.Element => {
 	let text;
 	switch (currentFilter) {
 		case FILTER.FOLLOWING:
@@ -21,9 +25,4 @@ const DropdownItemHeader = ({ currentFilter, onPress }) => {
 	return <DropdownItem text={text} iconName='filter' onPress={onPress} />;
 };
 
-DropdownItemHeader.propTypes = {
-	currentFilter: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default DropdownItemHeader;

app/views/ThreadMessagesView/Dropdown/index.js → app/views/ThreadMessagesView/Dropdown/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
-import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import styles from '../styles';
 import { themes } from '../../../constants/colors';
@@ -14,17 +13,19 @@ import DropdownItemHeader from './DropdownItemHeader';
 
 const ANIMATION_DURATION = 200;
 
-class Dropdown extends React.Component {
-	static propTypes = {
-		isMasterDetail: PropTypes.bool,
-		theme: PropTypes.string,
-		insets: PropTypes.object,
-		currentFilter: PropTypes.string,
-		onClose: PropTypes.func,
-		onFilterSelected: PropTypes.func
-	};
+interface IDropdownProps {
+	isMasterDetail: boolean;
+	theme: string;
+	insets: EdgeInsets;
+	currentFilter: string;
+	onClose: () => void;
+	onFilterSelected: (value: string) => void;
+}
+
+class Dropdown extends React.Component<IDropdownProps> {
+	private animatedValue: Animated.Value;
 
-	constructor(props) {
+	constructor(props: IDropdownProps) {
 		super(props);
 		this.animatedValue = new Animated.Value(0);
 	}

app/views/ThreadMessagesView/Item.js → app/views/ThreadMessagesView/Item.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { StyleSheet, Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
@@ -56,7 +55,18 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }) => {
+interface IItem {
+	item: any;
+	baseUrl: string;
+	theme: string;
+	useRealName: boolean;
+	user: any;
+	badgeColor: string;
+	onPress: (item: any) => void;
+	toggleFollowThread: (isFollowing: boolean, id: string) => void;
+}
+
+const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem) => {
 	const username = (useRealName && item?.u?.name) || item?.u?.username;
 	let time;
 	if (item?.ts) {
@@ -69,16 +79,7 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
 			testID={`thread-messages-view-${item.msg}`}
 			style={{ backgroundColor: themes[theme].backgroundColor }}>
 			<View style={styles.container}>
-				<Avatar
-					style={styles.avatar}
-					text={item?.u?.username}
-					size={36}
-					borderRadius={4}
-					baseUrl={baseUrl}
-					userId={user?.id}
-					token={user?.token}
-					theme={theme}
-				/>
+				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
 						<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>
@@ -87,6 +88,7 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
 						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
 					</View>
 					<View style={styles.messageContainer}>
+						{/* @ts-ignore */}
 						<Markdown
 							msg={makeThreadName(item)}
 							baseUrl={baseUrl}
@@ -105,15 +107,4 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
 	);
 };
 
-Item.propTypes = {
-	item: PropTypes.object,
-	baseUrl: PropTypes.string,
-	theme: PropTypes.string,
-	useRealName: PropTypes.bool,
-	user: PropTypes.object,
-	badgeColor: PropTypes.string,
-	onPress: PropTypes.func,
-	toggleFollowThread: PropTypes.func
-};
-
 export default withTheme(Item);

app/views/ThreadMessagesView/filters.ts

@@ -0,0 +1,5 @@
+export enum FILTER {
+	ALL = 'All',
+	FOLLOWING = 'Following',
+	UNREAD = 'Unread'
+}