Chore: Evaluate `Avatar` - TypeScript (#3929)

* update: `Avatar` component

remove: non-null assertion from ThreadMessagesView Item

* remove: `this.mounted` from `Avatar` component

update: navParam on MessageAvatar component

app/containers/Avatar/Avatar.tsx

@@ -8,6 +8,7 @@ import { avatarURL } from '../../utils/avatar';
 import { SubscriptionType } from '../../definitions/ISubscription';
 import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
+import { useTheme } from '../../theme';
 
 const Avatar = React.memo(
 	({
@@ -18,7 +19,6 @@ const Avatar = React.memo(
 		user,
 		onPress,
 		emoji,
-		theme,
 		getCustomEmoji,
 		avatarETag,
 		isStatic,
@@ -34,6 +34,8 @@ const Avatar = React.memo(
 			return null;
 		}
 
+		const { theme } = useTheme();
+
 		const avatarStyle = {
 			width: size,
 			height: size,
@@ -44,7 +46,7 @@ const Avatar = React.memo(
 		if (emoji) {
 			image = (
 				<Emoji
-					theme={theme!}
+					theme={theme}
 					baseUrl={server}
 					getCustomEmoji={getCustomEmoji}
 					isMessageContainsOnlyEmoji

app/containers/Avatar/index.tsx

@@ -5,13 +5,11 @@ import { Observable, Subscription } from 'rxjs';
 
 import database from '../../lib/database';
 import { getUserSelector } from '../../selectors/login';
-import { TSubscriptionModel, TUserModel } from '../../definitions';
+import { IApplicationState, TSubscriptionModel, TUserModel } from '../../definitions';
 import Avatar from './Avatar';
 import { IAvatar } from './interfaces';
 
 class AvatarContainer extends React.Component<IAvatar, any> {
-	private mounted: boolean;
-
 	private subscription?: Subscription;
 
 	static defaultProps = {
@@ -21,16 +19,11 @@ class AvatarContainer extends React.Component<IAvatar, any> {
 
 	constructor(props: IAvatar) {
 		super(props);
-		this.mounted = false;
 		this.state = { avatarETag: '' };
 		this.init();
 	}
 
-	componentDidMount() {
+	componentDidUpdate(prevProps: IAvatar) {
-		this.mounted = true;
-	}
-
-	componentDidUpdate(prevProps: any) {
 		const { text, type } = this.props;
 		if (prevProps.text !== text || prevProps.type !== type) {
 			this.init();
@@ -88,12 +81,7 @@ class AvatarContainer extends React.Component<IAvatar, any> {
 			const observable = record.observe() as Observable<TSubscriptionModel | TUserModel>;
 			this.subscription = observable.subscribe(r => {
 				const { avatarETag } = r;
-				if (this.mounted) {
+				this.setState({ avatarETag });
-					this.setState({ avatarETag });
-				} else {
-					// @ts-ignore
-					this.state.avatarETag = avatarETag;
-				}
 			});
 		}
 	};
@@ -105,12 +93,12 @@ class AvatarContainer extends React.Component<IAvatar, any> {
 	}
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	user: getUserSelector(state),
 	server: state.share.server.server || state.server.server,
 	serverVersion: state.share.server.version || state.server.version,
 	blockUnauthenticatedAccess:
-		state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess ??
+		(state.share.settings?.Accounts_AvatarBlockUnauthenticatedAccess as boolean) ??
 		state.settings.Accounts_AvatarBlockUnauthenticatedAccess ??
 		true
 });

app/containers/Avatar/interfaces.ts

@@ -16,12 +16,11 @@ export interface IAvatar {
 		id?: string;
 		token?: string;
 	};
-	theme?: string;
 	onPress?: () => void;
 	getCustomEmoji?: TGetCustomEmoji;
 	avatarETag?: string;
 	isStatic?: boolean | string;
 	rid?: string;
 	blockUnauthenticatedAccess?: boolean;
-	serverVersion: string;
+	serverVersion: string | null;
 }

app/containers/message/MessageAvatar.tsx

@@ -4,32 +4,30 @@ import Avatar from '../Avatar';
 import styles from './styles';
 import MessageContext from './Context';
 import { IMessageAvatar } from './interfaces';
+import { SubscriptionType } from '../../definitions';
 
-const MessageAvatar = React.memo(
+const MessageAvatar = React.memo(({ isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji }: IMessageAvatar) => {
-	({ isHeader, avatar, author, small, navToRoomInfo, emoji, getCustomEmoji, theme }: IMessageAvatar) => {
+	const { user } = useContext(MessageContext);
-		const { user } = useContext(MessageContext);
+	if (isHeader && author) {
-		if (isHeader && author) {
+		const navParam = {
-			const navParam = {
+			t: SubscriptionType.DIRECT,
-				t: 'd',
+			rid: author._id
-				rid: author._id
+		};
-			};
+		return (
-			return (
+			<Avatar
-				<Avatar
+				style={small ? styles.avatarSmall : styles.avatar}
-					style={small ? styles.avatarSmall : styles.avatar}
+				text={avatar ? '' : author.username}
-					text={avatar ? '' : author.username}
+				size={small ? 20 : 36}
-					size={small ? 20 : 36}
+				borderRadius={small ? 2 : 4}
-					borderRadius={small ? 2 : 4}
+				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
-					onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
+				getCustomEmoji={getCustomEmoji}
-					getCustomEmoji={getCustomEmoji}
+				avatar={avatar}
-					avatar={avatar}
+				emoji={emoji}
-					emoji={emoji}
+			/>
-					theme={theme}
+		);
-				/>
-			);
-		}
-		return null;
 	}
-);
+	return null;
+});
 
 MessageAvatar.displayName = 'MessageAvatar';
 

app/containers/message/interfaces.ts

@@ -31,7 +31,6 @@ export interface IMessageAvatar {
 	small?: boolean;
 	navToRoomInfo: Function;
 	getCustomEmoji: TGetCustomEmoji;
-	theme: string;
 }
 
 export interface IMessageBlocks {

app/views/DiscussionsView/Item.tsx

@@ -73,7 +73,7 @@ const Item = ({ item, onPress }: IItem): JSX.Element => {
 			testID={`discussions-view-${item.msg}`}
 			style={{ backgroundColor: themes[theme].backgroundColor }}>
 			<View style={styles.container}>
-				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} />
+				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
 						<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>

app/views/ThreadMessagesView/Item.tsx

@@ -65,7 +65,7 @@ interface IItem {
 	toggleFollowThread: (isFollowing: boolean, id: string) => void;
 }
 
-const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem) => {
+const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem): React.ReactElement => {
 	const { theme } = useTheme();
 	const username = (useRealName && item?.u?.name) || item?.u?.username;
 	let time;
@@ -79,7 +79,7 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 			testID={`thread-messages-view-${item.msg}`}
 			style={{ backgroundColor: themes[theme].backgroundColor }}>
 			<View style={styles.container}>
-				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} />
+				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
 						<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>