Chore: Migrate CannedResponsesListView to Typescript

app/definitions/ICannedResponse.ts

@@ -0,0 +1,31 @@
+export interface IDepartment {
+	_id: string;
+	enabled: boolean;
+	name: string;
+	description: string;
+	showOnRegistration: boolean;
+	showOnOfflineForm: boolean;
+	requestTagBeforeClosingChat: boolean;
+	email: string;
+	chatClosingTags: string[];
+	offlineMessageChannelName: string;
+	maxNumberSimultaneousChat: number;
+	abandonedRoomsCloseCustomMessage: string;
+	waitingQueueMessage: string;
+	departmentsAllowedToForward: string;
+	_updatedAt: Date;
+	numAgents: number;
+	ancestors: string[];
+}
+
+export interface ICannedResponse {
+	_id: string;
+	shortcut: string;
+	text: string;
+	scope: string;
+	tags: string[];
+	createdBy: { _id: string; username: string };
+	userId: string;
+	scopeName?: string;
+	departmentId?: string;
+}

app/definitions/IRoom.ts

@@ -24,4 +24,5 @@ export interface IRoom extends IRocketChatRecord {
 	autoTranslate?: boolean;
 	observe?: Function;
 	usedCannedResponse: string;
+	username?: string;
 }

app/stacks/types.ts

@@ -7,6 +7,7 @@ import { IServer } from '../definitions/IServer';
 import { IAttachment } from '../definitions/IAttachment';
 import { IMessage } from '../definitions/IMessage';
 import { IRoom, RoomType } from '../definitions/IRoom';
+import { ICannedResponse } from '../definitions/ICannedResponse';
 
 export type ChatsStackParamList = {
 	RoomsListView: undefined;
@@ -18,7 +19,7 @@ export type ChatsStackParamList = {
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room: IRoom;
+		room?: IRoom;
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
 		roomUserId?: string;
@@ -135,12 +136,7 @@ export type ChatsStackParamList = {
 		rid: string;
 	};
 	CannedResponseDetail: {
-		cannedResponse: {
-			shortcut: string;
-			text: string;
-			scopeName: string;
-			tags: string[];
-		};
+		cannedResponse: ICannedResponse;
 		room: IRoom;
 	};
 };

app/views/CannedResponseDetail.js → app/views/CannedResponseDetail.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
 import { StyleSheet, Text, View, ScrollView } from 'react-native';
 import { useSelector } from 'react-redux';
 
@@ -13,6 +14,8 @@ import Navigation from '../lib/Navigation';
 import { goRoom } from '../utils/goRoom';
 import { themes } from '../constants/colors';
 import Markdown from '../containers/markdown';
+import { ICannedResponse } from '../definitions/ICannedResponse';
+import { ChatsStackParamList } from '../stacks/types';
 import sharedStyles from './Styles';
 
 const styles = StyleSheet.create({
@@ -68,35 +71,42 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ label, content, theme, testID }) =>
+interface IItem {
+	label: string;
+	content?: string;
+	theme: string;
+	testID?: string;
+}
+
+const Item = ({ label, content, theme, testID }: IItem) =>
 	content ? (
 		<View style={styles.item} testID={testID}>
 			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].titleText }]}>
 				{label}
 			</Text>
+			{/* @ts-ignore */}
 			<Markdown style={[styles.itemContent, { color: themes[theme].auxiliaryText }]} msg={content} theme={theme} />
 		</View>
 	) : null;
-Item.propTypes = {
-	label: PropTypes.string,
-	content: PropTypes.string,
-	theme: PropTypes.string,
-	testID: PropTypes.string
-};
 
