verdnatura-chat/app/views/MessagesView/index.js

333 lines
8.4 KiB
JavaScript
Raw Normal View History

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';
import I18n from '../../i18n';
import RocketChat from '../../lib/rocketchat';
import StatusBar from '../../containers/StatusBar';
import getFileUrlFromMessage from '../../lib/methods/helpers/getFileUrlFromMessage';
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';
const ACTION_INDEX = 0;
const CANCEL_INDEX = 1;
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)
});
static propTypes = {
user: PropTypes.object,
baseUrl: PropTypes.string,
navigation: PropTypes.object,
2019-12-11 23:01:12 +00:00
customEmojis: PropTypes.object,
theme: PropTypes.string
}
constructor(props) {
super(props);
this.state = {
loading: false,
messages: [],
selectedAttachment: {},
photoModalVisible: false,
fileLoading: true
};
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) {
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;
}
if (nextState.loading !== loading) {
return true;
}
if (nextState.photoModalVisible !== photoModalVisible) {
return true;
}
if (!equal(nextState.messages, messages)) {
return true;
}
if (fileLoading !== nextState.fileLoading) {
return true;
}
return false;
}
defineMessagesViewContent = (name) => {
const { messages } = this.state;
2019-12-11 23:01:12 +00:00
const { user, baseUrl, theme } = this.props;
const renderItemCommonProps = item => ({
baseUrl,
user,
author: item.u || item.user,
ts: item.ts || item.uploadedAt,
timeFormat: 'MMM Do YYYY, h:mm:ss a',
isEdited: !!item.editedAt,
isHeader: true,
attachments: item.attachments || [],
onOpenFileModal: this.onOpenFileModal,
getCustomEmoji: this.getCustomEmoji
});
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}
/>
);
}
},
// 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}
/>
)
},
// 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}
/>
),
actionTitle: I18n.t('Unstar'),
handleActionPress: message => RocketChat.toggleStarMessage(message._id, message.starred)
},
// 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}
/>
),
actionTitle: I18n.t('Unpin'),
handleActionPress: message => RocketChat.togglePinMessage(message._id, message.pinned)
}
}[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);
}
}
getCustomEmoji = (name) => {
const { customEmojis } = this.props;
const emoji = customEmojis[name];
if (emoji) {
return emoji;
}
return null;
}
onOpenFileModal = (attachment) => {
this.setState({ selectedAttachment: attachment, photoModalVisible: true });
}
onCloseFileModal = () => {
this.setState({ selectedAttachment: {}, photoModalVisible: false });
}
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);
}
}
}
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>
);
}
renderItem = ({ item }) => this.content.renderItem(item)
render() {
const {
messages, loading, selectedAttachment, photoModalVisible, fileLoading
} = this.state;
2019-12-11 23:01:12 +00:00
const { user, baseUrl, theme } = this.props;
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} />
<FlatList
data={messages}
renderItem={this.renderItem}
2019-12-11 23:01:12 +00:00
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
keyExtractor={item => item._id}
onEndReached={this.load}
2019-12-11 23:01:12 +00:00
ListFooterComponent={loading ? <ActivityIndicator theme={theme} /> : null}
/>
<FileModal
attachment={selectedAttachment}
isVisible={photoModalVisible}
onClose={this.onCloseFileModal}
user={user}
baseUrl={baseUrl}
loading={fileLoading}
setLoading={this.setFileLoading}
/>
</SafeAreaView>
);
}
}
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
},
customEmojis: state.customEmojis
});
2019-12-11 23:01:12 +00:00
export default connect(mapStateToProps)(withTheme(MessagesView));