fix the visual bug when the user change the avatar to new then clear cache

app/containers/Avatar/AvatarContainer.tsx

@@ -42,7 +42,7 @@ const AvatarContainer = ({
 			true
 	);
 
-	const { avatarETag } = useAvatarETag({ username, text, type, rid });
+	const { avatarETag } = useAvatarETag({ username, text, type, rid, id });
 
 	return (
 		<Avatar

app/containers/Avatar/useAvatarETag.ts

@@ -2,19 +2,21 @@ import { Q } from '@nozbe/watermelondb';
 import { useEffect, useState } from 'react';
 import { Observable, Subscription } from 'rxjs';
 
-import { TSubscriptionModel, TUserModel } from '../../definitions';
+import { TLoggedUserModel, TSubscriptionModel, TUserModel } from '../../definitions';
 import database from '../../lib/database';
 
 export const useAvatarETag = ({
 	username,
 	text,
 	type = '',
-	rid
+	rid,
+	id
 }: {
 	type?: string;
 	username: string;
 	text: string;
 	rid?: string;
+	id: string;
 }) => {
 	const [avatarETag, setAvatarETag] = useState<string | undefined>('');
 
@@ -30,7 +32,12 @@ export const useAvatarETag = ({
 
 				let record;
 				try {
-					if (isDirect() || username === text) {
+					if (username === text) {
+						const serversDB = database.servers;
+						const userCollections = serversDB.get('users');
+						const user = await userCollections.find(id);
+						record = user;
+					} else if (isDirect()) {
 						const [user] = await usersCollection.query(Q.where('username', text)).fetch();
 						record = user;
 					} else if (rid) {
@@ -41,7 +48,7 @@ export const useAvatarETag = ({
 				}
 
 				if (record) {
-					const observable = record.observe() as Observable<TSubscriptionModel | TUserModel>;
+					const observable = record.observe() as Observable<TSubscriptionModel | TUserModel | TLoggedUserModel>;
 					subscription = observable.subscribe(r => {
 						setAvatarETag(r.avatarETag);
 					});

app/lib/methods/subscriptions/rooms.ts

@@ -291,7 +291,7 @@ export default function subscribeRooms() {
 		const [type, data] = ddpMessage.fields.args;
 		const [, ev] = ddpMessage.fields.eventName.split('/');
 		if (/userData/.test(ev)) {
-			const [{ diff }] = ddpMessage.fields.args;
+			const [{ diff, unset }] = ddpMessage.fields.args;
 			if (diff?.statusLivechat) {
 				store.dispatch(setUser({ statusLivechat: diff.statusLivechat }));
 			}
@@ -301,6 +301,12 @@ export default function subscribeRooms() {
 			if ((['settings.preferences.alsoSendThreadToChannel'] as any) in diff) {
 				store.dispatch(setUser({ alsoSendThreadToChannel: diff['settings.preferences.alsoSendThreadToChannel'] }));
 			}
+			if (diff?.avatarETag) {
+				store.dispatch(setUser({ avatarETag: diff.avatarETag }));
+			}
+			if (unset?.avatarETag) {
+				store.dispatch(setUser({ avatarETag: '' }));
+			}
 		}
 		if (/subscriptions/.test(ev)) {
 			if (type === 'removed') {

app/sagas/login.js

@@ -247,6 +247,22 @@ const handleLogout = function* handleLogout({ forcedByServer, message }) {
 };
 
 const handleSetUser = function* handleSetUser({ user }) {
+	if ('avatarETag' in user) {
+		const userId = yield select(state => state.login.user.id);
+		const serversDB = database.servers;
+		const userCollections = serversDB.get('users');
+		yield serversDB.write(async () => {
+			try {
+				const userRecord = await userCollections.find(userId);
+				await userRecord.update(record => {
+					record.avatarETag = user.avatarETag;
+				});
+			} catch {
+				//
+			}
+		});
+	}
+
 	setLanguage(user?.language);
 
 	if (user?.statusLivechat && isOmnichannelModuleAvailable()) {