diff --git a/app/lib/methods/loadMessagesForRoom.js b/app/lib/methods/loadMessagesForRoom.js
index 5a5bf69c80884b9e44f4224839b5e44b4160de82..368379514de9aee28f71bfb904ca3365f27ed3b4 100644
--- a/app/lib/methods/loadMessagesForRoom.js
+++ b/app/lib/methods/loadMessagesForRoom.js
@@ -29,20 +29,6 @@ async function loadMessagesForRoomDDP(...args) {
console.warn('loadMessagesForRoomDDP', e);
return loadMessagesForRoomRest.call(this, ...args);
}
-
- // }
- // if (cb) {
- // cb({ end: data && data.messages.length < 20 });
- // }
- // return data.message;
- // }, (err) => {
- // if (err) {
- // if (cb) {
- // cb({ end: true });
- // }
- // return Promise.reject(err);
- // }
- // });
}
export default async function loadMessagesForRoom(...args) {
@@ -52,13 +38,14 @@ export default async function loadMessagesForRoom(...args) {
try {
// eslint-disable-next-line
const data = (await (false && this.ddp.status ? loadMessagesForRoomDDP.call(this, ...args) : loadMessagesForRoomRest.call(this, ...args))).map(buildMessage);
- if (data) {
+ if (data && data.length) {
InteractionManager.runAfterInteractions(() => {
db.write(() => data.forEach(message => db.create('messages', message, true)));
return resolve(data);
});
+ } else {
+ return resolve([]);
}
- return resolve([]);
} catch (e) {
log('loadMessagesForRoom', e);
reject(e);
diff --git a/app/views/RoomView/DateSeparator.js b/app/views/RoomView/DateSeparator.js
deleted file mode 100644
index 68e2cb814889bdaa5322fb7be8e6506ba7884331..0000000000000000000000000000000000000000
--- a/app/views/RoomView/DateSeparator.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-
-const styles = StyleSheet.create({
- dateSeparator: {
- flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- marginVertical: -5
- },
- dateSeparatorLine: {
- borderTopColor: '#eaeaea',
- borderTopWidth: StyleSheet.hairlineWidth,
- flex: 1
- },
- dateSeparatorBadge: {
- color: '#444444',
- backgroundColor: '#fff',
- fontSize: 11,
- paddingHorizontal: 10,
- transform: [{ scaleY: -1 }]
- }
-});
-
-const DateSeparator = ({ ts }) => {
- const text = moment(ts).format('MMMM DD, YYYY');
- return (
- <View style={styles.dateSeparator}>
- <View style={styles.dateSeparatorLine} />
- <Text style={styles.dateSeparatorBadge}>{text}</Text>
- <View style={styles.dateSeparatorLine} />
- </View>
- );
-};
-
-DateSeparator.propTypes = {
- ts: PropTypes.instanceOf(Date)
-};
-
-export default DateSeparator;
diff --git a/app/views/RoomView/ListView.js b/app/views/RoomView/ListView.js
index 62801cbb0c5866a74254d18e9c79321c0b08c3d8..a9036a6ef97b38882503c31f75c7a4dfb14c7990 100644
--- a/app/views/RoomView/ListView.js
+++ b/app/views/RoomView/ListView.js
@@ -6,8 +6,7 @@ import moment from 'moment';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
-import DateSeparator from './DateSeparator';
-import UnreadSeparator from './UnreadSeparator';
+import Separator from './Separator';
import styles from './styles';
import Typing from '../../containers/Typing';
import database from '../../lib/realm';
@@ -72,7 +71,7 @@ export class List extends React.Component {
onEndReachedThreshold={100}
renderFooter={this.props.renderFooter}
renderHeader={() => <Typing />}
- onEndReached={() => this.props.onEndReached(this.data)}
+ onEndReached={() => this.props.onEndReached(this.data[this.data.length - 1])}
dataSource={this.dataSource}
renderRow={(item, previousItem) => this.props.renderRow(item, previousItem)}
initialListSize={20}
@@ -128,17 +127,21 @@ export class ListView extends OldList2 {
if (!previousMessage) {
+ bodyComponents.push(<Separator key={message.ts.toISOString()} ts={message.ts} />);
continue; // eslint-disable-line
}
- if (this.props.lastOpen &&
+ const showUnreadSeparator = this.props.lastOpen &&
moment(message.ts).isAfter(this.props.lastOpen) &&
- moment(previousMessage.ts).isBefore(this.props.lastOpen)
- ) {
- bodyComponents.push(<UnreadSeparator key='unread-separator' />);
- }
- if (!moment(message.ts).isSame(previousMessage.ts, 'day')) {
- bodyComponents.push(<DateSeparator key={message.ts.toISOString()} ts={message.ts} />);
+ moment(previousMessage.ts).isBefore(this.props.lastOpen);
+ const showDateSeparator = !moment(message.ts).isSame(previousMessage.ts, 'day');
+
+ if (showUnreadSeparator || showDateSeparator) {
+ bodyComponents.push(<Separator
+ key={message.ts.toISOString()}
+ ts={showDateSeparator ? message.ts : null}
+ unread={showUnreadSeparator}
+ />);
}
}
diff --git a/app/views/RoomView/Separator.js b/app/views/RoomView/Separator.js
new file mode 100644
index 0000000000000000000000000000000000000000..efb5a1f42eb76b5fafc8c120edab2c6caeb8a5bc
--- /dev/null
+++ b/app/views/RoomView/Separator.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import I18n from '../../i18n';
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ marginVertical: 10
+ },
+ line: {
+ borderTopColor: '#eaeaea',
+ borderTopWidth: StyleSheet.hairlineWidth,
+ flex: 1
+ },
+ text: {
+ color: '#444444',
+ fontSize: 11,
+ paddingHorizontal: 10,
+ transform: [{ scaleY: -1 }]
+ },
+ unreadLine: {
+ borderTopColor: 'red'
+ },
+ unreadText: {
+ color: 'red'
+ }
+});
+
+const DateSeparator = ({ ts, unread }) => {
+ const date = ts ? moment(ts).format('MMMM DD, YYYY') : null;
+ if (ts && unread) {
+ return (
+ <View style={styles.container}>
+ <Text style={[styles.text, styles.unreadText]}>{date}</Text>
+ <View style={[styles.line, styles.unreadLine]} />
+ <Text style={[styles.text, styles.unreadText]}>{I18n.t('unread_messages')}</Text>
+ </View>
+ );
+ }
+ if (ts) {
+ return (
+ <View style={styles.container}>
+ <View style={styles.line} />
+ <Text style={styles.text}>{date}</Text>
+ <View style={styles.line} />
+ </View>
+ );
+ }
+ return (
+ <View style={styles.container}>
+ <View style={[styles.line, styles.unreadLine]} />
+ <Text style={[styles.text, styles.unreadText]}>{I18n.t('unread_messages')}</Text>
+ </View>
+ );
+};
+
+DateSeparator.propTypes = {
+ ts: PropTypes.instanceOf(Date),
+ unread: PropTypes.bool
+};
+
+export default DateSeparator;
diff --git a/app/views/RoomView/UnreadSeparator.js b/app/views/RoomView/UnreadSeparator.js
deleted file mode 100644
index 00b4b9958c0a0d0c06e5e1353a24a53f20e5509d..0000000000000000000000000000000000000000
--- a/app/views/RoomView/UnreadSeparator.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import { View, StyleSheet, Text, LayoutAnimation } from 'react-native';
-import I18n from '../../i18n';
-
-const styles = StyleSheet.create({
- firstUnread: {
- flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- marginVertical: -7
- },
- firstUnreadLine: {
- borderTopColor: 'red',
- borderTopWidth: StyleSheet.hairlineWidth,
- flex: 1
- },
- firstUnreadBadge: {
- color: 'red',
- backgroundColor: '#fff',
- fontSize: 11,
- paddingHorizontal: 10,
- transform: [{ scaleY: -1 }]
- }
-});
-
-export default class UnreadSeparator extends React.PureComponent {
- componentWillUnmount() {
- LayoutAnimation.linear();
- }
- render() {
- return (
- <View style={styles.firstUnread}>
- <View style={styles.firstUnreadLine} />
- <Text style={styles.firstUnreadBadge}>{I18n.t('unread_messages')}</Text>
- </View>
- );
- }
-}
diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index 928da4fb130fcf8964915053ca4dc800d92a6ebd..28cfadb004ff4484e430a767583ba8be41e2f9ee 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -70,7 +70,8 @@ export default class RoomView extends LoggedView {
this.state = {
loaded: true,
joined: typeof props.rid === 'undefined',
- room: {}
+ room: {},
+ end: false
};
this.onReactionPress = this.onReactionPress.bind(this);
}
@@ -87,20 +88,15 @@ export default class RoomView extends LoggedView {
this.props.editCancel();
}
- onEndReached = (data) => {
- if (this.props.loading || this.state.end) {
+ onEndReached = (lastRowData) => {
+ if (!lastRowData) {
+ this.setState({ end: true });
return;
}
- requestAnimationFrame(() => {
- const lastRowData = data[data.length - 1];
- if (!lastRowData) {
- return;
- }
- // TODO: fix
- RocketChat.loadMessagesForRoom({ rid: this.rid, t: this.state.room.t, latest: lastRowData.ts }, ({ end }) => end && this.setState({
- end
- }));
+ requestAnimationFrame(async() => {
+ const result = await RocketChat.loadMessagesForRoom({ rid: this.rid, t: this.state.room.t, latest: lastRowData.ts });
+ this.setState({ end: result < 20 });
});
}