Chore: Evaluate RoomInfoView - TypeScript (#4107)

* Chore: Evaluate RoomInfoView - TypeScript

* refactor interfaces

app/definitions/ILivechatVisitor.ts

@@ -22,7 +22,7 @@ export interface IVisitorEmail {
 
 export interface ILivechatVisitor extends IRocketChatRecord {
 	username: string;
-	ts: Date;
+	ts: Date | string;
 	token: string;
 	department?: string;
 	name?: string;

app/views/RoomInfoView/CustomFields.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Item from './Item';
 
-const CustomFields = ({ customFields }: { customFields: { [key: string]: string } }) => {
+const CustomFields = ({ customFields }: { customFields?: { [key: string]: string } }) => {
 	if (customFields) {
 		return (
 			<>

app/views/RoomInfoView/Direct.tsx

@@ -7,8 +7,9 @@ import { useTheme } from '../../theme';
 import Timezone from './Timezone';
 import CustomFields from './CustomFields';
 import styles from './styles';
+import { IUserParsed } from '.';
 
-const Roles = ({ roles }: { roles: string[] }) => {
+const Roles = ({ roles }: { roles?: string[] }) => {
 	const { theme } = useTheme();
 
 	if (roles && roles.length) {
@@ -29,7 +30,7 @@ const Roles = ({ roles }: { roles: string[] }) => {
 	return null;
 };
 
-const Direct = ({ roomUser }: { roomUser: any }) => (
+const Direct = ({ roomUser }: { roomUser: IUserParsed }) => (
 	<>
 		<Roles roles={roomUser.parsedRoles} />
 		<Timezone utcOffset={roomUser.utcOffset} />

app/views/RoomInfoView/index.tsx

@@ -93,7 +93,7 @@ interface IRoomInfoViewProps {
 	roles: { [key: string]: string };
 }
 
-interface IUserParsed extends IUser {
+export interface IUserParsed extends IUser {
 	parsedRoles?: string[];
 }
 
@@ -104,8 +104,7 @@ export interface ILivechatVisitorModified extends ILivechatVisitor {
 
 interface IRoomInfoViewState {
 	room: ISubscription;
-	// TODO: Could be IUserParsed or ILivechatVisitorModified
-	roomUser: any;
+	roomUser: IUserParsed | ILivechatVisitorModified;
 	showEdit: boolean;
 }
 
@@ -214,7 +213,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 						params.os = `${ua.getOS().name} ${ua.getOS().version}`;
 						params.browser = `${ua.getBrowser().name} ${ua.getBrowser().version}`;
 					}
-					this.setState({ roomUser: { ...visitor, ...params } }, () => this.setHeader());
+					this.setState({ roomUser: { ...visitor, ...params } as ILivechatVisitorModified }, () => this.setHeader());
 				}
 			}
 		} catch (error) {
@@ -245,14 +244,14 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 						parsedRoles.parsedRoles = await this.parseRoles(roles);
 					}
 
-					this.setState({ roomUser: { ...user, ...parsedRoles } });
+					this.setState({ roomUser: { ...user, ...parsedRoles } as IUserParsed });
 				}
 			} catch {
 				// do nothing
 			}
 		} else {
 			try {
-				const { roles } = roomUser;
+				const { roles } = roomUser as IUserParsed;
 				if (roles && roles.length) {
 					const parsedRoles = await this.parseRoles(roles);
 					this.setState({ roomUser: { ...roomUser, parsedRoles } });
@@ -412,11 +411,11 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		const { room, roomUser } = this.state;
 
 		if (this.isDirect) {
-			return <Direct roomUser={roomUser} />;
+			return <Direct roomUser={roomUser as IUserParsed} />;
 		}
 
 		if (this.t === SubscriptionType.OMNICHANNEL) {
-			return <Livechat room={room} roomUser={roomUser} />;
+			return <Livechat room={room} roomUser={roomUser as ILivechatVisitorModified} />;
 		}
 		return <Channel room={room} />;
 	};
@@ -424,20 +423,21 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 	render() {
 		const { room, roomUser } = this.state;
 		const { theme } = this.props;
+		const roomUserParsed = roomUser as IUserParsed;
 
 		return (
 			<ScrollView style={[styles.scroll, { backgroundColor: themes[theme].backgroundColor }]}>
 				<StatusBar />
 				<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-info-view'>
 					<View style={[styles.avatarContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
-						{this.renderAvatar(room, roomUser)}
+						{this.renderAvatar(room, roomUserParsed)}
 						<View style={styles.roomTitleContainer}>
 							{renderRoomTitle({
 								room,
 								type: this.t,
-								name: roomUser?.name,
-								username: roomUser?.username,
-								statusText: roomUser?.statusText,
+								name: roomUserParsed?.name,
+								username: roomUserParsed?.username,
+								statusText: roomUserParsed?.statusText,
 								theme
 							})}
 						</View>