Merge pull request #93 from GetStream/vishal/event-history-issue

CRNS-33: Fixing issue with event history when message list is empty

Author: vishalnarkhede

src/components/ChannelInner.js

@@ -469,7 +469,9 @@ export class ChannelInner extends PureComponent {
   addToEventHistory = (e) => {
     this.setState((prevState) => {
       const lastMessageId =
-        prevState.messages[prevState.messages.length - 1].id;
+        prevState.messages.length > 0
+          ? prevState.messages[prevState.messages.length - 1].id
+          : 'none';
 
       if (!prevState.eventHistory[lastMessageId])
         return {
@@ -495,11 +497,20 @@ export class ChannelInner extends PureComponent {
     if (this.state.loadingMore || !this.state.hasMore) return;
     if (this._unmounted) return;
     this.setState({ loadingMore: true });
+
+    if (!this.state.messages.length === 0) {
+      this.setState({
+        loadingMore: false,
+      });
+
+      return;
+    }
+
     const oldestMessage = this.state.messages[0]
       ? this.state.messages[0]
       : null;
 
-    if (oldestMessage.status !== 'received') {
+    if (oldestMessage && oldestMessage.status !== 'received') {
       this.setState({
         loadingMore: false,
       });

src/components/MessageList.js

@@ -263,6 +263,16 @@ const MessageList = withChannelContext(
 
     insertDates = (messages) => {
       const newMessages = [];
+      if (messages.length === 0) {
+        this.props.eventHistory.none.forEach((e) => {
+          newMessages.push({
+            type: 'channel.event',
+            event: e,
+          });
+        });
+
+        return newMessages;
+      }
 
       for (const [i, message] of messages.entries()) {
         if (message.type === 'message.read' || message.deleted_at) {
@@ -512,11 +522,16 @@ const MessageList = withChannelContext(
     };
 
     render() {
+      const hasEventHistory =
+        this.props.eventHistory &&
+        Object.keys(this.props.eventHistory).length > 0;
+
       // We can't provide ListEmptyComponent to FlatList when inverted flag is set.
       // https://github.com/facebook/react-native/issues/21196
       if (
         this.props.messages &&
         this.props.messages.length === 0 &&
+        !hasEventHistory &&
         !this.props.threadList
       ) {
         return <View style={{ flex: 1 }}>{this.renderEmptyState()}</View>;