2019-03-27 20:06:57 +00:00
|
|
|
import React from 'react';
|
2020-07-06 19:01:35 +00:00
|
|
|
import { FlatList, RefreshControl } from 'react-native';
|
2019-03-27 20:06:57 +00:00
|
|
|
import PropTypes from 'prop-types';
|
2019-10-07 20:56:30 +00:00
|
|
|
import orderBy from 'lodash/orderBy';
|
|
|
|
import { Q } from '@nozbe/watermelondb';
|
2020-02-19 19:43:47 +00:00
|
|
|
import moment from 'moment';
|
2020-03-18 21:26:17 +00:00
|
|
|
import isEqual from 'lodash/isEqual';
|
2019-03-27 20:06:57 +00:00
|
|
|
|
|
|
|
import styles from './styles';
|
2019-10-07 20:56:30 +00:00
|
|
|
import database from '../../lib/database';
|
2019-03-27 20:06:57 +00:00
|
|
|
import scrollPersistTaps from '../../utils/scrollPersistTaps';
|
|
|
|
import RocketChat from '../../lib/rocketchat';
|
|
|
|
import log from '../../utils/log';
|
|
|
|
import EmptyRoom from './EmptyRoom';
|
2019-10-07 20:56:30 +00:00
|
|
|
import { isIOS } from '../../utils/deviceInfo';
|
|
|
|
import { animateNextTransition } from '../../utils/layoutAnimation';
|
2019-12-11 23:01:12 +00:00
|
|
|
import ActivityIndicator from '../../containers/ActivityIndicator';
|
|
|
|
import debounce from '../../utils/debounce';
|
2020-02-19 19:43:47 +00:00
|
|
|
import { themes } from '../../constants/colors';
|
2019-03-27 20:06:57 +00:00
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
class List extends React.Component {
|
2019-03-27 20:06:57 +00:00
|
|
|
static propTypes = {
|
|
|
|
onEndReached: PropTypes.func,
|
|
|
|
renderFooter: PropTypes.func,
|
|
|
|
renderRow: PropTypes.func,
|
2019-04-08 12:35:28 +00:00
|
|
|
rid: PropTypes.string,
|
|
|
|
t: PropTypes.string,
|
2019-10-07 20:56:30 +00:00
|
|
|
tmid: PropTypes.string,
|
2019-12-11 23:01:12 +00:00
|
|
|
theme: PropTypes.string,
|
2020-05-25 20:54:27 +00:00
|
|
|
loading: PropTypes.bool,
|
2020-02-19 19:43:47 +00:00
|
|
|
listRef: PropTypes.func,
|
2020-03-18 21:26:17 +00:00
|
|
|
hideSystemMessages: PropTypes.array,
|
2020-02-19 19:43:47 +00:00
|
|
|
navigation: PropTypes.object
|
2019-03-27 20:06:57 +00:00
|
|
|
};
|
|
|
|
|
2020-05-25 20:54:27 +00:00
|
|
|
// this.state.loading works for this.onEndReached and RoomView.init
|
|
|
|
static getDerivedStateFromProps(props, state) {
|
|
|
|
if (props.loading !== state.loading) {
|
|
|
|
return {
|
|
|
|
loading: props.loading
|
|
|
|
};
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-03-27 20:06:57 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-04-08 12:35:28 +00:00
|
|
|
console.time(`${ this.constructor.name } init`);
|
|
|
|
console.time(`${ this.constructor.name } mount`);
|
2019-04-17 17:01:03 +00:00
|
|
|
|
2019-10-07 20:56:30 +00:00
|
|
|
this.mounted = false;
|
2019-03-27 20:06:57 +00:00
|
|
|
this.state = {
|
|
|
|
loading: true,
|
|
|
|
end: false,
|
2020-02-19 19:43:47 +00:00
|
|
|
messages: [],
|
|
|
|
refreshing: false,
|
|
|
|
animated: false
|
2019-03-27 20:06:57 +00:00
|
|
|
};
|
2019-10-07 20:56:30 +00:00
|
|
|
this.init();
|
2020-07-06 19:01:35 +00:00
|
|
|
this.unsubscribeFocus = props.navigation.addListener('focus', () => {
|
2020-02-19 19:43:47 +00:00
|
|
|
if (this.mounted) {
|
|
|
|
this.setState({ animated: true });
|
|
|
|
} else {
|
|
|
|
this.state.animated = true;
|
|
|
|
}
|
|
|
|
});
|
2019-04-08 12:35:28 +00:00
|
|
|
console.timeEnd(`${ this.constructor.name } init`);
|
2019-03-27 20:06:57 +00:00
|
|
|
}
|
|
|
|
|
2019-04-08 12:35:28 +00:00
|
|
|
componentDidMount() {
|
2019-10-07 20:56:30 +00:00
|
|
|
this.mounted = true;
|
2019-04-08 12:35:28 +00:00
|
|
|
console.timeEnd(`${ this.constructor.name } mount`);
|
|
|
|
}
|
|
|
|
|
2019-10-07 20:56:30 +00:00
|
|
|
// eslint-disable-next-line react/sort-comp
|
|
|
|
async init() {
|
|
|
|
const { rid, tmid } = this.props;
|
|
|
|
const db = database.active;
|
|
|
|
|
2020-03-18 21:26:17 +00:00
|
|
|
// handle servers with version < 3.0.0
|
|
|
|
let { hideSystemMessages = [] } = this.props;
|
|
|
|
if (!Array.isArray(hideSystemMessages)) {
|
|
|
|
hideSystemMessages = [];
|
|
|
|
}
|
|
|
|
|
2019-10-07 20:56:30 +00:00
|
|
|
if (tmid) {
|
|
|
|
try {
|
|
|
|
this.thread = await db.collections
|
|
|
|
.get('threads')
|
|
|
|
.find(tmid);
|
|
|
|
} catch (e) {
|
|
|
|
console.log(e);
|
|
|
|
}
|
|
|
|
this.messagesObservable = db.collections
|
|
|
|
.get('thread_messages')
|
2020-03-18 21:26:17 +00:00
|
|
|
.query(Q.where('rid', tmid), Q.or(Q.where('t', Q.notIn(hideSystemMessages)), Q.where('t', Q.eq(null))))
|
2019-12-11 23:01:12 +00:00
|
|
|
.observe();
|
|
|
|
} else if (rid) {
|
2019-10-07 20:56:30 +00:00
|
|
|
this.messagesObservable = db.collections
|
|
|
|
.get('messages')
|
2020-03-18 21:26:17 +00:00
|
|
|
.query(Q.where('rid', rid), Q.or(Q.where('t', Q.notIn(hideSystemMessages)), Q.where('t', Q.eq(null))))
|
2019-12-11 23:01:12 +00:00
|
|
|
.observe();
|
2019-10-07 20:56:30 +00:00
|
|
|
}
|
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
if (rid) {
|
|
|
|
this.unsubscribeMessages();
|
|
|
|
this.messagesSubscription = this.messagesObservable
|
|
|
|
.subscribe((data) => {
|
2020-07-06 19:01:35 +00:00
|
|
|
if (tmid && this.thread) {
|
|
|
|
data = [this.thread, ...data];
|
|
|
|
}
|
|
|
|
const messages = orderBy(data, ['ts'], ['desc']);
|
|
|
|
if (this.mounted) {
|
|
|
|
this.setState({ messages }, () => this.update());
|
|
|
|
} else {
|
|
|
|
this.state.messages = messages;
|
|
|
|
}
|
|
|
|
this.readThreads();
|
2019-10-07 20:56:30 +00:00
|
|
|
});
|
2019-12-11 23:01:12 +00:00
|
|
|
}
|
2019-10-07 20:56:30 +00:00
|
|
|
}
|
|
|
|
|
2020-03-18 21:26:17 +00:00
|
|
|
// eslint-disable-next-line react/sort-comp
|
|
|
|
reload = () => {
|
|
|
|
this.unsubscribeMessages();
|
|
|
|
this.init();
|
|
|
|
}
|
|
|
|
|
2020-07-06 19:01:35 +00:00
|
|
|
readThreads = async() => {
|
|
|
|
const { tmid } = this.props;
|
|
|
|
|
|
|
|
if (tmid) {
|
|
|
|
try {
|
|
|
|
await RocketChat.readThreads(tmid);
|
|
|
|
} catch {
|
|
|
|
// Do nothing
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-10-07 20:56:30 +00:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2020-02-19 19:43:47 +00:00
|
|
|
const { loading, end, refreshing } = this.state;
|
2020-03-18 21:26:17 +00:00
|
|
|
const { hideSystemMessages, theme } = this.props;
|
2019-12-11 23:01:12 +00:00
|
|
|
if (theme !== nextProps.theme) {
|
2019-10-07 20:56:30 +00:00
|
|
|
return true;
|
|
|
|
}
|
2019-12-11 23:01:12 +00:00
|
|
|
if (loading !== nextState.loading) {
|
2019-10-07 20:56:30 +00:00
|
|
|
return true;
|
|
|
|
}
|
2019-12-11 23:01:12 +00:00
|
|
|
if (end !== nextState.end) {
|
2019-10-07 20:56:30 +00:00
|
|
|
return true;
|
|
|
|
}
|
2020-02-19 19:43:47 +00:00
|
|
|
if (refreshing !== nextState.refreshing) {
|
|
|
|
return true;
|
|
|
|
}
|
2020-03-18 21:26:17 +00:00
|
|
|
if (!isEqual(hideSystemMessages, nextProps.hideSystemMessages)) {
|
|
|
|
return true;
|
|
|
|
}
|
2019-10-07 20:56:30 +00:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2020-03-18 21:26:17 +00:00
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
const { hideSystemMessages } = this.props;
|
|
|
|
if (!isEqual(hideSystemMessages, prevProps.hideSystemMessages)) {
|
|
|
|
this.reload();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-27 20:06:57 +00:00
|
|
|
componentWillUnmount() {
|
2019-12-11 23:01:12 +00:00
|
|
|
this.unsubscribeMessages();
|
2019-10-07 20:56:30 +00:00
|
|
|
if (this.onEndReached && this.onEndReached.stop) {
|
|
|
|
this.onEndReached.stop();
|
2019-04-17 17:01:03 +00:00
|
|
|
}
|
2020-07-06 19:01:35 +00:00
|
|
|
if (this.unsubscribeFocus) {
|
|
|
|
this.unsubscribeFocus();
|
2020-02-19 19:43:47 +00:00
|
|
|
}
|
2019-04-08 12:35:28 +00:00
|
|
|
console.countReset(`${ this.constructor.name }.render calls`);
|
2019-03-27 20:06:57 +00:00
|
|
|
}
|
|
|
|
|
2019-04-24 18:36:29 +00:00
|
|
|
onEndReached = debounce(async() => {
|
2019-03-27 20:06:57 +00:00
|
|
|
const {
|
2020-07-06 19:01:35 +00:00
|
|
|
loading, end, messages, latest = messages[messages.length - 1]?.ts
|
2019-03-27 20:06:57 +00:00
|
|
|
} = this.state;
|
2020-07-06 19:01:35 +00:00
|
|
|
if (loading || end) {
|
2019-03-27 20:06:57 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-04-17 17:01:03 +00:00
|
|
|
this.setState({ loading: true });
|
|
|
|
const { rid, t, tmid } = this.props;
|
2019-03-27 20:06:57 +00:00
|
|
|
try {
|
2019-04-17 17:01:03 +00:00
|
|
|
let result;
|
|
|
|
if (tmid) {
|
2019-05-03 13:33:38 +00:00
|
|
|
// `offset` is `messages.length - 1` because we append thread start to `messages` obj
|
2019-10-07 20:56:30 +00:00
|
|
|
result = await RocketChat.loadThreadMessages({ tmid, rid, offset: messages.length - 1 });
|
2019-04-17 17:01:03 +00:00
|
|
|
} else {
|
2020-07-06 19:01:35 +00:00
|
|
|
result = await RocketChat.loadMessagesForRoom({ rid, t, latest });
|
2019-04-17 17:01:03 +00:00
|
|
|
}
|
|
|
|
|
2020-07-06 19:01:35 +00:00
|
|
|
this.setState({ end: result.length < 50, loading: false, latest: result[result.length - 1]?.ts }, () => this.loadMoreMessages(result));
|
2019-03-27 20:06:57 +00:00
|
|
|
} catch (e) {
|
2019-04-17 17:01:03 +00:00
|
|
|
this.setState({ loading: false });
|
2019-09-03 19:27:57 +00:00
|
|
|
log(e);
|
2019-03-27 20:06:57 +00:00
|
|
|
}
|
2019-04-24 18:36:29 +00:00
|
|
|
}, 300)
|
2019-03-27 20:06:57 +00:00
|
|
|
|
2020-07-06 19:01:35 +00:00
|
|
|
loadMoreMessages = (result) => {
|
|
|
|
const { end } = this.state;
|
|
|
|
|
|
|
|
if (end) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// handle servers with version < 3.0.0
|
|
|
|
let { hideSystemMessages = [] } = this.props;
|
|
|
|
if (!Array.isArray(hideSystemMessages)) {
|
|
|
|
hideSystemMessages = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!hideSystemMessages.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const hasReadableMessages = result.filter(message => !message.t || (message.t && !hideSystemMessages.includes(message.t))).length > 0;
|
|
|
|
// if this batch doesn't contain any messages that will be displayed, we'll request a new batch
|
|
|
|
if (!hasReadableMessages) {
|
|
|
|
this.onEndReached();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-02-19 19:43:47 +00:00
|
|
|
onRefresh = () => this.setState({ refreshing: true }, async() => {
|
|
|
|
const { messages } = this.state;
|
|
|
|
const { rid, tmid } = this.props;
|
|
|
|
|
|
|
|
if (messages.length) {
|
|
|
|
try {
|
|
|
|
if (tmid) {
|
|
|
|
await RocketChat.loadThreadMessages({ tmid, rid, offset: messages.length - 1 });
|
|
|
|
} else {
|
|
|
|
await RocketChat.loadMissedMessages({ rid, lastOpen: moment().subtract(7, 'days').toDate() });
|
|
|
|
}
|
|
|
|
} catch (e) {
|
|
|
|
log(e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({ refreshing: false });
|
|
|
|
})
|
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
// eslint-disable-next-line react/sort-comp
|
|
|
|
update = () => {
|
2020-02-19 19:43:47 +00:00
|
|
|
const { animated } = this.state;
|
|
|
|
if (animated) {
|
|
|
|
animateNextTransition();
|
|
|
|
}
|
2019-12-11 23:01:12 +00:00
|
|
|
this.forceUpdate();
|
|
|
|
};
|
|
|
|
|
|
|
|
unsubscribeMessages = () => {
|
|
|
|
if (this.messagesSubscription && this.messagesSubscription.unsubscribe) {
|
|
|
|
this.messagesSubscription.unsubscribe();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
getLastMessage = () => {
|
|
|
|
const { messages } = this.state;
|
|
|
|
if (messages.length > 0) {
|
|
|
|
return messages[0];
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-03-27 20:06:57 +00:00
|
|
|
renderFooter = () => {
|
2019-04-17 17:01:03 +00:00
|
|
|
const { loading } = this.state;
|
2019-12-11 23:01:12 +00:00
|
|
|
const { rid, theme } = this.props;
|
|
|
|
if (loading && rid) {
|
|
|
|
return <ActivityIndicator theme={theme} />;
|
2019-03-27 20:06:57 +00:00
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2019-04-17 17:01:03 +00:00
|
|
|
renderItem = ({ item, index }) => {
|
2019-10-07 20:56:30 +00:00
|
|
|
const { messages } = this.state;
|
2019-04-17 17:01:03 +00:00
|
|
|
const { renderRow } = this.props;
|
|
|
|
return renderRow(item, messages[index + 1]);
|
|
|
|
}
|
|
|
|
|
2019-03-27 20:06:57 +00:00
|
|
|
render() {
|
2019-04-08 12:35:28 +00:00
|
|
|
console.count(`${ this.constructor.name }.render calls`);
|
2019-12-11 23:01:12 +00:00
|
|
|
const { rid, listRef } = this.props;
|
2020-02-19 19:43:47 +00:00
|
|
|
const { messages, refreshing } = this.state;
|
2019-12-11 23:01:12 +00:00
|
|
|
const { theme } = this.props;
|
2019-03-27 20:06:57 +00:00
|
|
|
return (
|
2019-10-07 20:56:30 +00:00
|
|
|
<>
|
2019-12-11 23:01:12 +00:00
|
|
|
<EmptyRoom rid={rid} length={messages.length} mounted={this.mounted} theme={theme} />
|
2019-03-27 20:06:57 +00:00
|
|
|
<FlatList
|
|
|
|
testID='room-view-messages'
|
2019-12-11 23:01:12 +00:00
|
|
|
ref={listRef}
|
2019-10-07 20:56:30 +00:00
|
|
|
keyExtractor={item => item.id}
|
2019-05-03 13:33:38 +00:00
|
|
|
data={messages}
|
2019-03-27 20:06:57 +00:00
|
|
|
extraData={this.state}
|
2019-04-17 17:01:03 +00:00
|
|
|
renderItem={this.renderItem}
|
2019-03-29 19:36:07 +00:00
|
|
|
contentContainerStyle={styles.contentContainer}
|
2019-03-27 20:06:57 +00:00
|
|
|
style={styles.list}
|
|
|
|
inverted
|
2019-10-07 20:56:30 +00:00
|
|
|
removeClippedSubviews={isIOS}
|
2019-12-11 23:01:12 +00:00
|
|
|
initialNumToRender={7}
|
2019-03-27 20:06:57 +00:00
|
|
|
onEndReached={this.onEndReached}
|
2020-01-29 20:20:36 +00:00
|
|
|
onEndReachedThreshold={5}
|
|
|
|
maxToRenderPerBatch={5}
|
|
|
|
windowSize={10}
|
2019-03-27 20:06:57 +00:00
|
|
|
ListFooterComponent={this.renderFooter}
|
2020-02-19 19:43:47 +00:00
|
|
|
refreshControl={(
|
|
|
|
<RefreshControl
|
|
|
|
refreshing={refreshing}
|
|
|
|
onRefresh={this.onRefresh}
|
|
|
|
tintColor={themes[theme].auxiliaryText}
|
|
|
|
/>
|
|
|
|
)}
|
2019-03-27 20:06:57 +00:00
|
|
|
{...scrollPersistTaps}
|
|
|
|
/>
|
2019-10-07 20:56:30 +00:00
|
|
|
</>
|
2019-03-27 20:06:57 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-12-11 23:01:12 +00:00
|
|
|
|
|
|
|
export default List;
|