From 9cf6981a27f0131be1d593e9250dfd06217e0e19 Mon Sep 17 00:00:00 2001
From: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
Date: Tue, 24 Jan 2023 10:03:48 -0300
Subject: [PATCH] Regression: Fix RoomItem's loading status (#4835)

---
 app/containers/RoomItem/index.tsx         |  8 +++-----
 app/containers/RoomItem/useUserStatus.tsx | 24 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 app/containers/RoomItem/useUserStatus.tsx

diff --git a/app/containers/RoomItem/index.tsx b/app/containers/RoomItem/index.tsx
index 5dd7d5469..405d2d5e0 100644
--- a/app/containers/RoomItem/index.tsx
+++ b/app/containers/RoomItem/index.tsx
@@ -2,13 +2,13 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import { Subscription } from 'rxjs';
 
 import I18n from '../../i18n';
-import { useAppSelector } from '../../lib/hooks';
 import { getUserPresence } from '../../lib/methods';
 import { isGroupChat } from '../../lib/methods/helpers';
 import { formatDate } from '../../lib/methods/helpers/room';
 import { IRoomItemContainerProps } from './interfaces';
 import RoomItem from './RoomItem';
 import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
+import { useUserStatus } from './useUserStatus';
 
 export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED };
 
@@ -42,11 +42,11 @@ const RoomItemContainer = React.memo(
 		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);
 
+		const { connected, status } = useUserStatus(item.t, item?.visitor?.status, id);
+
 		useEffect(() => {
 			const init = () => {
 				if (item?.observe) {
@@ -85,8 +85,6 @@ const RoomItemContainer = React.memo(
 			accessibilityLabel = `, ${I18n.t('last_message')} ${date}`;
 		}
 
-		const status = item.t === 'l' ? item.visitor?.status || item.v?.status : userStatus;
-
 		return (
 			<RoomItem
 				name={name}
diff --git a/app/containers/RoomItem/useUserStatus.tsx b/app/containers/RoomItem/useUserStatus.tsx
new file mode 100644
index 000000000..4ba63706f
--- /dev/null
+++ b/app/containers/RoomItem/useUserStatus.tsx
@@ -0,0 +1,24 @@
+import { TUserStatus } from '../../definitions';
+import { useAppSelector } from '../../lib/hooks';
+import { RoomTypes } from '../../lib/methods';
+
+export const useUserStatus = (
+	type: RoomTypes,
+	liveChatStatus?: TUserStatus,
+	id?: string
+): { connected: boolean; status: TUserStatus } => {
+	const connected = useAppSelector(state => state.meteor.connected);
+	const userStatus = useAppSelector(state => state.activeUsers[id || '']?.status);
+	let status = 'loading';
+	if (connected) {
+		if (type === 'd') {
+			status = userStatus || 'loading';
+		} else if (type === 'l' && liveChatStatus) {
+			status = liveChatStatus;
+		}
+	}
+	return {
+		connected,
+		status: status as TUserStatus
+	};
+};