From 504fadaf71ebc613cc0cf687e33f0af394ce2a5e Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.kim@8x8.com>
Date: Mon, 6 May 2019 12:30:38 -0700
Subject: [PATCH] ref(chat): on web, move timestamp to chat message

---
 css/_chat.scss                                | 10 +++--
 .../chat/components/AbstractChatMessage.js    | 20 ++++++---
 .../chat/components/native/ChatMessage.js     | 15 ++-----
 .../chat/components/web/ChatMessage.js        | 41 ++++++++++++++++---
 .../chat/components/web/ChatMessageGroup.js   | 11 +----
 5 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/css/_chat.scss b/css/_chat.scss
index 12523a863..36f5fc9b0 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -287,13 +287,17 @@
     &.local {
         align-items: flex-end;
 
+        .chatmessage {
+            background-color: $chatLocalMessageBackgroundColor;
+            border-radius: 6px 0px 6px 6px;
+        }
+
         .display-name {
             display: none;
         }
 
-        .chatmessage {
-            background-color: $chatLocalMessageBackgroundColor;
-            border-radius: 6px 0px 6px 6px;
+        .timestamp {
+            text-align: right;
         }
     }
 
diff --git a/react/features/chat/components/AbstractChatMessage.js b/react/features/chat/components/AbstractChatMessage.js
index 822896fdb..ab5df4e66 100644
--- a/react/features/chat/components/AbstractChatMessage.js
+++ b/react/features/chat/components/AbstractChatMessage.js
@@ -2,8 +2,14 @@
 
 import { PureComponent } from 'react';
 
+import { getLocalizedDateFormatter } from '../../base/i18n';
 import { getAvatarURLByParticipantId } from '../../base/participants';
 
+/**
+ * Formatter string to display the message timestamp.
+ */
+const TIMESTAMP_FORMAT = 'H:mm';
+
 /**
  * The type of the React {@code Component} props of {@code AbstractChatMessage}.
  */
@@ -47,11 +53,15 @@ export type Props = {
  * Abstract component to display a chat message.
  */
 export default class AbstractChatMessage<P: Props> extends PureComponent<P> {
-    static defaultProps = {
-        showAvatar: false,
-        showDisplayName: false,
-        showTimestamp: false
-    };
+    /**
+     * Returns the timestamp to display for the message.
+     *
+     * @returns {string}
+     */
+    _getFormattedTimestamp() {
+        return getLocalizedDateFormatter(new Date(this.props.message.timestamp))
+            .format(TIMESTAMP_FORMAT);
+    }
 }
 
 /**
diff --git a/react/features/chat/components/native/ChatMessage.js b/react/features/chat/components/native/ChatMessage.js
index 993920b79..bf6fab10e 100644
--- a/react/features/chat/components/native/ChatMessage.js
+++ b/react/features/chat/components/native/ChatMessage.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { getLocalizedDateFormatter, translate } from '../../../base/i18n';
+import { translate } from '../../../base/i18n';
 import { Avatar } from '../../../base/participants';
 import { connect } from '../../../base/redux';
 
@@ -13,11 +13,6 @@ import AbstractChatMessage, {
 } from '../AbstractChatMessage';
 import styles from './styles';
 
-/**
- * Formatter string to display the message timestamp.
- */
-const TIMESTAMP_FORMAT = 'H:mm';
-
 /**
  * Renders a single chat message.
  */
@@ -75,6 +70,8 @@ class ChatMessage extends AbstractChatMessage<Props> {
         );
     }
 
+    _getFormattedTimestamp: () => string;
+
     /**
      * Renders the avatar of the sender.
      *
@@ -112,11 +109,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
     _renderTimestamp() {
         return (
             <Text style = { styles.timeText }>
-                {
-                    getLocalizedDateFormatter(
-                        new Date(this.props.message.timestamp)
-                    ).format(TIMESTAMP_FORMAT)
-                }
+                { this._getFormattedTimestamp() }
             </Text>
         );
     }
diff --git a/react/features/chat/components/web/ChatMessage.js b/react/features/chat/components/web/ChatMessage.js
index e0ab91e62..7e436166e 100644
--- a/react/features/chat/components/web/ChatMessage.js
+++ b/react/features/chat/components/web/ChatMessage.js
@@ -56,13 +56,42 @@ class ChatMessage extends AbstractChatMessage<Props> {
         });
 
         return (
-            <div className = 'chatmessage'>
-                { this.props.showDisplayName && <div className = 'display-name'>
-                    { message.displayName }
-                </div> }
-                <div className = 'usermessage'>
-                    { processedMessage }
+            <div>
+                <div className = 'chatmessage'>
+                    { this.props.showDisplayName && this._renderDisplayName() }
+                    <div className = 'usermessage'>
+                        { processedMessage }
+                    </div>
                 </div>
+                { this.props.showTimestamp && this._renderTimestamp() }
+            </div>
+        );
+    }
+
+    _getFormattedTimestamp: () => string;
+
+    /**
+     * Renders the display name of the sender.
+     *
+     * @returns {React$Element<*>}
+     */
+    _renderDisplayName() {
+        return (
+            <div className = 'display-name'>
+                { this.props.message.displayName }
+            </div>
+        );
+    }
+
+    /**
+     * Renders the time at which the message was sent.
+     *
+     * @returns {React$Element<*>}
+     */
+    _renderTimestamp() {
+        return (
+            <div className = 'timestamp'>
+                { this._getFormattedTimestamp() }
             </div>
         );
     }
diff --git a/react/features/chat/components/web/ChatMessageGroup.js b/react/features/chat/components/web/ChatMessageGroup.js
index 14b128ec7..0a7536b2a 100644
--- a/react/features/chat/components/web/ChatMessageGroup.js
+++ b/react/features/chat/components/web/ChatMessageGroup.js
@@ -3,8 +3,6 @@
 import React, { Component } from 'react';
 import ChatMessage from './ChatMessage';
 
-import { getLocalizedDateFormatter } from '../../../base/i18n';
-
 type Props = {
 
     /**
@@ -43,8 +41,6 @@ class ChatMessageGroup extends Component<Props> {
             return null;
         }
 
-        const { timestamp } = messages[messagesLength - 1];
-
         return (
             <div className = { `chat-message-group ${className}` }>
                 {
@@ -52,13 +48,10 @@ class ChatMessageGroup extends Component<Props> {
                         <ChatMessage
                             key = { i }
                             message = { message }
-                            showDisplayName = { i === 0 } />
+                            showDisplayName = { i === 0 }
+                            showTimestamp = { i === messages.length - 1 } />
                     ))
                 }
-                <div className = 'chat-message-group-footer'>
-                    { getLocalizedDateFormatter(
-                        new Date(timestamp)).format('H:mm') }
-                </div>
             </div>
         );
     }