v1.6.0/brand new chat ui

app/src/Thread.js

@@ -16,63 +16,78 @@ YouTube logo is a trademark and intellectual property of Google, Inc.
 Hulu logo is a trademark and intellectual property of Hulu, LLC.
 HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia Direct,LLC.
 ************************************************************************/
-import React from 'react';
-import { Typography } from '@material-ui/core';
+import React, { Component } from 'react';
+import { Typography, IconButton } from '@material-ui/core';
+import { Reply } from '@material-ui/icons';
 import './Thread.css';
 import { LocalData } from './Api';
 
-const Thread = (props) =>
-  props.messages.map((m, midx) => {
-    var { userUid } = LocalData();
-    if (m.uid === '<system>') {
-      // SYSTEM MESSAGES
+export default class Thread extends Component {
+  constructor(props) {
+    super(props);
+    this.getReplyMessage = this.getReplyMessage.bind(this);
+  }
+  scrollToMessage(id) {
+    const pcc = document.querySelector('.thread-wrapper');
+    const msg = document.getElementById(id);
+    pcc.scrollTop = msg.offsetTop - pcc.offsetTop;
+    msg.classList.add('highlight');
+    setTimeout(() => msg.classList.remove('highlight'), 500);
+  }
+  getItemClassNames(uid, userUid, msgIdx) {
+    const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : '';
+    return `thread-item ${uid === userUid ? 'my-message' : ''} ${
+      uid === '<system>' ? 'system-message' : ''
+    } ${lastUid === uid ? 'continued-message' : ''}`;
+  }
+  getMessageTextOrImage(msg) {
+    if (msg.type === 'giphy') {
+      return <img alt="gif" src={msg.text} />;
+    }
+    return <p>{msg.text}</p>;
+  }
+  getTimeString(time) {
+    return new Date(time.seconds * 1000).toLocaleTimeString();
+  }
+  getReplyMessage(rT, messages) {
+    if (rT !== undefined && rT !== null) {
+      const replyMessage = messages.filter((m) => m.id === rT)[0];
       return (
-        <Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
-          {m.text}
-        </Typography>
-      );
-    } else if (m.uid === userUid) {
-      // OWN MESSAGE
-      return (
-        <div
-          className={`thread-item ${
-            midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
-          }`}
-          key={m.id}
-        >
-          {m.type === 'giphy' ? (
-            <img className="my-message" alt="giphy gif" src={m.text} />
-          ) : (
-            <Typography variant="body1" className="my-message">
-              {m.text}
-            </Typography>
-          )}
-          <span className="time">{new Date(m.time.seconds * 1000).toLocaleTimeString()}</span>
-        </div>
-      );
-    } else {
-      // OTHER USER MESSAGE
-      return (
-        <div
-          className={`thread-item ${
-            midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? '' : 'no-space') : ''
-          }`}
-          key={m.id}
-        >
-          <Typography variant="caption" className="name">
-            {midx > 0 ? (props.messages[midx - 1].uid !== m.uid ? m.name : '') : m.name}
-          </Typography>
-          {m.type === 'giphy' ? (
-            <img className="party-message" alt="giphy gif" src={m.text} />
-          ) : (
-            <Typography variant="body1" className="party-message">
-              {m.text}
-            </Typography>
-          )}
-          <span className="time">{new Date(m.time.seconds * 1000).toLocaleTimeString()}</span>
+        <div className="thread-reply" onClick={() => this.scrollToMessage(replyMessage.id)}>
+          <p className="thread-reply-name">Reply to {replyMessage.name}:</p>
+          {this.getMessageTextOrImage(replyMessage)}
         </div>
       );
     }
-  });
-
-export default Thread;
+    return null;
+  }
+  render() {
+    const { messages, setReplyTo } = this.props;
+    const { userUid } = LocalData();
+    return (
+      <div className="thread-container">
+        {messages.map((msg, msgIdx) => (
+          <div
+            id={msg.id}
+            key={`msg-${msgIdx}`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx)}
+          >
+            <div className="thread-name">{msg.name}</div>
+            {this.getReplyMessage(msg.replyTo, messages)}
+            <div className="thread-message">
+              <div className="thread-overline">
+                <span>{this.getTimeString(msg.time)}</span>
+                <div className="thread-reply-icon">
+                  <IconButton onClick={() => setReplyTo(msg)}>
+                    <Reply />
+                  </IconButton>
+                </div>
+              </div>
+              {this.getMessageTextOrImage(msg)}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}