Add queued treatment for messages, allow updating most recent message

src/contacts/ContactHistory.ts

@@ -305,24 +305,26 @@ export class ContactHistory extends RapidElement {
             }
           });
 
-          let fetchedEvents = results.events.reverse();
+          const fetchedEvents = results.events.reverse();
 
           // dedupe any events we get from the server
           // TODO: perhaps make this a little less crazy
-          fetchedEvents = fetchedEvents.filter(item => {
-            const found = !!this.eventGroups.find(
-              g =>
-                !!g.events.find(
-                  exists =>
-                    exists.created_on === item.created_on &&
-                    exists.type === item.type
-                )
+          let removed = 0;
+          this.eventGroups.forEach(g => {
+            const before = g.events.length;
+            g.events = g.events.filter(
+              prev =>
+                !fetchedEvents.find(fetched => {
+                  return (
+                    prev.created_on == fetched.created_on &&
+                    prev.type === fetched.type
+                  );
+                })
             );
-
-            return !found;
+            removed += before - g.events.length;
           });
 
-          this.lastRefreshAdded = fetchedEvents.length;
+          this.lastRefreshAdded = fetchedEvents.length - removed;
 
           // reflow our most recent event group in case it merges with our new groups
           const previousGroups = [...this.eventGroups];

src/contacts/events.ts

@@ -1,4 +1,4 @@
-import { css, html, TemplateResult } from 'lit';
+import { css, EventPart, html, TemplateResult } from 'lit';
 import { Msg, ObjectReference, User } from '../interfaces';
 import {
   getClasses,
@@ -212,6 +212,10 @@ export const getEventStyles = () => {
       background: var(--color-automated) !important;
     }
 
+    .queued {
+      opacity: 0.3;
+    }
+
     .optin_requested {
       --icon-color: var(--color-primary-dark);
     }
@@ -823,6 +827,10 @@ export const renderMsgEvent = (
     );
   }
 
+  if (event.status === 'Q') {
+    summary.push(html`<div>Queued</div>`);
+  }
+
   summary.push(
     html`<temba-date
       class="time"
@@ -831,7 +839,10 @@ export const renderMsgEvent = (
     ></temba-date>`
   );
 
-  return html`<div style="display:flex;align-items:flex-start">
+  return html`<div
+    style="display:flex;align-items:flex-start"
+    class=${getClasses({ queued: event.status === 'Q' })}
+  >
     <div style="display:flex;flex-direction:column">
       <div
         class="${event.msg.text ? '' : 'no-message'} attachments-${(
@@ -862,7 +873,9 @@ export const renderMsgEvent = (
 
       <div
         class="msg-summary"
-        style="flex-direction:row${isInbound ? '-reverse' : ''}"
+        style="align-items:center;flex-direction:row${isInbound
+          ? '-reverse'
+          : ''}"
       >
         <div style="flex-grow:1"></div>
         ${summary}