[FIX] Avatar cache invalidation

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -4199,20 +4199,6 @@ exports[`Storyshots Message list message 1`] = `
             }
           }
         >
-          <View
-            style={
-              Array [
-                Object {
-                  "borderRadius": 4,
-                  "height": 36,
-                  "width": 36,
-                },
-                Object {
-                  "marginTop": 4,
-                },
-              ]
-            }
-          />
           <View
             style={
               Array [

app/containers/Avatar/Avatar.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FastImage from '@rocket.chat/react-native-fast-image';
+import Touchable from 'react-native-platform-touchable';
+import { settings as RocketChatSettings } from '@rocket.chat/sdk';
+
+import { avatarURL } from '../../utils/avatar';
+import Emoji from '../markdown/Emoji';
+
+const Avatar = React.memo(({
+	text,
+	size,
+	server,
+	borderRadius,
+	style,
+	avatar,
+	type,
+	children,
+	user,
+	onPress,
+	emoji,
+	theme,
+	getCustomEmoji,
+	avatarETag,
+	isStatic
+}) => {
+	if ((!text && !avatar) || !server) {
+		return null;
+	}
+
+	const avatarStyle = {
+		width: size,
+		height: size,
+		borderRadius
+	};
+
+	let image;
+	if (emoji) {
+		image = (
+			<Emoji
+				theme={theme}
+				baseUrl={server}
+				getCustomEmoji={getCustomEmoji}
+				isMessageContainsOnlyEmoji
+				literal={emoji}
+			/>
+		);
+	} else {
+		const uri = avatarURL({
+			type,
+			text,
+			size,
+			user,
+			avatar,
+			server,
+			avatarETag
+		});
+
+		image = (
+			<FastImage
+				style={avatarStyle}
+				source={{
+					uri: isStatic ? avatar : uri,
+					headers: RocketChatSettings.customHeaders,
+					priority: FastImage.priority.high
+				}}
+			/>
+		);
+	}
+
+
+	return (
+		<Touchable style={[avatarStyle, style]} disabled={!onPress} onPress={onPress}>
+			<>
+				{image}
+				{children}
+			</>
+		</Touchable>
+	);
+});
+
+Avatar.propTypes = {
+	server: PropTypes.string,
+	style: PropTypes.any,
+	text: PropTypes.string,
+	avatar: PropTypes.string,
+	emoji: PropTypes.string,
+	size: PropTypes.number,
+	borderRadius: PropTypes.number,
+	type: PropTypes.string,
+	children: PropTypes.object,
+	user: PropTypes.shape({
+		id: PropTypes.string,
+		token: PropTypes.string
+	}),
+	theme: PropTypes.string,
+	onPress: PropTypes.func,
+	getCustomEmoji: PropTypes.func,
+	avatarETag: PropTypes.string,
+	isStatic: PropTypes.bool
+};
+
+Avatar.defaultProps = {
+	text: '',
+	size: 25,
+	type: 'd',
+	borderRadius: 4
+};
+
+export default Avatar;

app/containers/Avatar/index.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { Q } from '@nozbe/watermelondb';
+
+import database from '../../lib/database';
+import { getUserSelector } from '../../selectors/login';
+import Component from './Avatar';
+
+const Avatar = React.memo(({ type, text, ...props }) => {
+	const [avatarETag, setAvatarETag] = useState();
+
+	useEffect(() => {
+		let subscription;
+		(async() => {
+			if (type === 'd') {
+				const db = database.active;
+				const usersCollection = db.collections.get('users');
+				try {
+					const [userRecord] = await usersCollection.query(Q.where('username', text)).fetch();
+					if (userRecord) {
+						const observable = userRecord.observe();
+						subscription = observable.subscribe((u) => {
+							setAvatarETag(u.avatarETag);
+						});
+					}
+				} catch {
+					// Do nothing
+				}
+			}
+		})();
+		return () => {
+			subscription?.unsubscribe?.();
+		};
+	}, []);
+
+	return (
+		<Component
+			text={text}
+			type={type}
+			avatarETag={avatarETag}
+			{...props}
+		/>
+	);
+});
+Avatar.propTypes = {
+	text: PropTypes.string,
+	type: PropTypes.string
+};
+Avatar.defaultProps = {
+	text: '',
+	type: 'd'
+};
+
+const mapStateToProps = state => ({
+	user: getUserSelector(state),
+	server: state.share.server || state.server.server
+});
+export default connect(mapStateToProps)(Avatar);

app/containers/InAppNotification/NotifierComponent.js

@@ -11,7 +11,6 @@ import { CustomIcon } from '../../lib/Icons';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 import { useTheme } from '../../theme';
-import { getUserSelector } from '../../selectors/login';
 import { ROW_HEIGHT } from '../../presentation/RoomItem';
 import { goRoom } from '../../utils/goRoom';
 import Navigation from '../../lib/Navigation';
@@ -65,14 +64,11 @@ const styles = StyleSheet.create({
 
 const hideNotification = () => Notifier.hideNotification();
 
-const NotifierComponent = React.memo(({
-	baseUrl, user, notification, isMasterDetail
-}) => {
+const NotifierComponent = React.memo(({ notification, isMasterDetail }) => {
 	const { theme } = useTheme();
 	const insets = useSafeAreaInsets();
 	const { isLandscape } = useOrientation();
 
-	const { id: userId, token } = user;
 	const { text, payload } = notification;
 	const { type } = payload;
 	const name = type === 'd' ? payload.sender.username : payload.name;
@@ -115,7 +111,7 @@ const NotifierComponent = React.memo(({
 				background={Touchable.SelectableBackgroundBorderless()}
 			>
 				<>
-					<Avatar text={avatar} size={AVATAR_SIZE} type={type} baseUrl={baseUrl} style={styles.avatar} userId={userId} token={token} />
+					<Avatar text={avatar} size={AVATAR_SIZE} type={type} style={styles.avatar} />
 					<View style={styles.inner}>
 						<Text style={[styles.roomName, { color: themes[theme].titleText }]} numberOfLines={1}>{title}</Text>
 						<Text style={[styles.message, { color: themes[theme].titleText }]} numberOfLines={1}>{text}</Text>
@@ -134,15 +130,11 @@ const NotifierComponent = React.memo(({
 });
 
 NotifierComponent.propTypes = {
-	baseUrl: PropTypes.string,
-	user: PropTypes.object,
 	notification: PropTypes.object,
 	isMasterDetail: PropTypes.bool
 };
 
 const mapStateToProps = state => ({
-	user: getUserSelector(state),
-	baseUrl: state.server.server,
 	isMasterDetail: state.app.isMasterDetail
 });
 

app/containers/MessageBox/Mentions/MentionItem.js

@@ -17,7 +17,7 @@ const MentionItem = ({
 	item, trackingType, theme
 }) => {
 	const context = useContext(MessageboxContext);
-	const { baseUrl, user, onPressMention } = context;
+	const { onPressMention } = context;
 
 	const defineTestID = (type) => {
 		switch (type) {
@@ -43,9 +43,6 @@ const MentionItem = ({
 				text={item.username || item.name}
 				size={30}
 				type={item.t}
-				baseUrl={baseUrl}
-				userId={user.id}
-				token={user.token}
 			/>
 			<Text style={[styles.mentionText, { color: themes[theme].titleText }]}>{ item.username || item.name || item }</Text>
 		</>

app/containers/message/MessageAvatar.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import Avatar from '../Avatar';
+import Avatar from '../Avatar/Avatar';
 import styles from './styles';
 import MessageContext from './Context';
 
@@ -22,11 +22,11 @@ const MessageAvatar = React.memo(({
 				borderRadius={small ? 2 : 4}
 				onPress={author._id === user.id ? undefined : () => navToRoomInfo(navParam)}
 				getCustomEmoji={getCustomEmoji}
+				user={user}
+				server={baseUrl}
+				avatarETag={author.avatarETag}
 				avatar={avatar}
 				emoji={emoji}
-				baseUrl={baseUrl}
-				userId={user.id}
-				token={user.token}
 				theme={theme}
 			/>
 		);