ref(chat): on native, group messages by sender (no styling)

react/features/chat/components/native/ChatMessageGroup.js

@@ -0,0 +1,76 @@
+// @flow
+
+import React, { Component } from 'react';
+import { FlatList } from 'react-native';
+
+import ChatMessage from './ChatMessage';
+import styles from './styles';
+
+type Props = {
+
+  /**
+   * The messages array to render.
+   */
+  messages: Array<Object>
+}
+
+/**
+ * Implements a container to render all the chat messages in a conference.
+ */
+export default class ChatMessageGroup extends Component<Props> {
+    /**
+     * Instantiates a new instance of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._keyExtractor = this._keyExtractor.bind(this);
+        this._renderMessage = this._renderMessage.bind(this);
+    }
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    render() {
+        return (
+            <FlatList
+                data = { this.props.messages }
+                inverted = { true }
+                keyExtractor = { this._keyExtractor }
+                renderItem = { this._renderMessage }
+                style = { styles.messageContainer } />
+        );
+    }
+
+    _keyExtractor: Object => string
+
+    /**
+     * Key extractor for the flatlist.
+     *
+     * @param {Object} item - The flatlist item that we need the key to be
+     * generated for.
+     * @param {number} index - The index of the element.
+     * @returns {string}
+     */
+    _keyExtractor(item, index) {
+        return `key_${index}`;
+    }
+
+    _renderMessage: Object => React$Element<*>;
+
+    /**
+     * Renders a single chat message.
+     *
+     * @param {Object} message - The chat message to render.
+     * @returns {React$Element<*>}
+     */
+    _renderMessage({ item: message }) {
+        return (
+            <ChatMessage message = { message } />
+        );
+    }
+}

react/features/chat/components/native/MessageContainer.js

@@ -6,7 +6,7 @@ import { FlatList } from 'react-native';
 import AbstractMessageContainer, { type Props }
     from '../AbstractMessageContainer';
 
-import ChatMessage from './ChatMessage';
+import ChatMessageGroup from './ChatMessageGroup';
 import styles from './styles';
 
 /**
@@ -22,7 +22,7 @@ export default class MessageContainer extends AbstractMessageContainer<Props> {
         super(props);
 
         this._keyExtractor = this._keyExtractor.bind(this);
-        this._renderMessage = this._renderMessage.bind(this);
+        this._renderMessageGroup = this._renderMessageGroup.bind(this);
     }
 
     /**
@@ -33,14 +33,16 @@ export default class MessageContainer extends AbstractMessageContainer<Props> {
     render() {
         return (
             <FlatList
-                data = { this.props.messages }
+                data = { this._getMessagesGroupedBySender() }
                 inverted = { true }
                 keyExtractor = { this._keyExtractor }
-                renderItem = { this._renderMessage }
+                renderItem = { this._renderMessageGroup }
                 style = { styles.messageContainer } />
         );
     }
 
+    _getMessagesGroupedBySender: () => Array<Array<Object>>;
+
     _keyExtractor: Object => string
 
     /**
@@ -55,17 +57,15 @@ export default class MessageContainer extends AbstractMessageContainer<Props> {
         return `key_${index}`;
     }
 
-    _renderMessage: Object => React$Element<*>;
+    _renderMessageGroup: Object => React$Element<*>;
 
     /**
      * Renders a single chat message.
      *
-     * @param {Object} message - The chat message to render.
+     * @param {Array<Object>} messages - The chat message to render.
      * @returns {React$Element<*>}
      */
-    _renderMessage({ item: message }) {
-        return (
-            <ChatMessage message = { message } />
-        );
+    _renderMessageGroup({ item: messages }) {
+        return <ChatMessageGroup messages = { messages } />;
     }
 }