v1.6.0/pending message handling

app/src/Thread.js

@@ -25,15 +25,17 @@ import { LocalData, webhookFetcher } from './Api';
 export default class Thread extends Component {
   constructor(props) {
     super(props);
+    this.getTimeString = this.getTimeString.bind(this);
     this.getReplyMessage = this.getReplyMessage.bind(this);
     this.getMessageTextOrImage = this.getMessageTextOrImage.bind(this);
   }
   scrollToMessage(id) {
     const pcc = document.querySelector('.thread-wrapper');
     const msg = document.getElementById(id);
-    pcc.scrollTop = msg.offsetTop - pcc.offsetTop;
+    const alc = document.querySelector('#party-routes-wrapper > div.party-chat-container > div.thread-wrapper > div.alerts-container');
+    pcc.scrollTop = msg.offsetTop - pcc.offsetTop - alc.clientHeight - 10;
     msg.classList.add('highlight');
-    setTimeout(() => msg.classList.remove('highlight'), 500);
+    setTimeout(() => msg.classList.remove('highlight'), 2000);
   }
   handleInteractiveMessageCall(msg) {
     const thanksElement = document.createElement('div');
@@ -58,9 +60,11 @@ export default class Thread extends Component {
       }
     }
   }
-  getItemClassNames(uid, userUid, msgIdx) {
-    const lastUid = msgIdx >= 1 ? this.props.messages[msgIdx - 1].uid : '';
+  getItemClassNames(uid, userUid, msgIdx, messages, isSending = false) {
+    const lastUid = msgIdx >= 1 ? messages[msgIdx - 1].uid : '';
     return `thread-item ${uid === userUid ? 'my-message' : ''} ${
+      isSending ? 'sending-message' : ''
+    } ${
       uid === '<system>' ? 'system-message' : ''
     } ${lastUid === uid ? 'continued-message' : ''}`;
   }
@@ -113,18 +117,18 @@ export default class Thread extends Component {
     return null;
   }
   render() {
-    const { messages, setReplyTo } = this.props;
+    const { sendingMessages, setReplyTo, sentMessages } = this.props;
     const { userUid } = LocalData();
     return (
       <div className="thread-container">
-        {messages.map((msg, msgIdx) => (
+        {sentMessages.length > 0 ? sentMessages.map((msg, msgIdx) => (
           <div
             id={msg.id}
             key={`msg-${msgIdx}`}
-            className={this.getItemClassNames(msg.uid, userUid, msgIdx)}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, sentMessages)}
           >
             <div className="thread-name">{msg.name}</div>
-            {this.getReplyMessage(msg.replyTo, messages)}
+            {this.getReplyMessage(msg.replyTo, sentMessages)}
             <div className="thread-message">
               <div className="thread-overline">
                 <span>{this.getTimeString(msg.time)}</span>
@@ -137,8 +141,33 @@ export default class Thread extends Component {
               {this.getMessageTextOrImage(msg)}
             </div>
           </div>
-        ))}
+        )) : null}
+        {sendingMessages.length > 0 ? sendingMessages.map((msg, msgIdx) => (
+          <div
+            id={msg.id}
+            key={`msg-${msgIdx}`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
+          >
+            <div className="thread-name">{msg.name}</div>
+            {this.getReplyMessage(msg.replyTo, sentMessages)}
+            <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>
+        )) : null}
       </div>
     );
   }
 }
+
+Thread.defaultProps = {
+  setReplyTo : () => {}
+};