Chore: Migrate RoomItem to Hooks (#4310)

* migrate roomItem to ts and fix some types

* remove unnecessary verification

* fix types

* fix SubscriptionType

* review

* remove theme prop driling and change file to tsx

* Fix component not re-rendering

* Remove a few props from attrs

* Remove accessibilityLabel state

* Fix propsAreEqual

* Fix cleanup

* Remove ts-ignore

Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/RoomItem/IconOrAvatar.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View } from 'react-native';
-import PropTypes from 'prop-types';
 
 import Avatar from '../Avatar';
 import { DisplayMode } from '../../lib/constants';
 import TypeIcon from './TypeIcon';
 import styles from './styles';
+import { IIconOrAvatar } from './interfaces';
 
 const IconOrAvatar = ({
 	avatar,
@@ -17,10 +17,9 @@ const IconOrAvatar = ({
 	isGroupChat,
 	teamMain,
 	showLastMessage,
-	theme,
 	displayMode,
 	sourceType
-}) => {
+}: IIconOrAvatar): React.ReactElement | null => {
 	if (showAvatar) {
 		return (
 			<Avatar text={avatar} size={displayMode === DisplayMode.Condensed ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
@@ -35,7 +34,6 @@ const IconOrAvatar = ({
 					prid={prid}
 					status={status}
 					isGroupChat={isGroupChat}
-					theme={theme}
 					teamMain={teamMain}
 					size={24}
 					style={{ marginRight: 12 }}
@@ -48,18 +46,4 @@ const IconOrAvatar = ({
 	return null;
 };
 
-IconOrAvatar.propTypes = {
-	avatar: PropTypes.string,
-	type: PropTypes.string,
-	theme: PropTypes.string,
-	rid: PropTypes.string,
-	showAvatar: PropTypes.bool,
-	displayMode: PropTypes.string,
-	prid: PropTypes.string,
-	status: PropTypes.string,
-	isGroupChat: PropTypes.bool,
-	teamMain: PropTypes.bool,
-	showLastMessage: PropTypes.bool
-};
-
 export default IconOrAvatar;

app/containers/RoomItem/LastMessage.tsx

@@ -4,8 +4,9 @@ import { dequal } from 'dequal';
 import I18n from '../../i18n';
 import styles from './styles';
 import { MarkdownPreview } from '../markdown';
-import { E2E_MESSAGE_TYPE, E2E_STATUS, themes } from '../../lib/constants';
+import { E2E_MESSAGE_TYPE, E2E_STATUS } from '../../lib/constants';
 import { ILastMessageProps } from './interfaces';
+import { useTheme } from '../../theme';
 
 const formatMsg = ({ lastMessage, type, showLastMessage, username, useRealName }: Partial<ILastMessageProps>) => {
 	if (!showLastMessage) {
@@ -46,8 +47,9 @@ const formatMsg = ({ lastMessage, type, showLastMessage, username, useRealName }
 
 const arePropsEqual = (oldProps: any, newProps: any) => dequal(oldProps, newProps);
 
-const LastMessage = React.memo(
-	({ lastMessage, type, showLastMessage, username, alert, useRealName, theme }: ILastMessageProps) => (
+const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username, alert, useRealName }: ILastMessageProps) => {
+	const { colors } = useTheme();
+	return (
 		<MarkdownPreview
 			msg={formatMsg({
 				lastMessage,
@@ -56,12 +58,11 @@ const LastMessage = React.memo(
 				username,
 				useRealName
 			})}
-			style={[styles.markdownText, { color: alert ? themes[theme].bodyText : themes[theme].auxiliaryText }]}
+			style={[styles.markdownText, { color: alert ? colors.bodyText : colors.auxiliaryText }]}
 			numberOfLines={2}
 			testID='room-item-last-message'
 		/>
-	),
-	arePropsEqual
-);
+	);
+}, arePropsEqual);
 
 export default LastMessage;

app/containers/RoomItem/RoomItem.tsx

@@ -25,7 +25,6 @@ const RoomItem = ({
 	showLastMessage,
 	status = 'offline',
 	useRealName,
-	theme,
 	isFocused,
 	isGroupChat,
 	isRead,
@@ -67,14 +66,13 @@ const RoomItem = ({
 		hideChannel={hideChannel}
 		testID={testID}
 		type={type}
-		isFocused={isFocused}
+		isFocused={!!isFocused}
 		swipeEnabled={swipeEnabled}
 		displayMode={displayMode}>
 		<Wrapper
 			accessibilityLabel={accessibilityLabel}
 			avatar={avatar}
 			type={type}
-			theme={theme}
 			rid={rid}
 			prid={prid}
 			status={status}
@@ -82,7 +80,7 @@ const RoomItem = ({
 			teamMain={teamMain}
 			displayMode={displayMode}
 			showAvatar={showAvatar}
-			showLastMessage={showLastMessage}
+			showLastMessage={!!showLastMessage}
 			sourceType={sourceType}>
 			{showLastMessage && displayMode === DisplayMode.Expanded ? (
 				<>
@@ -97,19 +95,18 @@ const RoomItem = ({
 								sourceType={sourceType}
 							/>
 						) : null}
-						<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
+						<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 						{autoJoin ? <Tag testID='auto-join-tag' name={I18n.t('Auto-join')} /> : null}
-						<UpdatedAt date={date} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
+						<UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 					</View>
 					<View style={styles.row}>
 						<LastMessage
 							lastMessage={lastMessage}
 							type={type}
 							showLastMessage={showLastMessage}
-							username={username}
+							username={username || ''}
 							alert={alert && !hideUnreadStatus}
 							useRealName={useRealName}
-							theme={theme}
 						/>
 						<UnreadBadge
 							unread={unread}
@@ -135,10 +132,10 @@ const RoomItem = ({
 						style={{ marginRight: 8 }}
 						sourceType={sourceType}
 					/>
-					<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
+					<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 					{autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null}
 					<View style={styles.wrapUpdatedAndBadge}>
-						<UpdatedAt date={date} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
+						<UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 						<UnreadBadge
 							unread={unread}
 							userMentions={userMentions}

app/containers/RoomItem/Title.tsx

@@ -2,16 +2,19 @@ import React from 'react';
 import { Text } from 'react-native';
 
 import styles from './styles';
-import { themes } from '../../lib/constants';
 import { ITitleProps } from './interfaces';
+import { useTheme } from '../../theme';
 
-const Title = React.memo(({ name, theme, hideUnreadStatus, alert }: ITitleProps) => (
+const Title = React.memo(({ name, hideUnreadStatus, alert }: ITitleProps) => {
+	const { colors } = useTheme();
+	return (
 		<Text
-		style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: themes[theme].titleText }]}
+			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.titleText }]}
 			ellipsizeMode='tail'
 			numberOfLines={1}>
 			{name}
 		</Text>
-));
+	);
+});
 
 export default Title;

app/containers/RoomItem/UpdatedAt.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 import { Text } from 'react-native';
 
 import styles from './styles';
-import { themes } from '../../lib/constants';
 import { capitalize } from '../../lib/methods/helpers/room';
 import { IUpdatedAtProps } from './interfaces';
+import { useTheme } from '../../theme';
+
+const UpdatedAt = React.memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps) => {
+	const { colors } = useTheme();
 
-const UpdatedAt = React.memo(({ date, theme, hideUnreadStatus, alert }: IUpdatedAtProps) => {
 	if (!date) {
 		return null;
 	}
@@ -15,13 +17,13 @@ const UpdatedAt = React.memo(({ date, theme, hideUnreadStatus, alert }: IUpdated
 			style={[
 				styles.date,
 				{
-					color: themes[theme].auxiliaryText
+					color: colors.auxiliaryText
 				},
 				alert &&
 					!hideUnreadStatus && [
 						styles.updateAlert,
 						{
-							color: themes[theme].tintColor
+							color: colors.tintColor
 						}
 					]
 			]}

app/containers/RoomItem/Wrapper.tsx

@@ -1,26 +1,30 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { DisplayMode, themes } from '../../lib/constants';
+import { DisplayMode } from '../../lib/constants';
+import { useTheme } from '../../theme';
 import IconOrAvatar from './IconOrAvatar';
 import { IWrapperProps } from './interfaces';
 import styles from './styles';
 
-const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapperProps): React.ReactElement => (
+const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapperProps): React.ReactElement => {
+	const { colors } = useTheme();
+	return (
 		<View
 			style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
 			accessibilityLabel={accessibilityLabel}>
-		<IconOrAvatar theme={theme} displayMode={displayMode} {...props} />
+			<IconOrAvatar displayMode={displayMode} {...props} />
 			<View
 				style={[
 					styles.centerContainer,
 					{
-					borderColor: themes[theme].separatorColor
+						borderColor: colors.separatorColor
 					}
 				]}>
 				{children}
 			</View>
 		</View>
-);
+	);
+};
 
 export default Wrapper;

app/containers/RoomItem/index.tsx

@@ -1,171 +1,111 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { useEffect, useReducer, useRef } from 'react';
+import { Subscription } from 'rxjs';
 
 import I18n from '../../i18n';
-import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
+import { useAppSelector } from '../../lib/hooks';
+import { getUserPresence } from '../../lib/methods';
+import { isGroupChat } from '../../lib/methods/helpers';
 import { formatDate } from '../../lib/methods/helpers/room';
-import RoomItem from './RoomItem';
-import { ISubscription, TUserStatus } from '../../definitions';
 import { IRoomItemContainerProps } from './interfaces';
+import RoomItem from './RoomItem';
+import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
 
 export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED };
 
-const attrs = [
-	'width',
-	'status',
-	'connected',
-	'theme',
-	'isFocused',
-	'forceUpdate',
-	'showLastMessage',
-	'autoJoin',
-	'showAvatar',
-	'displayMode'
-];
+const attrs = ['width', 'isFocused', 'showLastMessage', 'autoJoin', 'showAvatar', 'displayMode'];
 
-class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
-	private roomSubscription: ISubscription | undefined;
-
-	static defaultProps: Partial<IRoomItemContainerProps> = {
-		status: 'offline',
-		getUserPresence: () => {},
-		getRoomTitle: () => 'title',
-		getRoomAvatar: () => '',
-		getIsGroupChat: () => false,
-		getIsRead: () => false,
-		swipeEnabled: true
-	};
-
-	constructor(props: IRoomItemContainerProps) {
-		super(props);
-		this.init();
-	}
-
-	componentDidMount() {
-		const { connected, getUserPresence, id } = this.props;
-		if (connected && this.isDirect) {
-			getUserPresence(id);
-		}
-	}
-
-	shouldComponentUpdate(nextProps: IRoomItemContainerProps) {
-		const { props } = this;
-		return !attrs.every(key => props[key] === nextProps[key]);
-	}
-
-	componentDidUpdate(prevProps: IRoomItemContainerProps) {
-		const { connected, getUserPresence, id } = this.props;
-		if (prevProps.connected !== connected && connected && this.isDirect) {
-			getUserPresence(id);
-		}
-	}
-
-	componentWillUnmount() {
-		if (this.roomSubscription?.unsubscribe) {
-			this.roomSubscription.unsubscribe();
-		}
-	}
-
-	get isGroupChat() {
-		const { item, getIsGroupChat } = this.props;
-		return getIsGroupChat(item);
-	}
-
-	get isDirect() {
-		const {
-			item: { t },
-			id
-		} = this.props;
-		return t === 'd' && id && !this.isGroupChat;
-	}
-
-	init = () => {
-		const { item } = this.props;
-		if (item?.observe) {
-			const observable = item.observe();
-			this.roomSubscription = observable?.subscribe?.(() => {
-				this.forceUpdate();
-			});
-		}
-	};
-
-	onPress = () => {
-		const { item, onPress } = this.props;
-		return onPress(item);
-	};
-
-	onLongPress = () => {
-		const { item, onLongPress } = this.props;
-		if (onLongPress) {
-			return onLongPress(item);
-		}
-	};
-
-	render() {
-		const {
+const RoomItemContainer = React.memo(
+	({
 		item,
-			getRoomTitle,
-			getRoomAvatar,
-			getIsRead,
+		id,
+		onPress,
+		onLongPress,
 		width,
 		toggleFav,
 		toggleRead,
 		hideChannel,
-			theme,
 		isFocused,
-			status,
 		showLastMessage,
 		username,
 		useRealName,
-			swipeEnabled,
 		autoJoin,
 		showAvatar,
-			displayMode
-		} = this.props;
+		displayMode,
+		getRoomTitle = () => 'title',
+		getRoomAvatar = () => '',
+		getIsRead = () => false,
+		swipeEnabled = true
+	}: IRoomItemContainerProps) => {
 		const name = getRoomTitle(item);
 		const testID = `rooms-list-view-item-${name}`;
 		const avatar = getRoomAvatar(item);
 		const isRead = getIsRead(item);
 		const date = item.roomUpdatedAt && formatDate(item.roomUpdatedAt);
 		const alert = item.alert || item.tunread?.length;
+		const connected = useAppSelector(state => state.meteor.connected);
+		const userStatus = useAppSelector(state => state.activeUsers[id || '']?.status);
+		const [_, forceUpdate] = useReducer(x => x + 1, 1);
+		const roomSubscription = useRef<Subscription | null>(null);
 
-		let accessibilityLabel = name;
+		useEffect(() => {
+			const init = () => {
+				if (item?.observe) {
+					const observable = item.observe();
+					roomSubscription.current = observable?.subscribe?.(() => {
+						if (_) forceUpdate();
+					});
+				}
+			};
+			init();
+
+			return () => roomSubscription.current?.unsubscribe();
+		}, []);
+
+		useEffect(() => {
+			const isDirect = !!(item.t === 'd' && id && !isGroupChat(item));
+			if (connected && isDirect) {
+				getUserPresence(id);
+			}
+		}, [connected]);
+
+		const handleOnPress = () => onPress(item);
+
+		const handleOnLongPress = () => onLongPress && onLongPress(item);
+
+		let accessibilityLabel = '';
 		if (item.unread === 1) {
-			accessibilityLabel += `, ${item.unread} ${I18n.t('alert')}`;
+			accessibilityLabel = `, ${item.unread} ${I18n.t('alert')}`;
 		} else if (item.unread > 1) {
-			accessibilityLabel += `, ${item.unread} ${I18n.t('alerts')}`;
+			accessibilityLabel = `, ${item.unread} ${I18n.t('alerts')}`;
 		}
-
 		if (item.userMentions > 0) {
-			accessibilityLabel += `, ${I18n.t('you_were_mentioned')}`;
+			accessibilityLabel = `, ${I18n.t('you_were_mentioned')}`;
 		}
-
 		if (date) {
-			accessibilityLabel += `, ${I18n.t('last_message')} ${date}`;
+			accessibilityLabel = `, ${I18n.t('last_message')} ${date}`;
 		}
 
 		return (
 			<RoomItem
 				name={name}
 				avatar={avatar}
-				isGroupChat={this.isGroupChat}
+				isGroupChat={isGroupChat(item)}
 				isRead={isRead}
-				onPress={this.onPress}
-				onLongPress={this.onLongPress}
+				onPress={handleOnPress}
+				onLongPress={handleOnLongPress}
 				date={date}
 				accessibilityLabel={accessibilityLabel}
 				width={width}
 				favorite={item.f}
-				toggleFav={toggleFav}
 				rid={item.rid}
+				toggleFav={toggleFav}
 				toggleRead={toggleRead}
 				hideChannel={hideChannel}
 				testID={testID}
 				type={item.t}
-				theme={theme}
 				isFocused={isFocused}
 				prid={item.prid}
-				status={status}
+				status={userStatus}
 				hideUnreadStatus={item.hideUnreadStatus}
 				hideMentionStatus={item.hideMentionStatus}
 				alert={alert}
@@ -187,23 +127,8 @@ class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 				sourceType={item.source}
 			/>
 		);
-	}
-}
+	},
+	(props, nextProps) => attrs.every(key => props[key] === nextProps[key])
+);
 
-const mapStateToProps = (state: any, ownProps: any) => {
-	let status = 'loading';
-	const { id, type, visitor = {} } = ownProps;
-	if (state.meteor.connected) {
-		if (type === 'd') {
-			status = state.activeUsers[id]?.status || 'loading';
-		} else if (type === 'l' && visitor?.status) {
-			({ status } = visitor);
-		}
-	}
-	return {
-		connected: state.meteor.connected,
-		status: status as TUserStatus
-	};
-};
-
-export default connect(mapStateToProps)(RoomItemContainer);
+export default RoomItemContainer;

app/containers/RoomItem/interfaces.ts

@@ -23,14 +23,12 @@ export interface IRightActionsProps {
 
 export interface ITitleProps {
 	name: string;
-	theme: TSupportedThemes;
 	hideUnreadStatus: boolean;
 	alert: boolean;
 }
 
 export interface IUpdatedAtProps {
 	date: string;
-	theme: TSupportedThemes;
 	hideUnreadStatus: boolean;
 	alert: boolean;
 }
@@ -39,13 +37,12 @@ export interface IWrapperProps {
 	accessibilityLabel: string;
 	avatar: string;
 	type: string;
-	theme: TSupportedThemes;
 	rid: string;
 	children: React.ReactElement;
 	displayMode: string;
 	prid: string;
 	showLastMessage: boolean;
-	status: string;
+	status: TUserStatus;
 	isGroupChat: boolean;
 	teamMain: boolean;
 	showAvatar: boolean;
@@ -64,48 +61,43 @@ export interface ITypeIconProps {
 	sourceType: IOmnichannelSource;
 }
 
-export interface IRoomItemContainerProps {
-	[key: string]: string | boolean | Function | number;
-	item: any;
-	showLastMessage: boolean;
-	id: string;
-	onPress: (item: any) => void;
-	onLongPress: (item: any) => Promise<void>;
-	username: string;
-	width: number;
-	status: TUserStatus;
-	toggleFav(): void;
-	toggleRead(): void;
-	hideChannel(): void;
-	useRealName: boolean;
-	getUserPresence: (uid: string) => void;
-	connected: boolean;
-	theme: TSupportedThemes;
-	isFocused: boolean;
-	getRoomTitle: (item: any) => string;
-	getRoomAvatar: (item: any) => string;
-	getIsGroupChat: (item: any) => boolean;
-	getIsRead: (item: any) => boolean;
-	swipeEnabled: boolean;
-	autoJoin: boolean;
-	showAvatar: boolean;
-	displayMode: string;
+interface IRoomItemTouchables {
+	toggleFav?: (rid: string, favorite: boolean) => Promise<void>;
+	toggleRead?: (rid: string, tIsRead: boolean) => Promise<void>;
+	hideChannel?: (rid: string, type: SubscriptionType) => Promise<void>;
+	onPress: (item?: any) => void;
+	onLongPress?: (item?: any) => void;
 }
 
-export interface IRoomItemProps {
+interface IBaseRoomItem extends IRoomItemTouchables {
+	[key: string]: any;
+	showLastMessage?: boolean;
+	useRealName: boolean;
+	isFocused?: boolean;
+	displayMode: string;
+	showAvatar: boolean;
+	swipeEnabled: boolean;
+	autoJoin?: boolean;
+	width: number;
+	username?: string;
+}
+
+export interface IRoomItemContainerProps extends IBaseRoomItem {
+	item: any;
+	id?: string;
+	getRoomTitle: (item: any) => string;
+	getRoomAvatar: (item: any) => string;
+	getIsRead?: (item: any) => boolean;
+}
+
+export interface IRoomItemProps extends IBaseRoomItem {
 	rid: string;
 	type: SubscriptionType;
 	prid: string;
 	name: string;
 	avatar: string;
-	showLastMessage: boolean;
-	username: string;
 	testID: string;
-	width: number;
 	status: TUserStatus;
-	useRealName: boolean;
-	theme: TSupportedThemes;
-	isFocused: boolean;
 	isGroupChat: boolean;
 	isRead: boolean;
 	teamMain: boolean;
@@ -121,22 +113,12 @@ export interface IRoomItemProps {
 	tunread: [];
 	tunreadUser: [];
 	tunreadGroup: [];
-	swipeEnabled: boolean;
-	toggleFav(): void;
-	toggleRead(): void;
-	onPress(): void;
-	onLongPress(): void;
-	hideChannel(): void;
-	autoJoin: boolean;
 	size?: number;
-	showAvatar: boolean;
-	displayMode: string;
 	sourceType: IOmnichannelSource;
 	hideMentionStatus?: boolean;
 }
 
 export interface ILastMessageProps {
-	theme: TSupportedThemes;
 	lastMessage: ILastMessage;
 	type: SubscriptionType;
 	showLastMessage: boolean;
@@ -145,20 +127,29 @@ export interface ILastMessageProps {
 	alert: boolean;
 }
 
-export interface ITouchableProps {
+export interface ITouchableProps extends IRoomItemTouchables {
 	children: JSX.Element;
-	type: string;
-	onPress(): void;
-	onLongPress(): void;
+	type: SubscriptionType;
 	testID: string;
 	width: number;
 	favorite: boolean;
 	isRead: boolean;
 	rid: string;
-	toggleFav: Function;
-	toggleRead: Function;
-	hideChannel: Function;
 	isFocused: boolean;
 	swipeEnabled: boolean;
 	displayMode: string;
 }
+
+export interface IIconOrAvatar {
+	avatar: string;
+	type: string;
+	rid: string;
+	showAvatar: boolean;
+	displayMode: string;
+	prid: string;
+	status: TUserStatus;
+	isGroupChat: boolean;
+	teamMain: boolean;
+	showLastMessage: boolean;
+	sourceType: IOmnichannelSource;
+}

app/ee/omnichannel/views/QueueListView.tsx

@@ -37,10 +37,10 @@ const keyExtractor = (item: IOmnichannelRoom) => item.rid;
 const QueueListView = React.memo(() => {
 	const navigation = useNavigation<TNavigation>();
 	const getScrollRef = useRef<FlatList<IOmnichannelRoom>>(null);
-	const { theme, colors } = useTheme();
+	const { colors } = useTheme();
 	const { width } = useDimensions();
 
-	const { userId, token, username } = useSelector(
+	const { username } = useSelector(
 		(state: IApplicationState) => ({
 			userId: getUserSelector(state).id,
 			username: getUserSelector(state).username,
@@ -58,7 +58,6 @@ const QueueListView = React.memo(() => {
 	);
 
 	const isMasterDetail = useSelector((state: IApplicationState) => state.app.isMasterDetail);
-	const server = useSelector((state: IApplicationState) => state.server.server);
 	const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
 	const queued = useSelector((state: IApplicationState) => getInquiryQueueSelector(state));
 
@@ -95,20 +94,13 @@ const QueueListView = React.memo(() => {
 		return (
 			<RoomItem
 				item={item}
-				theme={theme}
 				id={id}
-				type={item.t}
-				userId={userId}
 				username={username}
-				token={token}
-				baseUrl={server}
 				onPress={onPressItem}
-				testID={`queue-list-view-item-${item.name}`}
 				width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width}
-				useRealName={useRealName}
+				useRealName={!!useRealName}
 				getRoomTitle={getRoomTitle}
 				getRoomAvatar={getRoomAvatar}
-				visitor={item.v}
 				swipeEnabled={false}
 				showAvatar={showAvatar}
 				displayMode={displayMode}

app/views/RoomsListView/index.tsx

@@ -38,19 +38,26 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import Header, { getHeaderTitlePosition } from '../../containers/Header';
 import { withDimensions } from '../../dimensions';
 import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry';
-import { IApplicationState, IBaseScreen, ISubscription, IUser, RootEnum, TSubscriptionModel } from '../../definitions';
+import {
+	IApplicationState,
+	IBaseScreen,
+	ISubscription,
+	IUser,
+	RootEnum,
+	SubscriptionType,
+	TSubscriptionModel
+} from '../../definitions';
 import styles from './styles';
 import ServerDropdown from './ServerDropdown';
 import ListHeader, { TEncryptionBanner } from './ListHeader';
 import RoomsListHeaderView from './Header';
 import { ChatsStackParamList } from '../../stacks/types';
-import { getUserPresence, RoomTypes, search } from '../../lib/methods';
+import { RoomTypes, search } from '../../lib/methods';
 import {
 	getRoomAvatar,
 	getRoomTitle,
 	getUidDirectMessage,
 	hasPermission,
-	isGroupChat,
 	isRead,
 	debounce,
 	isIOS,
@@ -645,8 +652,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 
 	isSwipeEnabled = (item: IRoomItem) => !(item?.search || item?.joinCodeRequired || item?.outside);
 
-	handleGetUserPresence = (uid: string) => getUserPresence(uid);
-
 	get isGrouping() {
 		const { showUnread, showFavorites, groupByType } = this.props;
 		return showUnread || showFavorites || groupByType;
@@ -668,7 +673,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		}
 	};
 
-	toggleFav = async (rid: string, favorite: boolean) => {
+	toggleFav = async (rid: string, favorite: boolean): Promise<void> => {
 		logEvent(favorite ? events.RL_UNFAVORITE_CHANNEL : events.RL_FAVORITE_CHANNEL);
 		try {
 			const db = database.active;
@@ -718,11 +723,11 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		}
 	};
 
-	hideChannel = async (rid: string, type: RoomTypes) => {
+	hideChannel = async (rid: string, type: SubscriptionType) => {
 		logEvent(events.RL_HIDE_CHANNEL);
 		try {
 			const db = database.active;
-			const result = await Services.hideRoom(rid, type);
+			const result = await Services.hideRoom(rid, type as RoomTypes);
 			if (result.success) {
 				const subCollection = db.get('subscriptions');
 				await db.write(async () => {
@@ -938,7 +943,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 			user: { username },
 			StoreLastMessage,
 			useRealName,
-			theme,
 			isMasterDetail,
 			width,
 			showAvatar,
@@ -950,9 +954,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 		return (
 			<RoomItem
 				item={item}
-				theme={theme}
 				id={id}
-				type={item.t}
 				username={username}
 				showLastMessage={StoreLastMessage}
 				onPress={this.onPressItem}
@@ -961,12 +963,9 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 				toggleRead={this.toggleRead}
 				hideChannel={this.hideChannel}
 				useRealName={useRealName}
-				getUserPresence={this.handleGetUserPresence}
 				getRoomTitle={getRoomTitle}
 				getRoomAvatar={getRoomAvatar}
-				getIsGroupChat={isGroupChat}
 				getIsRead={isRead}
-				visitor={item.visitor}
 				isFocused={currentItem?.rid === item.rid}
 				swipeEnabled={swipeEnabled}
 				showAvatar={showAvatar}

app/views/TeamChannelsView.tsx

@@ -494,12 +494,10 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 	};
 
 	renderItem = ({ item }: { item: IItem }) => {
-		const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props;
+		const { StoreLastMessage, useRealName, width, showAvatar, displayMode } = this.props;
 		return (
 			<RoomItem
 				item={item}
-				theme={theme}
-				type={item.t}
 				showLastMessage={StoreLastMessage}
 				onPress={this.onPressItem}
 				width={width}