verdnatura-chat/app/ee/omnichannel/views/QueueListView.js

165 lines
4.4 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import { dequal } from 'dequal';
import I18n from '../../../i18n';
import RoomItem, { ROW_HEIGHT } from '../../../presentation/RoomItem';
import { MAX_SIDEBAR_WIDTH } from '../../../constants/tablet';
import { isIOS, isTablet } from '../../../utils/deviceInfo';
import { getUserSelector } from '../../../selectors/login';
import { withTheme } from '../../../theme';
import { withDimensions } from '../../../dimensions';
import SafeAreaView from '../../../containers/SafeAreaView';
import { themes } from '../../../constants/colors';
import StatusBar from '../../../containers/StatusBar';
import { goRoom } from '../../../utils/goRoom';
import * as HeaderButton from '../../../containers/HeaderButton';
import RocketChat from '../../../lib/rocketchat';
import { events, logEvent } from '../../../utils/log';
import { getInquiryQueueSelector } from '../selectors/inquiry';
const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
const getItemLayout = (data, index) => ({
length: ROW_HEIGHT,
offset: ROW_HEIGHT * index,
index
});
const keyExtractor = item => item.rid;
class QueueListView extends React.Component {
static navigationOptions = ({ navigation, isMasterDetail }) => {
const options = {
title: I18n.t('Queued_chats')
};
if (isMasterDetail) {
options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} testID='directory-view-close' />;
}
return options;
};
static propTypes = {
user: PropTypes.shape({
id: PropTypes.string,
username: PropTypes.string,
token: PropTypes.string
}),
isMasterDetail: PropTypes.bool,
width: PropTypes.number,
queued: PropTypes.array,
server: PropTypes.string,
useRealName: PropTypes.bool,
navigation: PropTypes.object,
theme: PropTypes.string,
showAvatar: PropTypes.bool,
displayMode: PropTypes.string
};
shouldComponentUpdate(nextProps) {
const { queued } = this.props;
if (!dequal(nextProps.queued, queued)) {
return true;
}
return false;
}
onPressItem = (item = {}) => {
logEvent(events.QL_GO_ROOM);
const { navigation, isMasterDetail } = this.props;
if (isMasterDetail) {
navigation.navigate('DrawerNavigator');
} else {
navigation.navigate('RoomsListView');
}
goRoom({
item: {
...item,
// we're calling v as visitor on our mergeSubscriptionsRooms
visitor: item.v
},
isMasterDetail
});
};
getRoomTitle = item => RocketChat.getRoomTitle(item);
getRoomAvatar = item => RocketChat.getRoomAvatar(item);
getUidDirectMessage = room => RocketChat.getUidDirectMessage(room);
renderItem = ({ item }) => {
const {
user: { id: userId, username, token },
server,
useRealName,
theme,
isMasterDetail,
width,
showAvatar,
displayMode
} = this.props;
const id = this.getUidDirectMessage(item);
return (
<RoomItem
item={item}
theme={theme}
id={id}
type={item.t}
userId={userId}
username={username}
token={token}
baseUrl={server}
onPress={this.onPressItem}
testID={`queue-list-view-item-${item.name}`}
width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width}
useRealName={useRealName}
getRoomTitle={this.getRoomTitle}
getRoomAvatar={this.getRoomAvatar}
visitor={item.v}
swipeEnabled={false}
showAvatar={showAvatar}
displayMode={displayMode}
/>
);
};
render() {
const { queued, theme } = this.props;
return (
<SafeAreaView testID='queue-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar />
<FlatList
ref={this.getScrollRef}
data={queued}
extraData={queued}
keyExtractor={keyExtractor}
style={{ backgroundColor: themes[theme].backgroundColor }}
renderItem={this.renderItem}
getItemLayout={getItemLayout}
removeClippedSubviews={isIOS}
keyboardShouldPersistTaps='always'
initialNumToRender={INITIAL_NUM_TO_RENDER}
windowSize={9}
onEndReached={this.onEndReached}
onEndReachedThreshold={0.5}
/>
</SafeAreaView>
);
}
}
const mapStateToProps = state => ({
user: getUserSelector(state),
isMasterDetail: state.app.isMasterDetail,
server: state.server.server,
useRealName: state.settings.UI_Use_Real_Name,
queued: getInquiryQueueSelector(state),
showAvatar: state.sortPreferences.showAvatar,
displayMode: state.sortPreferences.displayMode
});
export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView)));