2020-07-20 16:44:54 +00:00
|
|
|
import React, { useEffect, useState } from 'react';
|
2019-04-18 20:57:35 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2019-09-16 20:26:32 +00:00
|
|
|
import { connect } from 'react-redux';
|
2019-04-18 20:57:35 +00:00
|
|
|
|
|
|
|
import I18n from '../../i18n';
|
2020-07-31 17:06:22 +00:00
|
|
|
import { ROW_HEIGHT } from './styles';
|
|
|
|
import { formatDate } from '../../utils/room';
|
|
|
|
import RoomItem from './RoomItem';
|
2019-04-18 20:57:35 +00:00
|
|
|
|
|
|
|
export { ROW_HEIGHT };
|
|
|
|
|
2019-09-16 20:26:32 +00:00
|
|
|
const attrs = [
|
|
|
|
'width',
|
2019-12-04 16:39:53 +00:00
|
|
|
'status',
|
2020-04-03 18:03:53 +00:00
|
|
|
'connected',
|
2020-06-15 14:00:46 +00:00
|
|
|
'theme',
|
2020-07-20 16:44:54 +00:00
|
|
|
'isFocused',
|
|
|
|
'forceUpdate',
|
|
|
|
'showLastMessage'
|
2019-09-16 20:26:32 +00:00
|
|
|
];
|
2019-07-15 16:54:28 +00:00
|
|
|
|
2020-07-20 16:44:54 +00:00
|
|
|
const arePropsEqual = (oldProps, newProps) => attrs.every(key => oldProps[key] === newProps[key]);
|
2019-10-29 13:53:58 +00:00
|
|
|
|
2020-07-31 17:06:22 +00:00
|
|
|
const RoomItemContainer = React.memo(({
|
2020-07-20 16:44:54 +00:00
|
|
|
item,
|
2020-06-15 14:00:46 +00:00
|
|
|
onPress,
|
|
|
|
width,
|
|
|
|
toggleFav,
|
|
|
|
toggleRead,
|
|
|
|
hideChannel,
|
|
|
|
testID,
|
|
|
|
avatarSize,
|
|
|
|
baseUrl,
|
|
|
|
userId,
|
|
|
|
username,
|
|
|
|
token,
|
|
|
|
id,
|
|
|
|
showLastMessage,
|
|
|
|
status,
|
|
|
|
useRealName,
|
|
|
|
getUserPresence,
|
|
|
|
connected,
|
|
|
|
theme,
|
2020-07-20 16:44:54 +00:00
|
|
|
isFocused,
|
|
|
|
getRoomTitle,
|
|
|
|
getRoomAvatar,
|
|
|
|
getIsGroupChat,
|
|
|
|
getIsRead
|
2019-10-29 13:53:58 +00:00
|
|
|
}) => {
|
2020-07-20 16:44:54 +00:00
|
|
|
const [, setForceUpdate] = useState(1);
|
|
|
|
|
2020-03-03 21:10:39 +00:00
|
|
|
useEffect(() => {
|
2020-07-20 16:44:54 +00:00
|
|
|
if (connected && item.t === 'd' && id) {
|
2020-04-01 12:28:54 +00:00
|
|
|
getUserPresence(id);
|
2020-03-03 21:10:39 +00:00
|
|
|
}
|
2020-04-03 18:03:53 +00:00
|
|
|
}, [connected]);
|
2020-03-03 21:10:39 +00:00
|
|
|
|
2020-07-20 16:44:54 +00:00
|
|
|
useEffect(() => {
|
|
|
|
if (item?.observe) {
|
|
|
|
const observable = item.observe();
|
|
|
|
const subscription = observable?.subscribe?.(() => {
|
|
|
|
setForceUpdate(prevForceUpdate => prevForceUpdate + 1);
|
|
|
|
});
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
subscription?.unsubscribe?.();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const name = getRoomTitle(item);
|
|
|
|
const avatar = getRoomAvatar(item);
|
|
|
|
const isGroupChat = getIsGroupChat(item);
|
|
|
|
const isRead = getIsRead(item);
|
|
|
|
const _onPress = () => onPress(item);
|
|
|
|
const date = item.lastMessage?.ts && formatDate(item.lastMessage.ts);
|
2019-10-29 13:53:58 +00:00
|
|
|
|
|
|
|
let accessibilityLabel = name;
|
2020-07-20 16:44:54 +00:00
|
|
|
if (item.unread === 1) {
|
|
|
|
accessibilityLabel += `, ${ item.unread } ${ I18n.t('alert') }`;
|
|
|
|
} else if (item.unread > 1) {
|
|
|
|
accessibilityLabel += `, ${ item.unread } ${ I18n.t('alerts') }`;
|
2019-05-22 20:15:35 +00:00
|
|
|
}
|
|
|
|
|
2020-07-20 16:44:54 +00:00
|
|
|
if (item.userMentions > 0) {
|
2019-10-29 13:53:58 +00:00
|
|
|
accessibilityLabel += `, ${ I18n.t('you_were_mentioned') }`;
|
2019-04-18 20:57:35 +00:00
|
|
|
}
|
|
|
|
|
2019-10-29 13:53:58 +00:00
|
|
|
if (date) {
|
|
|
|
accessibilityLabel += `, ${ I18n.t('last_message') } ${ date }`;
|
2019-07-01 14:20:38 +00:00
|
|
|
}
|
|
|
|
|
2019-10-29 13:53:58 +00:00
|
|
|
return (
|
2020-07-31 17:06:22 +00:00
|
|
|
<RoomItem
|
|
|
|
name={name}
|
|
|
|
avatar={avatar}
|
|
|
|
isGroupChat={isGroupChat}
|
|
|
|
isRead={isRead}
|
2020-07-20 16:44:54 +00:00
|
|
|
onPress={_onPress}
|
2020-07-31 17:06:22 +00:00
|
|
|
date={date}
|
|
|
|
accessibilityLabel={accessibilityLabel}
|
|
|
|
userMentions={item.userMentions}
|
2019-10-29 13:53:58 +00:00
|
|
|
width={width}
|
2020-07-20 16:44:54 +00:00
|
|
|
favorite={item.f}
|
2019-10-29 13:53:58 +00:00
|
|
|
toggleFav={toggleFav}
|
2020-07-20 16:44:54 +00:00
|
|
|
rid={item.rid}
|
2019-10-29 13:53:58 +00:00
|
|
|
toggleRead={toggleRead}
|
|
|
|
hideChannel={hideChannel}
|
|
|
|
testID={testID}
|
2020-07-20 16:44:54 +00:00
|
|
|
type={item.t}
|
2019-12-04 16:39:53 +00:00
|
|
|
theme={theme}
|
2020-06-15 14:00:46 +00:00
|
|
|
isFocused={isFocused}
|
2020-07-31 17:06:22 +00:00
|
|
|
size={avatarSize}
|
|
|
|
baseUrl={baseUrl}
|
|
|
|
userId={userId}
|
|
|
|
token={token}
|
|
|
|
prid={item.prid}
|
|
|
|
status={status}
|
|
|
|
hideUnreadStatus={item.hideUnreadStatus}
|
|
|
|
alert={item.alert}
|
|
|
|
roomUpdatedAt={item.roomUpdatedAt}
|
|
|
|
lastMessage={item.lastMessage}
|
|
|
|
showLastMessage={showLastMessage}
|
|
|
|
username={username}
|
|
|
|
useRealName={useRealName}
|
|
|
|
unread={item.unread}
|
|
|
|
groupMentions={item.groupMentions}
|
|
|
|
/>
|
2019-10-29 13:53:58 +00:00
|
|
|
);
|
|
|
|
}, arePropsEqual);
|
|
|
|
|
2020-07-31 17:06:22 +00:00
|
|
|
RoomItemContainer.propTypes = {
|
2020-07-20 16:44:54 +00:00
|
|
|
item: PropTypes.object.isRequired,
|
2019-10-29 13:53:58 +00:00
|
|
|
baseUrl: PropTypes.string.isRequired,
|
|
|
|
showLastMessage: PropTypes.bool,
|
|
|
|
id: PropTypes.string,
|
|
|
|
onPress: PropTypes.func,
|
|
|
|
userId: PropTypes.string,
|
|
|
|
username: PropTypes.string,
|
|
|
|
token: PropTypes.string,
|
|
|
|
avatarSize: PropTypes.number,
|
|
|
|
testID: PropTypes.string,
|
|
|
|
width: PropTypes.number,
|
|
|
|
status: PropTypes.string,
|
|
|
|
toggleFav: PropTypes.func,
|
|
|
|
toggleRead: PropTypes.func,
|
|
|
|
hideChannel: PropTypes.func,
|
2020-02-21 16:13:05 +00:00
|
|
|
useRealName: PropTypes.bool,
|
2020-03-03 21:10:39 +00:00
|
|
|
getUserPresence: PropTypes.func,
|
2020-04-03 18:03:53 +00:00
|
|
|
connected: PropTypes.bool,
|
2020-06-15 14:00:46 +00:00
|
|
|
theme: PropTypes.string,
|
2020-07-20 16:44:54 +00:00
|
|
|
isFocused: PropTypes.bool,
|
|
|
|
getRoomTitle: PropTypes.func,
|
|
|
|
getRoomAvatar: PropTypes.func,
|
|
|
|
getIsGroupChat: PropTypes.func,
|
|
|
|
getIsRead: PropTypes.func
|
2019-10-29 13:53:58 +00:00
|
|
|
};
|
|
|
|
|
2020-07-31 17:06:22 +00:00
|
|
|
RoomItemContainer.defaultProps = {
|
2019-10-29 18:13:58 +00:00
|
|
|
avatarSize: 48,
|
2020-03-03 21:10:39 +00:00
|
|
|
status: 'offline',
|
2020-07-20 16:44:54 +00:00
|
|
|
getUserPresence: () => {},
|
|
|
|
getRoomTitle: () => 'title',
|
|
|
|
getRoomAvatar: () => '',
|
|
|
|
getIsGroupChat: () => false,
|
|
|
|
getIsRead: () => false
|
2019-10-29 13:53:58 +00:00
|
|
|
};
|
2019-09-16 20:26:32 +00:00
|
|
|
|
2020-05-08 17:36:10 +00:00
|
|
|
const mapStateToProps = (state, ownProps) => {
|
|
|
|
let status = 'offline';
|
|
|
|
const { id, type, visitor = {} } = ownProps;
|
|
|
|
if (state.meteor.connected) {
|
|
|
|
if (type === 'd') {
|
|
|
|
status = state.activeUsers[id]?.status || 'offline';
|
|
|
|
} else if (type === 'l' && visitor?.status) {
|
|
|
|
({ status } = visitor);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
connected: state.meteor.connected,
|
|
|
|
status
|
|
|
|
};
|
|
|
|
};
|
2019-09-16 20:26:32 +00:00
|
|
|
|
2020-07-31 17:06:22 +00:00
|
|
|
export default connect(mapStateToProps)(RoomItemContainer);
|