Chore: Migrate CannedResponsesListView to Typescript

app/containers/SearchHeader.tsx

@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 
 interface ISearchHeaderProps {
 	onSearchChangeText?: (text: string) => void;
-	testID: string;
+	testID?: string;
 }
 
 const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.Element => {

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/stacks/types.ts

@@ -8,6 +8,7 @@ import { IServer } from '../definitions/IServer';
 import { IAttachment } from '../definitions/IAttachment';
 import { IMessage } from '../definitions/IMessage';
 import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
+import { ICannedResponse } from '../definitions/ICannedResponse';
 
 export type ChatsStackParamList = {
 	RoomsListView: undefined;
@@ -137,12 +138,7 @@ export type ChatsStackParamList = {
 		rid: string;
 	};
 	CannedResponseDetail: {
-		cannedResponse: {
-			shortcut: string;
-			text: string;
-			scopeName: string;
-			tags: string[];
-		};
+		cannedResponse: ICannedResponse;
 		room: ISubscription;
 	};
 };

app/utils/goRoom.ts

@@ -44,6 +44,7 @@ export const goRoom = async ({
 	isMasterDetail: boolean;
 	navigationMethod?: any;
 	jumpToMessageId?: string;
+	usedCannedResponse?: string;
 }): Promise<void> => {
 	if (item.t === SubscriptionType.DIRECT && item?.search) {
 		// if user is using the search we need first to join/create room
@@ -54,7 +55,7 @@ export const goRoom = async ({
 				return navigate({
 					item: {
 						rid: result.room._id,
-						name: username,
+						name: username || '',
 						t: SubscriptionType.DIRECT
 					},
 					isMasterDetail,

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,43 +71,49 @@ 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 { name } = room;
 		const params = {
 			rid: room.rid,
 			name: RocketChat.getRoomTitle({
 				t: room.t,
-				fname: name,
-				name: username
+				fname: name
 			}),
 			t: room.t,
 			roomUserId: RocketChat.getUidDirectMessage(room),
@@ -115,7 +124,7 @@ const CannedResponseDetail = ({ navigation, route }) => {
 			// if it's on master detail layout, we close the modal and replace RoomView
 			if (isMasterDetail) {
 				Navigation.navigate('DrawerNavigator');
-				goRoom({ item: params, isMasterDetail, usedCannedResponse: item.text });
+				goRoom({ item: params, isMasterDetail });
 			} else {
 				let navigate = navigation.push;
 				// if this is a room focused
@@ -163,9 +172,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.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { themes } from '../../../constants/colors';
+import { useTheme } from '../../../theme';
+import Touch from '../../../utils/touch';
+import { CustomIcon } from '../../../lib/Icons';
+import sharedStyles from '../../Styles';
+
+export const ROW_HEIGHT = 44;
+
+const styles = StyleSheet.create({
+	container: {
+		paddingVertical: 11,
+		height: ROW_HEIGHT,
+		paddingHorizontal: 16,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	text: {
+		flex: 1,
+		fontSize: 16,
+		...sharedStyles.textRegular
+	}
+});
+
+interface IDropdownItem {
+	text: string;
+	iconName: string | null;
+	onPress: () => void;
+}
+
+const DropdownItem = React.memo(({ onPress, iconName, text }: IDropdownItem) => {
+	const { theme } = useTheme();
+
+	return (
+		<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<View style={styles.container}>
+				<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
+				{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null}
+			</View>
+		</Touch>
+	);
+});
+
+export default 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;