Chore: evaluate RoomItem (#4023)

* chore: evaluate `RoomItem`

* update: `RoomItem.storyshot`

* update: interfaces for RoomItem components

* update: UnreadBadge import and RoomItem interfaces

* remove: `avatarSize` from interfaces

* update: `RoomItem.storyshot`

app/containers/InAppNotification/NotifierComponent.tsx

@@ -10,7 +10,7 @@ import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
-import { ROW_HEIGHT } from '../../presentation/RoomItem';
+import { ROW_HEIGHT } from '../RoomItem';
 import { goRoom } from '../../utils/goRoom';
 import Navigation from '../../lib/navigation/appNavigation';
 import { useOrientation } from '../../dimensions';

app/presentation/RoomItem/Actions.tsx → app/containers/RoomItem/Actions.tsx

@@ -6,32 +6,13 @@ import { isRTL } from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import { DisplayMode, themes } from '../../lib/constants';
 import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
-import { TSupportedThemes } from '../../theme';
-
-interface ILeftActions {
-	theme: TSupportedThemes;
-	transX: any;
-	isRead: boolean;
-	width: number;
-	onToggleReadPress(): void;
-	displayMode: string;
-}
-
-interface IRightActions {
-	theme: TSupportedThemes;
-	transX: any;
-	favorite: boolean;
-	width: number;
-	toggleFav(): void;
-	onHidePress(): void;
-	displayMode: string;
-}
+import { ILeftActionsProps, IRightActionsProps } from './interfaces';
 
 const reverse = new Animated.Value(isRTL() ? -1 : 1);
 const CONDENSED_ICON_SIZE = 24;
 const EXPANDED_ICON_SIZE = 28;
 
-export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleReadPress, displayMode }: ILeftActions) => {
+export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleReadPress, displayMode }: ILeftActionsProps) => {
 	const translateX = Animated.multiply(
 		transX.interpolate({
 			inputRange: [0, ACTION_WIDTH],
@@ -71,7 +52,7 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
 });
 
 export const RightActions = React.memo(
-	({ transX, favorite, width, toggleFav, onHidePress, theme, displayMode }: IRightActions) => {
+	({ transX, favorite, width, toggleFav, onHidePress, theme, displayMode }: IRightActionsProps) => {
 		const translateXFav = Animated.multiply(
 			transX.interpolate({
 				inputRange: [-width / 2, -ACTION_WIDTH * 2, 0],

app/presentation/RoomItem/IconOrAvatar.js → app/containers/RoomItem/IconOrAvatar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
 
-import Avatar from '../../containers/Avatar';
+import Avatar from '../Avatar';
 import { DisplayMode } from '../../lib/constants';
 import TypeIcon from './TypeIcon';
 import styles from './styles';

app/presentation/RoomItem/LastMessage.tsx → app/containers/RoomItem/LastMessage.tsx

@@ -3,28 +3,11 @@ import { dequal } from 'dequal';
 
 import I18n from '../../i18n';
 import styles from './styles';
-import { MarkdownPreview } from '../../containers/markdown';
+import { MarkdownPreview } from '../markdown';
 import { E2E_MESSAGE_TYPE, E2E_STATUS, themes } from '../../lib/constants';
-import { TSupportedThemes } from '../../theme';
+import { ILastMessageProps } from './interfaces';
 
-interface ILastMessage {
-	theme: TSupportedThemes;
-	lastMessage: {
-		u: any;
-		pinned: boolean;
-		t: string;
-		attachments: any;
-		msg: string;
-		e2e: string;
-	};
-	type: string;
-	showLastMessage: boolean;
-	username: string;
-	useRealName: boolean;
-	alert: boolean;
-}
-
-const formatMsg = ({ lastMessage, type, showLastMessage, username, useRealName }: Partial<ILastMessage>) => {
+const formatMsg = ({ lastMessage, type, showLastMessage, username, useRealName }: Partial<ILastMessageProps>) => {
 	if (!showLastMessage) {
 		return '';
 	}
@@ -64,7 +47,7 @@ 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 }: ILastMessage) => (
+	({ lastMessage, type, showLastMessage, username, alert, useRealName, theme }: ILastMessageProps) => (
 		<MarkdownPreview
 			msg={formatMsg({
 				lastMessage,

app/presentation/RoomItem/RoomItem.tsx → app/containers/RoomItem/RoomItem.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import styles from './styles';
 import Wrapper from './Wrapper';
-import UnreadBadge from '../../containers/UnreadBadge';
+import UnreadBadge from '../UnreadBadge';
 import TypeIcon from './TypeIcon';
 import LastMessage from './LastMessage';
 import Title from './Title';
@@ -12,56 +12,7 @@ import Touchable from './Touchable';
 import Tag from './Tag';
 import I18n from '../../i18n';
 import { DisplayMode } from '../../lib/constants';
-import { TUserStatus, IOmnichannelSource } from '../../definitions';
-import { TSupportedThemes } from '../../theme';
-
-interface IRoomItem {
-	rid: string;
-	type: string;
-	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;
-	date: string;
-	accessibilityLabel: string;
-	lastMessage: {
-		u: any;
-		pinned: boolean;
-		t: string;
-		attachments: any;
-		msg: string;
-		e2e: string;
-	};
-	favorite: boolean;
-	alert: boolean;
-	hideUnreadStatus: boolean;
-	unread: number;
-	userMentions: number;
-	groupMentions: number;
-	tunread: [];
-	tunreadUser: [];
-	tunreadGroup: [];
-	swipeEnabled: boolean;
-	toggleFav(): void;
-	toggleRead(): void;
-	onPress(): void;
-	onLongPress(): void;
-	hideChannel(): void;
-	autoJoin: boolean;
-	showAvatar: boolean;
-	displayMode: string;
-	sourceType: IOmnichannelSource;
-}
+import { IRoomItemProps } from './interfaces';
 
 const RoomItem = ({
 	rid,
@@ -102,7 +53,7 @@ const RoomItem = ({
 	showAvatar,
 	displayMode,
 	sourceType
-}: IRoomItem) => (
+}: IRoomItemProps) => (
 	<Touchable
 		onPress={onPress}
 		onLongPress={onLongPress}

app/presentation/RoomItem/Title.tsx → app/containers/RoomItem/Title.tsx

@@ -3,16 +3,9 @@ import { Text } from 'react-native';
 
 import styles from './styles';
 import { themes } from '../../lib/constants';
-import { TSupportedThemes } from '../../theme';
+import { ITitleProps } from './interfaces';
 
-interface ITitle {
-	name: string;
-	theme: TSupportedThemes;
-	hideUnreadStatus: boolean;
-	alert: boolean;
-}
-
-const Title = React.memo(({ name, theme, hideUnreadStatus, alert }: ITitle) => (
+const Title = React.memo(({ name, theme, hideUnreadStatus, alert }: ITitleProps) => (
 	<Text
 		style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: themes[theme].titleText }]}
 		ellipsizeMode='tail'

app/presentation/RoomItem/Touchable.tsx → app/containers/RoomItem/Touchable.tsx

@@ -1,46 +1,28 @@
 import React from 'react';
 import { Animated } from 'react-native';
-import { LongPressGestureHandler, PanGestureHandler, State } from 'react-native-gesture-handler';
+import {
+	GestureEvent,
+	HandlerStateChangeEventPayload,
+	LongPressGestureHandler,
+	PanGestureHandler,
+	PanGestureHandlerEventPayload,
+	State
+} from 'react-native-gesture-handler';
 
 import Touch from '../../utils/touch';
 import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
 import { isRTL } from '../../i18n';
 import { themes } from '../../lib/constants';
 import { LeftActions, RightActions } from './Actions';
-import { TSupportedThemes } from '../../theme';
-
-interface ITouchableProps {
-	children: JSX.Element;
-	type: string;
-	onPress(): void;
-	onLongPress(): void;
-	testID: string;
-	width: number;
-	favorite: boolean;
-	isRead: boolean;
-	rid: string;
-	toggleFav: Function;
-	toggleRead: Function;
-	hideChannel: Function;
-	theme: TSupportedThemes;
-	isFocused: boolean;
-	swipeEnabled: boolean;
-	displayMode: string;
-}
+import { ITouchableProps } from './interfaces';
 
 class Touchable extends React.Component<ITouchableProps, any> {
 	private dragX: Animated.Value;
-
 	private rowOffSet: Animated.Value;
-
 	private reverse: Animated.Value;
-
 	private transX: Animated.AnimatedAddition;
-
 	private transXReverse: Animated.AnimatedMultiplication;
-
-	private _onGestureEvent: (...args: any[]) => void;
-
+	private _onGestureEvent: (event: GestureEvent<PanGestureHandlerEventPayload>) => void;
 	private _value: number;
 
 	constructor(props: ITouchableProps) {
@@ -57,19 +39,19 @@ class Touchable extends React.Component<ITouchableProps, any> {
 		this._value = 0;
 	}
 
-	_onHandlerStateChange = ({ nativeEvent }: any) => {
+	_onHandlerStateChange = ({ nativeEvent }: { nativeEvent: HandlerStateChangeEventPayload & PanGestureHandlerEventPayload }) => {
 		if (nativeEvent.oldState === State.ACTIVE) {
 			this._handleRelease(nativeEvent);
 		}
 	};
 
-	onLongPressHandlerStateChange = ({ nativeEvent }: any) => {
+	onLongPressHandlerStateChange = ({ nativeEvent }: { nativeEvent: HandlerStateChangeEventPayload }) => {
 		if (nativeEvent.state === State.ACTIVE) {
 			this.onLongPress();
 		}
 	};
 
-	_handleRelease = (nativeEvent: any) => {
+	_handleRelease = (nativeEvent: PanGestureHandlerEventPayload) => {
 		const { translationX } = nativeEvent;
 		const { rowState } = this.state;
 		this._value += translationX;
@@ -155,7 +137,7 @@ class Touchable extends React.Component<ITouchableProps, any> {
 		this._animateRow(toValue);
 	};
 
-	_animateRow = (toValue: any) => {
+	_animateRow = (toValue: number) => {
 		this.rowOffSet.setValue(this._value);
 		this._value = toValue;
 		this.dragX.setValue(0);

app/containers/RoomItem/TypeIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import RoomTypeIcon from '../RoomTypeIcon';
+import { ITypeIconProps } from './interfaces';
+
+const TypeIcon = React.memo(({ type, prid, status, isGroupChat, teamMain, size, style }: ITypeIconProps) => (
+	<RoomTypeIcon
+		type={prid ? 'discussion' : type}
+		isGroupChat={isGroupChat}
+		status={status}
+		teamMain={teamMain}
+		size={size}
+		style={style}
+	/>
+));
+
+export default TypeIcon;

app/presentation/RoomItem/UpdatedAt.tsx → app/containers/RoomItem/UpdatedAt.tsx

@@ -4,16 +4,9 @@ import { Text } from 'react-native';
 import styles from './styles';
 import { themes } from '../../lib/constants';
 import { capitalize } from '../../utils/room';
-import { TSupportedThemes } from '../../theme';
+import { IUpdatedAtProps } from './interfaces';
 
-interface IUpdatedAt {
-	date: string;
-	theme: TSupportedThemes;
-	hideUnreadStatus: boolean;
-	alert: boolean;
-}
-
-const UpdatedAt = React.memo(({ date, theme, hideUnreadStatus, alert }: IUpdatedAt) => {
+const UpdatedAt = React.memo(({ date, theme, hideUnreadStatus, alert }: IUpdatedAtProps) => {
 	if (!date) {
 		return null;
 	}

app/presentation/RoomItem/Wrapper.tsx → app/containers/RoomItem/Wrapper.tsx

@@ -2,29 +2,11 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { DisplayMode, themes } from '../../lib/constants';
-import { IOmnichannelSource } from '../../definitions';
-import { TSupportedThemes } from '../../theme';
 import IconOrAvatar from './IconOrAvatar';
+import { IWrapperProps } from './interfaces';
 import styles from './styles';
 
-interface IWrapper {
-	accessibilityLabel: string;
-	avatar: string;
-	type: string;
-	theme: TSupportedThemes;
-	rid: string;
-	children: JSX.Element;
-	displayMode: string;
-	prid: string;
-	showLastMessage: boolean;
-	status: string;
-	isGroupChat: boolean;
-	teamMain: boolean;
-	showAvatar: boolean;
-	sourceType: IOmnichannelSource;
-}
-
-const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => (
+const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapperProps): React.ReactElement => (
 	<View
 		style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
 		accessibilityLabel={accessibilityLabel}>