ref(chat): create AbstractMessageContainer

So mobile and web can share logic for grouping chat
messages by sender.

react/features/chat/components/AbstractMessageContainer.js

@@ -0,0 +1,53 @@
+// @flow
+
+import { PureComponent } from 'react';
+
+export type Props = {
+
+    /**
+     * The messages array to render.
+     */
+    messages: Array<Object>
+}
+
+/**
+ * Abstract component to display a list of chat messages, grouped by sender.
+ *
+ * @extends PureComponent
+ */
+export default class AbstractMessageContainer<P: Props> extends PureComponent<P> {
+    static defaultProps = {
+        messages: []
+    };
+
+    /**
+     * Iterates over all the messages and creates nested arrays which hold
+     * consecutive messages sent by the same participant.
+     *
+     * @private
+     * @returns {Array<Array<Object>>}
+     */
+    _getMessagesGroupedBySender() {
+        const messagesCount = this.props.messages.length;
+        const groups = [];
+        let currentGrouping = [];
+        let currentGroupParticipantId;
+
+        for (let i = 0; i < messagesCount; i++) {
+            const message = this.props.messages[i];
+
+            if (message.id === currentGroupParticipantId) {
+                currentGrouping.push(message);
+            } else {
+                groups.push(currentGrouping);
+
+                currentGrouping = [ message ];
+                currentGroupParticipantId = message.id;
+            }
+        }
+
+        groups.push(currentGrouping);
+
+        return groups;
+    }
+}

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

@@ -1,23 +1,18 @@
 // @flow
 
-import React, { Component } from 'react';
+import React from 'react';
 import { FlatList } from 'react-native';
 
+import AbstractMessageContainer, { type Props }
+    from '../AbstractMessageContainer';
+
 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 MessageContainer extends Component<Props> {
+export default class MessageContainer extends AbstractMessageContainer<Props> {
     /**
      * Instantiates a new instance of the component.
      *

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

@@ -1,27 +1,18 @@
 // @flow
 
-import React, { PureComponent } from 'react';
+import React from 'react';
+
+import AbstractMessageContainer, { type Props }
+    from '../AbstractMessageContainer';
 
 import ChatMessageGroup from './ChatMessageGroup';
 
-type Props = {
-
-    /**
-     * The messages array to render.
-     */
-    messages: Array<Object>
-}
-
 /**
  * Displays all received chat messages, grouped by sender.
  *
- * @extends PureComponent
+ * @extends AbstractMessageContainer
  */
-export default class MessageContainer extends PureComponent<Props> {
-    static defaultProps = {
-        messages: []
-    };
-
+export default class MessageContainer extends AbstractMessageContainer<Props> {
     /**
      * Reference to the HTML element at the end of the list of displayed chat
      * messages. Used for scrolling to the end of the chat messages.
@@ -84,36 +75,7 @@ export default class MessageContainer extends PureComponent<Props> {
         );
     }
 
-    /**
-     * Iterates over all the messages and creates nested arrays which hold
-     * consecutive messages sent by the same participant.
-     *
-     * @private
-     * @returns {Array<Array<Object>>}
-     */
-    _getMessagesGroupedBySender() {
-        const messagesCount = this.props.messages.length;
-        const groups = [];
-        let currentGrouping = [];
-        let currentGroupParticipantId;
-
-        for (let i = 0; i < messagesCount; i++) {
-            const message = this.props.messages[i];
-
-            if (message.id === currentGroupParticipantId) {
-                currentGrouping.push(message);
-            } else {
-                groups.push(currentGrouping);
-
-                currentGrouping = [ message ];
-                currentGroupParticipantId = message.id;
-            }
-        }
-
-        groups.push(currentGrouping);
-
-        return groups;
-    }
+    _getMessagesGroupedBySender: () => Array<Array<Object>>;
 
     /**
      * Automatically scrolls the displayed chat messages down to the latest.