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(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 ( { + 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 + }; +};