v1.6.0/pending message handling

app/src/Chat.js

@@ -101,6 +101,7 @@ export default class Chat extends Component {
       allowAutoRejoin:
         LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
       replyTo: null,
+      sendingMessages: [], 
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -172,14 +173,14 @@ export default class Chat extends Component {
         goTo(Create, this.props);
         return;
       }
+
       // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
       if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
         if (response.messages && response.messages.length !== this.state.messages.length) {
           const lastMessage = response.messages[response.messages.length - 1];
-          var notificationMessage = '';
-          if (lastMessage.uid !== '<system>') notificationMessage += lastMessage.name + ': ';
-          notificationMessage += lastMessage.text;
-          this.props.notify(notificationMessage);
+          if (lastMessage.uid !== '<system>') {
+            this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`);
+          }
         }
       }
       // ADMIN MODE UPDATE COMPLETE
@@ -303,17 +304,34 @@ export default class Chat extends Component {
     this.props.notify('Copied party invitation');
   }
   sendMessage(message) {
+    const { sendingMessages } = this.state;
     const data = {
+      id: `sending-${sendingMessages.length}`,
       roomId: LocalData().partyName,
       name: LocalData().userName,
       uid: LocalData().userUid,
       text: message,
       time: new Date(),
-      type: '',
+      type: ''
     };
     if (this.state.gif === true) data.type = 'giphy';
     if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
-    SendMessageApi(data).catch((err) => {
+    sendingMessages.push(data);
+    this.setState({
+      sendingMessages
+    });
+    SendMessageApi(data)
+    .then(() => {
+      const { sendingMessages: sm } = this.state;
+      const rmi = sm.indexOf(data);
+      sm.splice(rmi,1);
+      this.setState({ sendingMessages: sm });
+    })
+    .catch((err) => {
+      const { sendingMessages: sm } = this.state;
+      const rmi = sm.indexOf(data);
+      sm.splice(rmi,1);
+      this.setState({ sendingMessages: sm });
       this.props.notify(err.message || err.statusText);
       console.error('Send Message API error', err);
     });
@@ -431,6 +449,7 @@ export default class Chat extends Component {
       adminModeUpdate,
       adminOnly,
       replyTo,
+      sendingMessages
     } = this.state;
     const alerts = [
       {
@@ -682,7 +701,7 @@ export default class Chat extends Component {
               } else return null;
             })}
           </div>
-          <Thread setReplyTo={this.setReplyTo} messages={messages} />
+          <Thread setReplyTo={this.setReplyTo} sendingMessages={sendingMessages} sentMessages={messages} />
         </div>
         <Paper
           square
@@ -796,7 +815,16 @@ export default class Chat extends Component {
                 <InputAdornment position="start">
                   <IconButton
                     className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
-                    onClick={() => this.setState({ gif: !gif })}
+                    onClick={() => {
+                      this.setState({ gif: !gif });
+                      if (!gif) {
+                        window.postMessage({
+                          watchPartyDirection: 'TO_SCRIPT',
+                          type: 'WATCH_PARTY_SEARCH_GIF',
+                          value: newMessage,
+                        });
+                      }
+                    }}
                     edge="start"
                   >
                     {gif ? <Cancel /> : <Gif />}
@@ -806,7 +834,6 @@ export default class Chat extends Component {
             }}
           />
         </div>
-        {gif ? (
           <ReactGiphySearchbox 
             apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
             onSelect={this.gifClick}
@@ -814,12 +841,11 @@ export default class Chat extends Component {
               { columns: 2, imageWidth: '50%', gutter: 5 },
             ]}
             searchFormClassName="giphy-search-form"
-            wrapperClassName="giphy-wrapper"
+            wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down' }`}
             listWrapperClassName="giphy-list-wrapper"
             listItemClassName="giphy-list-item"
             poweredByGiphy
           />
-        ) : null}
       </div>
     );
   }