2019-05-10 17:09:07 +00:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { FlatList, View, Text } from 'react-native';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { SafeAreaView } from 'react-navigation';
|
|
|
|
import equal from 'deep-equal';
|
|
|
|
import ActionSheet from 'react-native-action-sheet';
|
|
|
|
|
|
|
|
import styles from './styles';
|
|
|
|
import Message from '../../containers/message/Message';
|
2019-12-11 23:01:12 +00:00
|
|
|
import ActivityIndicator from '../../containers/ActivityIndicator';
|
2019-05-10 17:09:07 +00:00
|
|
|
import I18n from '../../i18n';
|
|
|
|
import RocketChat from '../../lib/rocketchat';
|
|
|
|
import StatusBar from '../../containers/StatusBar';
|
|
|
|
import getFileUrlFromMessage from '../../lib/methods/helpers/getFileUrlFromMessage';
|
2019-05-20 20:43:50 +00:00
|
|
|
import FileModal from '../../containers/FileModal';
|
2019-12-11 23:01:12 +00:00
|
|
|
import { themes } from '../../constants/colors';
|
|
|
|
import { withTheme } from '../../theme';
|
|
|
|
import { themedHeader } from '../../utils/navigation';
|
2019-05-10 17:09:07 +00:00
|
|
|
|
|
|
|
const ACTION_INDEX = 0;
|
|
|
|
const CANCEL_INDEX = 1;
|
|
|
|
|
2019-08-20 19:24:22 +00:00
|
|
|
class MessagesView extends React.Component {
|
2019-12-11 23:01:12 +00:00
|
|
|
static navigationOptions = ({ navigation, screenProps }) => ({
|
|
|
|
title: navigation.state.params.name,
|
|
|
|
...themedHeader(screenProps.theme)
|
2019-05-10 17:09:07 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
user: PropTypes.object,
|
|
|
|
baseUrl: PropTypes.string,
|
2019-10-07 20:56:30 +00:00
|
|
|
navigation: PropTypes.object,
|
2019-12-11 23:01:12 +00:00
|
|
|
customEmojis: PropTypes.object,
|
|
|
|
theme: PropTypes.string
|
2019-05-10 17:09:07 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
constructor(props) {
|
2019-05-28 13:03:08 +00:00
|
|
|
super(props);
|
2019-05-10 17:09:07 +00:00
|
|
|
this.state = {
|
|
|
|
loading: false,
|
2019-05-20 20:43:50 +00:00
|
|
|
messages: [],
|
|
|
|
selectedAttachment: {},
|
2019-09-03 19:27:57 +00:00
|
|
|
photoModalVisible: false,
|
|
|
|
fileLoading: true
|
2019-05-10 17:09:07 +00:00
|
|
|
};
|
|
|
|
this.rid = props.navigation.getParam('rid');
|
|
|
|
this.t = props.navigation.getParam('t');
|
|
|
|
this.content = this.defineMessagesViewContent(props.navigation.getParam('name'));
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
this.load();
|
|
|
|
}
|
|
|
|
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2019-09-03 19:27:57 +00:00
|
|
|
const {
|
|
|
|
loading, messages, photoModalVisible, fileLoading
|
|
|
|
} = this.state;
|
2019-12-11 23:01:12 +00:00
|
|
|
const { theme } = this.props;
|
|
|
|
if (nextProps.theme !== theme) {
|
|
|
|
return true;
|
|
|
|
}
|
2019-05-10 17:09:07 +00:00
|
|
|
if (nextState.loading !== loading) {
|
|
|
|
return true;
|
|
|
|
}
|
2019-05-20 20:43:50 +00:00
|
|
|
if (nextState.photoModalVisible !== photoModalVisible) {
|
|
|
|
return true;
|
|
|
|
}
|
2019-05-10 17:09:07 +00:00
|
|
|
if (!equal(nextState.messages, messages)) {
|
|
|
|
return true;
|
|
|
|
}
|
2019-09-03 19:27:57 +00:00
|
|
|
if (fileLoading !== nextState.fileLoading) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2019-05-10 17:09:07 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
defineMessagesViewContent = (name) => {
|
|
|
|
const { messages } = this.state;
|
2019-12-11 23:01:12 +00:00
|
|
|
const { user, baseUrl, theme } = this.props;
|
2019-05-10 17:09:07 +00:00
|
|
|
|
|
|
|
const renderItemCommonProps = item => ({
|
|
|
|
baseUrl,
|
|
|
|
user,
|
|
|
|
author: item.u || item.user,
|
|
|
|
ts: item.ts || item.uploadedAt,
|
|
|
|
timeFormat: 'MMM Do YYYY, h:mm:ss a',
|
2019-05-20 20:43:50 +00:00
|
|
|
isEdited: !!item.editedAt,
|
|
|
|
isHeader: true,
|
|
|
|
attachments: item.attachments || [],
|
2019-10-07 20:56:30 +00:00
|
|
|
onOpenFileModal: this.onOpenFileModal,
|
|
|
|
getCustomEmoji: this.getCustomEmoji
|
2019-05-10 17:09:07 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
return ({
|
|
|
|
// Files Messages Screen
|
|
|
|
Files: {
|
|
|
|
name: I18n.t('Files'),
|
|
|
|
fetchFunc: async() => {
|
|
|
|
const result = await RocketChat.getFiles(this.rid, this.t, messages.length);
|
|
|
|
return { ...result, messages: result.files };
|
|
|
|
},
|
|
|
|
noDataMsg: I18n.t('No_files'),
|
|
|
|
testID: 'room-files-view',
|
|
|
|
renderItem: (item) => {
|
|
|
|
const url = getFileUrlFromMessage(item);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Message
|
|
|
|
{...renderItemCommonProps(item)}
|
|
|
|
attachments={[{
|
|
|
|
title: item.name,
|
|
|
|
description: item.description,
|
|
|
|
...url
|
|
|
|
}]}
|
2019-12-11 23:01:12 +00:00
|
|
|
theme={theme}
|
2019-05-10 17:09:07 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
// Mentions Messages Screen
|
|
|
|
Mentions: {
|
|
|
|
name: I18n.t('Mentions'),
|
|
|
|
fetchFunc: () => RocketChat.getMessages(
|
|
|
|
this.rid,
|
|
|
|
this.t,
|
|
|
|
{ 'mentions._id': { $in: [user.id] } },
|
|
|
|
messages.length
|
|
|
|
),
|
|
|
|
noDataMsg: I18n.t('No_mentioned_messages'),
|
|
|
|
testID: 'mentioned-messages-view',
|
|
|
|
renderItem: item => (
|
|
|
|
<Message
|
|
|
|
{...renderItemCommonProps(item)}
|
|
|
|
msg={item.msg}
|
2019-12-11 23:01:12 +00:00
|
|
|
theme={theme}
|
2019-05-10 17:09:07 +00:00
|
|
|
/>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
// Starred Messages Screen
|
|
|
|
Starred: {
|
|
|
|
name: I18n.t('Starred'),
|
|
|
|
fetchFunc: () => RocketChat.getMessages(
|
|
|
|
this.rid,
|
|
|
|
this.t,
|
|
|
|
{ 'starred._id': { $in: [user.id] } },
|
|
|
|
messages.length
|
|
|
|
),
|
|
|
|
noDataMsg: I18n.t('No_starred_messages'),
|
|
|
|
testID: 'starred-messages-view',
|
|
|
|
renderItem: item => (
|
|
|
|
<Message
|
|
|
|
{...renderItemCommonProps(item)}
|
|
|
|
msg={item.msg}
|
|
|
|
onLongPress={() => this.onLongPress(item)}
|
2019-12-11 23:01:12 +00:00
|
|
|
theme={theme}
|
2019-05-10 17:09:07 +00:00
|
|
|
/>
|
|
|
|
),
|
|
|
|
actionTitle: I18n.t('Unstar'),
|
2019-10-07 20:56:30 +00:00
|
|
|
handleActionPress: message => RocketChat.toggleStarMessage(message._id, message.starred)
|
2019-05-10 17:09:07 +00:00
|
|
|
},
|
|
|
|
// Pinned Messages Screen
|
|
|
|
Pinned: {
|
|
|
|
name: I18n.t('Pinned'),
|
|
|
|
fetchFunc: () => RocketChat.getMessages(this.rid, this.t, { pinned: true }, messages.length),
|
|
|
|
noDataMsg: I18n.t('No_pinned_messages'),
|
|
|
|
testID: 'pinned-messages-view',
|
|
|
|
renderItem: item => (
|
|
|
|
<Message
|
|
|
|
{...renderItemCommonProps(item)}
|
|
|
|
msg={item.msg}
|
|
|
|
onLongPress={() => this.onLongPress(item)}
|
2019-12-11 23:01:12 +00:00
|
|
|
theme={theme}
|
2019-05-10 17:09:07 +00:00
|
|
|
/>
|
|
|
|
),
|
|
|
|
actionTitle: I18n.t('Unpin'),
|
2019-10-07 20:56:30 +00:00
|
|
|
handleActionPress: message => RocketChat.togglePinMessage(message._id, message.pinned)
|
2019-05-10 17:09:07 +00:00
|
|
|
}
|
|
|
|
}[name]);
|
|
|
|
}
|
|
|
|
|
|
|
|
load = async() => {
|
|
|
|
const {
|
|
|
|
messages, total, loading
|
|
|
|
} = this.state;
|
|
|
|
if (messages.length === total || loading) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({ loading: true });
|
|
|
|
|
|
|
|
try {
|
|
|
|
const result = await this.content.fetchFunc();
|
|
|
|
if (result.success) {
|
|
|
|
this.setState({
|
|
|
|
messages: [...messages, ...result.messages],
|
|
|
|
total: result.total,
|
|
|
|
loading: false
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
this.setState({ loading: false });
|
|
|
|
console.warn('MessagesView -> catch -> error', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-07 20:56:30 +00:00
|
|
|
getCustomEmoji = (name) => {
|
|
|
|
const { customEmojis } = this.props;
|
|
|
|
const emoji = customEmojis[name];
|
|
|
|
if (emoji) {
|
|
|
|
return emoji;
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-05-20 20:43:50 +00:00
|
|
|
onOpenFileModal = (attachment) => {
|
|
|
|
this.setState({ selectedAttachment: attachment, photoModalVisible: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
onCloseFileModal = () => {
|
|
|
|
this.setState({ selectedAttachment: {}, photoModalVisible: false });
|
|
|
|
}
|
|
|
|
|
2019-05-10 17:09:07 +00:00
|
|
|
onLongPress = (message) => {
|
|
|
|
this.setState({ message });
|
|
|
|
this.showActionSheet();
|
|
|
|
}
|
|
|
|
|
|
|
|
showActionSheet = () => {
|
|
|
|
ActionSheet.showActionSheetWithOptions({
|
|
|
|
options: [this.content.actionTitle, I18n.t('Cancel')],
|
|
|
|
cancelButtonIndex: CANCEL_INDEX,
|
|
|
|
title: I18n.t('Actions')
|
|
|
|
}, (actionIndex) => {
|
|
|
|
this.handleActionPress(actionIndex);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
handleActionPress = async(actionIndex) => {
|
|
|
|
if (actionIndex === ACTION_INDEX) {
|
|
|
|
const { message } = this.state;
|
|
|
|
|
|
|
|
try {
|
|
|
|
const result = await this.content.handleActionPress(message);
|
|
|
|
if (result.success) {
|
|
|
|
this.setState(prevState => ({
|
|
|
|
messages: prevState.messages.filter(item => item._id !== message._id),
|
|
|
|
total: prevState.total - 1
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
console.warn('MessagesView -> handleActionPress -> catch -> error', error);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-09-03 19:27:57 +00:00
|
|
|
setFileLoading = (fileLoading) => {
|
|
|
|
this.setState({ fileLoading });
|
|
|
|
}
|
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
renderEmpty = () => {
|
|
|
|
const { theme } = this.props;
|
|
|
|
return (
|
|
|
|
<View
|
|
|
|
style={[
|
|
|
|
styles.listEmptyContainer,
|
|
|
|
{ backgroundColor: themes[theme].backgroundColor }
|
|
|
|
]}
|
|
|
|
testID={this.content.testID}
|
|
|
|
>
|
|
|
|
<Text style={[styles.noDataFound, { color: themes[theme].titleText }]}>{this.content.noDataMsg}</Text>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
2019-05-10 17:09:07 +00:00
|
|
|
|
|
|
|
renderItem = ({ item }) => this.content.renderItem(item)
|
|
|
|
|
|
|
|
render() {
|
2019-05-20 20:43:50 +00:00
|
|
|
const {
|
2019-09-03 19:27:57 +00:00
|
|
|
messages, loading, selectedAttachment, photoModalVisible, fileLoading
|
2019-05-20 20:43:50 +00:00
|
|
|
} = this.state;
|
2019-12-11 23:01:12 +00:00
|
|
|
const { user, baseUrl, theme } = this.props;
|
2019-05-10 17:09:07 +00:00
|
|
|
|
|
|
|
if (!loading && messages.length === 0) {
|
|
|
|
return this.renderEmpty();
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2019-12-11 23:01:12 +00:00
|
|
|
<SafeAreaView
|
|
|
|
style={[
|
|
|
|
styles.list,
|
|
|
|
{ backgroundColor: themes[theme].backgroundColor }
|
|
|
|
]}
|
|
|
|
forceInset={{ vertical: 'never' }}
|
|
|
|
testID={this.content.testID}
|
|
|
|
>
|
|
|
|
<StatusBar theme={theme} />
|
2019-05-10 17:09:07 +00:00
|
|
|
<FlatList
|
|
|
|
data={messages}
|
|
|
|
renderItem={this.renderItem}
|
2019-12-11 23:01:12 +00:00
|
|
|
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
|
2019-05-10 17:09:07 +00:00
|
|
|
keyExtractor={item => item._id}
|
|
|
|
onEndReached={this.load}
|
2019-12-11 23:01:12 +00:00
|
|
|
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
|
2019-05-10 17:09:07 +00:00
|
|
|
/>
|
2019-05-20 20:43:50 +00:00
|
|
|
<FileModal
|
|
|
|
attachment={selectedAttachment}
|
|
|
|
isVisible={photoModalVisible}
|
|
|
|
onClose={this.onCloseFileModal}
|
|
|
|
user={user}
|
|
|
|
baseUrl={baseUrl}
|
2019-09-03 19:27:57 +00:00
|
|
|
loading={fileLoading}
|
|
|
|
setLoading={this.setFileLoading}
|
2019-05-20 20:43:50 +00:00
|
|
|
/>
|
2019-05-10 17:09:07 +00:00
|
|
|
</SafeAreaView>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-08-20 19:24:22 +00:00
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
|
|
|
|
user: {
|
|
|
|
id: state.login.user && state.login.user.id,
|
|
|
|
username: state.login.user && state.login.user.username,
|
|
|
|
token: state.login.user && state.login.user.token
|
2019-10-07 20:56:30 +00:00
|
|
|
},
|
|
|
|
customEmojis: state.customEmojis
|
2019-08-20 19:24:22 +00:00
|
|
|
});
|
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
export default connect(mapStateToProps)(withTheme(MessagesView));
|