diff --git a/app/containers/RoomItem/index.tsx b/app/containers/RoomItem/index.tsx index 72391ecdf..d6c177c61 100644 --- a/app/containers/RoomItem/index.tsx +++ b/app/containers/RoomItem/index.tsx @@ -1,5 +1,4 @@ import React, { useEffect } from 'react'; -// import { Subscription } from 'rxjs'; import I18n from '../../i18n'; import { useAppSelector } from '../../lib/hooks'; @@ -12,125 +11,103 @@ import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles'; export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED }; -// const attrs = ['width', 'isFocused', 'showLastMessage', 'autoJoin', 'showAvatar', 'displayMode']; +const RoomItemContainer = ({ + item, + id, + onPress, + onLongPress, + width, + toggleFav, + toggleRead, + hideChannel, + isFocused, + showLastMessage, + username, + useRealName, + autoJoin, + showAvatar, + displayMode, + getRoomTitle = () => 'title', + getRoomAvatar = () => '', + getIsRead = () => false, + swipeEnabled = true +}: IRoomItemContainerProps): React.ReactElement => { + const name = getRoomTitle(item); + const testID = `rooms-list-view-item-${name}`; + const avatar = getRoomAvatar(item); + 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 RoomItemContainer = React.memo( - ({ - item, - id, - onPress, - onLongPress, - width, - toggleFav, - toggleRead, - hideChannel, - isFocused, - showLastMessage, - username, - useRealName, - autoJoin, - showAvatar, - displayMode, - getRoomTitle = () => 'title', - getRoomAvatar = () => '', - getIsRead = () => false, - swipeEnabled = true - }: IRoomItemContainerProps) => { - const name = getRoomTitle(item); - const testID = `rooms-list-view-item-${name}`; - const avatar = getRoomAvatar(item); - 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); - - // useEffect(() => { - // const init = () => { - // if (item?.observe) { - // const observable = item.observe(); - // roomSubscription.current = observable?.subscribe?.(() => { - // if (_) forceUpdate(); - // }); - // } - // }; - // init(); - - // return () => roomSubscription.current?.unsubscribe(); - // }, []); - - useEffect(() => { - const isDirect = !!(item.t === 'd' && id && !isGroupChat(item)); - if (connected && isDirect) { - getUserPresence(id); - } - }, [connected]); - - const handleOnPress = () => onPress(item); - - const handleOnLongPress = () => onLongPress && onLongPress(item); - - let accessibilityLabel = ''; - if (item.unread === 1) { - accessibilityLabel = `, ${item.unread} ${I18n.t('alert')}`; - } else if (item.unread > 1) { - accessibilityLabel = `, ${item.unread} ${I18n.t('alerts')}`; - } - if (item.userMentions > 0) { - accessibilityLabel = `, ${I18n.t('you_were_mentioned')}`; - } - if (date) { - accessibilityLabel = `, ${I18n.t('last_message')} ${date}`; + useEffect(() => { + const isDirect = !!(item.t === 'd' && id && !isGroupChat(item)); + if (connected && isDirect) { + getUserPresence(id); } + }, [connected]); - const status = item.t === 'l' ? item.visitor?.status || item.v?.status : userStatus; + const handleOnPress = () => onPress(item); - return ( - - ); + const handleOnLongPress = () => onLongPress && onLongPress(item); + + let accessibilityLabel = ''; + if (item.unread === 1) { + accessibilityLabel = `, ${item.unread} ${I18n.t('alert')}`; + } else if (item.unread > 1) { + accessibilityLabel = `, ${item.unread} ${I18n.t('alerts')}`; + } + if (item.userMentions > 0) { + accessibilityLabel = `, ${I18n.t('you_were_mentioned')}`; + } + if (date) { + accessibilityLabel = `, ${I18n.t('last_message')} ${date}`; } - // (props, nextProps) => attrs.every(key => props[key] === nextProps[key]) -); + const status = item.t === 'l' ? item.visitor?.status || item.v?.status : userStatus; + + return ( + + ); +}; export default RoomItemContainer;