-const CannedResponseDetail = ({ navigation, route }) => {
+interface ICannedResponseDetailProps {
+	navigation: StackNavigationProp<ChatsStackParamList, 'CannedResponseDetail'>;
+	route: RouteProp<ChatsStackParamList, 'CannedResponseDetail'>;
+}
+
+const CannedResponseDetail = ({ navigation, route }: ICannedResponseDetailProps): JSX.Element => {
 	const { cannedResponse } = route?.params;
 	const { theme } = useTheme();
-	const { isMasterDetail } = useSelector(state => state.app);
-	const { rooms } = useSelector(state => state.room);
+	const { isMasterDetail } = useSelector((state: any) => state.app);
+	const { rooms } = useSelector((state: any) => state.room);
 
 	useEffect(() => {
 		navigation.setOptions({
 			title: `!${cannedResponse?.shortcut}`
 		});
 	}, []);
 
-	const navigateToRoom = item => {
+	const navigateToRoom = (item: ICannedResponse) => {
 		const { room } = route.params;
 		const { name, username } = room;
 		const params = {
@@ -163,9 +173,4 @@ const CannedResponseDetail = ({ navigation, route }) => {
 	);
 };
 
-CannedResponseDetail.propTypes = {
-	navigation: PropTypes.object,
-	route: PropTypes.object
-};
-
 export default CannedResponseDetail;

app/views/CannedResponsesListView/CannedResponseItem.js → app/views/CannedResponsesListView/CannedResponseItem.tsx

@@ -1,14 +1,31 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { View, Text } from 'react-native';
-
 import Touchable from 'react-native-platform-touchable';
+
 import { themes } from '../../constants/colors';
 import Button from '../../containers/Button';
 import I18n from '../../i18n';
 import styles from './styles';
 
-const CannedResponseItem = ({ theme, onPressDetail, shortcut, scope, onPressUse, text, tags }) => (
+interface ICannedResponseItem {
+	theme: string;
+	onPressDetail: () => void;
+	shortcut: string;
+	scope: string;
+	onPressUse: () => void;
+	text: string;
+	tags: string[];
+}
+
+const CannedResponseItem = ({
+	theme,
+	onPressDetail = () => {},
+	shortcut,
+	scope,
+	onPressUse = () => {},
+	text,
+	tags
+}: ICannedResponseItem): JSX.Element => (
 	<Touchable onPress={onPressDetail} style={[styles.wrapCannedItem, { backgroundColor: themes[theme].messageboxBackground }]}>
 		<>
 			<View style={styles.cannedRow}>
@@ -43,19 +60,4 @@ const CannedResponseItem = ({ theme, onPressDetail, shortcut, scope, onPressUse,
 	</Touchable>
 );
 
-CannedResponseItem.propTypes = {
-	theme: PropTypes.string,
-	onPressDetail: PropTypes.func,
-	shortcut: PropTypes.string,
-	scope: PropTypes.string,
-	onPressUse: PropTypes.func,
-	text: PropTypes.string,
-	tags: PropTypes.array
-};
-
-CannedResponseItem.defaultProps = {
-	onPressDetail: () => {},
-	onPressUse: () => {}
-};
-
 export default CannedResponseItem;

app/views/CannedResponsesListView/Dropdown/DropdownItem.js → app/views/CannedResponsesListView/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';
@@ -25,7 +24,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>
@@ -34,11 +40,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/CannedResponsesListView/Dropdown/DropdownItemFilter.js → app/views/CannedResponsesListView/Dropdown/DropdownItemFilter.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import { IDepartment } from '../../../definitions/ICannedResponse';
 import DropdownItem from './DropdownItem';
 
-const DropdownItemFilter = ({ currentDepartment, value, onPress }) => (
+interface IDropdownItemFilter {
+	currentDepartment: IDepartment;
+	value: IDepartment;
+	onPress: (value: IDepartment) => void;
+}
+
+const DropdownItemFilter = ({ currentDepartment, value, onPress }: IDropdownItemFilter): JSX.Element => (
 	<DropdownItem
 		text={value?.name}
 		iconName={currentDepartment?._id === value?._id ? 'check' : null}
 		onPress={() => onPress(value)}
 	/>
 );
 
-DropdownItemFilter.propTypes = {
-	currentDepartment: PropTypes.object,
-	value: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default DropdownItemFilter;

app/views/CannedResponsesListView/Dropdown/DropdownItemHeader.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IDepartment } from '../../../definitions/ICannedResponse';
+import DropdownItem from './DropdownItem';
+
+interface IDropdownItemHeader {
+	department: IDepartment;
+	onPress: () => void;
+}
+
+const DropdownItemHeader = ({ department, onPress }: IDropdownItemHeader): JSX.Element => (
+	<DropdownItem text={department?.name} iconName='filter' onPress={onPress} />
+);
+
+export default DropdownItemHeader;

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

@@ -1,31 +1,33 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Animated, Easing, FlatList, 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 { IDepartment } from '../../../definitions/ICannedResponse';
 import DropdownItemFilter from './DropdownItemFilter';
 import DropdownItemHeader from './DropdownItemHeader';
 import { ROW_HEIGHT } from './DropdownItem';
 
 const ANIMATION_DURATION = 200;
 
-class Dropdown extends React.Component {
-	static propTypes = {
-		isMasterDetail: PropTypes.bool,
-		theme: PropTypes.string,
-		insets: PropTypes.object,
-		currentDepartment: PropTypes.object,
-		onClose: PropTypes.func,
-		onDepartmentSelected: PropTypes.func,
-		departments: PropTypes.array
-	};
+interface IDropdownProps {
+	isMasterDetail: boolean;
+	theme: string;
+	insets: EdgeInsets;
+	currentDepartment: IDepartment;
+	onClose: () => void;
+	onDepartmentSelected: (value: IDepartment) => void;
+	departments: IDepartment[];
+}
+
+class Dropdown extends React.Component<IDropdownProps> {
+	private animatedValue: Animated.Value;
 
-	constructor(props) {
+	constructor(props: IDropdownProps) {
 		super(props);
 		this.animatedValue = new Animated.Value(0);
 	}