From a9637f93c317b91b98d279a8c7e01f555da8e890 Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.kim@8x8.com>
Date: Sat, 4 May 2019 14:37:30 -0700
Subject: [PATCH] ref(chat): create AbstractMessageContainer

So mobile and web can share logic for grouping chat
messages by sender.
---
 .../components/AbstractMessageContainer.js    | 53 +++++++++++++++++++
 .../components/native/MessageContainer.js     | 15 ++----
 .../chat/components/web/MessageContainer.js   | 52 +++---------------
 3 files changed, 65 insertions(+), 55 deletions(-)
 create mode 100644 react/features/chat/components/AbstractMessageContainer.js

diff --git a/react/features/chat/components/AbstractMessageContainer.js b/react/features/chat/components/AbstractMessageContainer.js
new file mode 100644
index 000000000..ad1409c79
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/react/features/chat/components/native/MessageContainer.js b/react/features/chat/components/native/MessageContainer.js
index c9569ee66..0cb76020d 100644
--- a/react/features/chat/components/native/MessageContainer.js
+++ b/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.
      *
diff --git a/react/features/chat/components/web/MessageContainer.js b/react/features/chat/components/web/MessageContainer.js
index be3bc24b4..3f8fc4860 100644
--- a/react/features/chat/components/web/MessageContainer.js
+++ b/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.