Chore: Migrate ThreadMessagesView to Typescript

app/definitions/IMention.ts

@@ -0,0 +1,6 @@
+export interface IMention {
+	_id: string;
+	name: string;
+	username: string;
+	type: string;
+}

app/definitions/IReaction.ts

@@ -0,0 +1,5 @@
+export interface IReaction {
+	_id: string;
+	emoji: string;
+	usernames: string[];
+}

app/definitions/IRoom.ts

@@ -1,4 +1,7 @@
+import Model from '@nozbe/watermelondb/Model';
+
 import { IRocketChatRecord } from './IRocketChatRecord';
+import { IThreadModel } from './IThread';
 
 export enum RoomType {
 	GROUP = 'p',
@@ -24,4 +27,12 @@ export interface IRoom extends IRocketChatRecord {
 	autoTranslate?: boolean;
 	observe?: Function;
 	usedCannedResponse: string;
+	lastThreadSync?: Date;
+	tunread?: string[];
+}
+
+interface IRoomAssociation {
+	threads: { fetch(): IThreadModel[] };
 }
+
+export type IRoomModel = IRoom & Model & IRoomAssociation;

app/definitions/IThread.ts

@@ -0,0 +1,70 @@
+import Model from '@nozbe/watermelondb/Model';
+
+import { IAttachment } from './IAttachment';
+import { IMention } from './IMention';
+import { IReaction } from './IReaction';
+import { RoomType } from './IRoom';
+import { IUrl } from './IUrl';
+
+interface IFileThread {
+	_id: string;
+	name: string;
+	type: string;
+}
+export interface IThreadResult {
+	_id: string;
+	rid: string;
+	ts: string;
+	msg: string;
+	file?: IFileThread;
+	files?: IFileThread[];
+	groupable?: boolean;
+	attachments?: IAttachment[];
+	md?: any[];
+	u: { _id: string; username: string; name: string };
+	_updatedAt: string;
+	urls: any[];
+	mentions: any[];
+	channels: any[];
+	replies: string[];
+	tcount: number;
+	tlm: string;
+}
+
+export interface IThread {
+	id: string;
+	msg: string;
+	t: RoomType;
+	rid: string;
+	_updatedAt: Date;
+	ts: Date;
+	u: { _id: string; username: string; name: string };
+	alias: any;
+	parseUrls: any;
+	groupable: boolean;
+	avatar: string;
+	emoji: any;
+	attachments: IAttachment[];
+	urls: IUrl[];
+	status: number;
+	pinned: boolean;
+	starred: boolean;
+	editedBy: { username: string };
+	reactions: IReaction[];
+	role: string;
+	drid: string;
+	dcount: number;
+	dlm: number;
+	tmid: string;
+	tcount: number;
+	tlm: Date;
+	replies: string[];
+	mentions: IMention[];
+	channels: [];
+	unread: boolean;
+	autoTranslate: boolean;
+	translations: any;
+	e2e: any;
+}
+
+export type IThreadModel = IThread & Model;

app/definitions/IUrl.ts

@@ -0,0 +1,6 @@
+export interface IUrl {
+	title: string;
+	description: string;
+	image: string;
+	url: string;
+}

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,17 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import { FILTER } from '../filters';
+import { Filter } from '../filters';
 import I18n from '../../../i18n';
 import DropdownItem from './DropdownItem';
 
-const DropdownItemHeader = ({ currentFilter, onPress }) => {
+interface IDropdownItemHeader {
+	currentFilter: Filter;
+	onPress: () => void;
+}
+
+const DropdownItemHeader = ({ currentFilter, onPress }: IDropdownItemHeader): JSX.Element => {
 	let text;
 	switch (currentFilter) {
-		case FILTER.FOLLOWING:
+		case Filter.Following:
 			text = I18n.t('Threads_displaying_following');
 			break;
-		case FILTER.UNREAD:
+		case Filter.Unread:
 			text = I18n.t('Threads_displaying_unread');
 			break;
 		default:
@@ -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,30 +1,31 @@
 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';
 import { withTheme } from '../../../theme';
 import { headerHeight } from '../../../containers/Header';
 import * as List from '../../../containers/List';
-import { FILTER } from '../filters';
+import { Filter } from '../filters';
 import DropdownItemFilter from './DropdownItemFilter';
 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: Filter;
+	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);
 	}
@@ -85,9 +86,9 @@ class Dropdown extends React.Component {
 					]}>
 					<DropdownItemHeader currentFilter={currentFilter} onPress={this.close} />
 					<List.Separator />
-					<DropdownItemFilter currentFilter={currentFilter} value={FILTER.ALL} onPress={onFilterSelected} />
-					<DropdownItemFilter currentFilter={currentFilter} value={FILTER.FOLLOWING} onPress={onFilterSelected} />
-					<DropdownItemFilter currentFilter={currentFilter} value={FILTER.UNREAD} onPress={onFilterSelected} />
+					<DropdownItemFilter currentFilter={currentFilter} value={Filter.All} onPress={onFilterSelected} />
+					<DropdownItemFilter currentFilter={currentFilter} value={Filter.Following} onPress={onFilterSelected} />
+					<DropdownItemFilter currentFilter={currentFilter} value={Filter.Unread} onPress={onFilterSelected} />
 				</Animated.View>
 			</>
 		);

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';
 
@@ -10,6 +9,7 @@ import { themes } from '../../constants/colors';
 import Markdown from '../../containers/markdown';
 import { formatDateThreads, makeThreadName } from '../../utils/room';
 import ThreadDetails from '../../containers/ThreadDetails';
+import { IThreadModel } from '../../definitions/IThread';
 
 const styles = StyleSheet.create({
 	container: {
@@ -56,7 +56,18 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }) => {
+interface IItem {
+	item: IThreadModel;
+	baseUrl: string;
+	theme: string;
+	useRealName: boolean;
+	user: any;
+	badgeColor: string;
+	onPress: (item: IThreadModel) => 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 +80,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 +89,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 +108,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'
+}