@nyaruka/temba-components 0.160.1 → 0.162.0

package/src/live/SocketService.ts

@@ -0,0 +1,158 @@
+import { Centrifuge, Subscription, SubscriptionState } from 'centrifuge';
+
+/**
+ * Access to our realtime messaging socket (centrifugo). The server lives
+ * behind the same origin at /ws/connect and authenticates connections with
+ * the browser's session cookie (via a server-side connect proxy), so no
+ * token handling is needed here.
+ *
+ * The connection is owned by a SocketManager which is page-scoped - it hangs
+ * off `window` rather than any component, so it survives components mounting
+ * and unmounting, and vanilla js on the containing page can share the same
+ * connection:
+ *
+ *   const sub = window.sockets.subscribe('notifications:<org>:<user>', (event) => {
+ *     ...
+ *   });
+ *   sub.unsubscribe();
+ *
+ * Any number of subscribers (components or page js) can watch the same
+ * channel - the underlying centrifugo subscription is created on first use
+ * and torn down when the last subscriber leaves. The connection itself stays
+ * open for the life of the page. Each published event arrives as raw JSON.
+ */
+
+export interface SocketSubscription {
+  unsubscribe(): void;
+}
+
+export type PublicationHandler = (data: any) => void;
+
+export interface SocketProvider {
+  subscribe(
+    channel: string,
+    onPublication: PublicationHandler,
+    onSubscribed?: () => void
+  ): SocketSubscription;
+}
+
+interface ChannelEntry {
+  sub: Subscription;
+  count: number;
+}
+
+export class SocketManager implements SocketProvider {
+  private socket: Centrifuge = null;
+  private channels = new Map<string, ChannelEntry>();
+  private createSocket: () => Centrifuge;
+
+  constructor(createSocket?: () => Centrifuge) {
+    this.createSocket =
+      createSocket ||
+      (() => {
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const socket = new Centrifuge(
+          `${protocol}://${window.location.host}/ws/connect`
+        );
+        socket.connect();
+        return socket;
+      });
+  }
+
+  public subscribe(
+    channel: string,
+    onPublication: PublicationHandler,
+    onSubscribed?: () => void
+  ): SocketSubscription {
+    if (!this.socket) {
+      this.socket = this.createSocket();
+    }
+
+    let entry = this.channels.get(channel);
+    if (!entry) {
+      entry = {
+        sub:
+          this.socket.getSubscription(channel) ||
+          this.socket.newSubscription(channel),
+        count: 0
+      };
+      this.channels.set(channel, entry);
+      entry.sub.subscribe();
+    }
+    entry.count++;
+
+    const sub = entry.sub;
+    const pubHandler = (ctx: { data: any }) => onPublication(ctx.data);
+    sub.on('publication', pubHandler);
+
+    let subHandler: () => void = null;
+    if (onSubscribed) {
+      // fires on every (re)subscribe, including after reconnects, so
+      // subscribers can catch up on anything missed while offline
+      subHandler = () => onSubscribed();
+      sub.on('subscribed', subHandler);
+
+      // late joiners on an already-live channel won't see a subscribed
+      // event, so give them their initial one
+      if (sub.state === SubscriptionState.Subscribed) {
+        window.setTimeout(() => subHandler && subHandler(), 0);
+      }
+    }
+
+    let active = true;
+    return {
+      unsubscribe: () => {
+        if (!active) {
+          return;
+        }
+        active = false;
+
+        sub.off('publication', pubHandler);
+        if (subHandler) {
+          sub.off('subscribed', subHandler);
+          subHandler = null;
+        }
+
+        entry.count--;
+        if (entry.count === 0) {
+          this.channels.delete(channel);
+          sub.unsubscribe();
+          this.socket.removeSubscription(sub);
+        }
+      }
+    };
+  }
+}
+
+// the page-scoped manager, shared with vanilla js as window.sockets and
+// reused if another copy of this module already created it
+const getManager = (): SocketManager => {
+  const w = window as any;
+  if (!w.sockets) {
+    w.sockets = new SocketManager();
+  }
+  return w.sockets;
+};
+getManager();
+
+// when set, components subscribe through this instead of the page manager
+let provider: SocketProvider = null;
+
+export const subscribeToSocket = (
+  channel: string,
+  onPublication: PublicationHandler,
+  onSubscribed?: () => void
+): SocketSubscription => {
+  return (provider || getManager()).subscribe(
+    channel,
+    onPublication,
+    onSubscribed
+  );
+};
+
+// for tests to swap in a mock provider, returns the previous provider
+export const setSocketProvider = (newProvider: SocketProvider) => {
+  const previous = provider;
+  provider = newProvider;
+  return previous;
+};

package/src/locales/es.ts

@@ -12,8 +12,10 @@
       'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
 's73b4d70c02f4b4e0': `No options`,
 'sbc913d7dc0f33877': `to add`,
+'s81f17cfc89a04338': `Interrupt flow`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+'sea4f08110bb8f15d': `Remove`,
     };
   

package/src/locales/fr.ts

@@ -12,8 +12,10 @@
       's73b4d70c02f4b4e0': `No options`,
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
+'s81f17cfc89a04338': `Interrupt flow`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+'sea4f08110bb8f15d': `Remove`,
     };
   

package/src/locales/pt.ts

@@ -12,8 +12,10 @@
       's73b4d70c02f4b4e0': `No options`,
 'scf1453991c986b25': `Tab to complete, enter to select`,
 'sbc913d7dc0f33877': `to add`,
+'s81f17cfc89a04338': `Interrupt flow`,
 's8f02e3a18ffc083a': `Are not currently in a flow`,
 's638236250662c6b3': `Have sent a message in the last`,
 's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
+'sea4f08110bb8f15d': `Remove`,
     };
   

package/src/store/Store.ts

@@ -158,6 +158,23 @@ export class Store extends RapidElement {
   }
 
   private cache: any;
+
+  // user avatar urls by user uuid, seeded from server-hydrated user
+  // references so ones that arrive without an avatar (e.g. events published
+  // over sockets) can be filled in from users we've already seen. LRU-bounded
+  // so long-lived tabs don't accumulate every user ever seen.
+  private userAvatars = lru<string>(500);
+
+  public setUserAvatar(uuid: string, avatar: string) {
+    if (uuid && avatar) {
+      this.userAvatars.set(uuid, avatar);
+    }
+  }
+
+  public getUserAvatar(uuid: string): string {
+    return this.userAvatars.get(uuid);
+  }
+
   public getLocale() {
     return this.locale[0];
   }
@@ -561,6 +578,7 @@ export class Store extends RapidElement {
             const results = response.json.results;
             if (results && results.length === 1) {
               const user = results[0];
+              this.setUserAvatar(user.uuid, user.avatar);
 
               items.forEach((item) => {
                 // replace each key with a matching user

package/xliff/es.xlf

@@ -21,6 +21,12 @@
 <trans-unit id="sbc913d7dc0f33877">
   <source>to add</source>
 </trans-unit>
+<trans-unit id="sea4f08110bb8f15d">
+  <source>Remove</source>
+</trans-unit>
+<trans-unit id="s81f17cfc89a04338">
+  <source>Interrupt flow</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/fr.xlf

@@ -20,6 +20,12 @@
 <trans-unit id="sbc913d7dc0f33877">
   <source>to add</source>
 </trans-unit>
+<trans-unit id="sea4f08110bb8f15d">
+  <source>Remove</source>
+</trans-unit>
+<trans-unit id="s81f17cfc89a04338">
+  <source>Interrupt flow</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/pt.xlf

@@ -20,6 +20,12 @@
 <trans-unit id="sbc913d7dc0f33877">
   <source>to add</source>
 </trans-unit>
+<trans-unit id="sea4f08110bb8f15d">
+  <source>Remove</source>
+</trans-unit>
+<trans-unit id="s81f17cfc89a04338">
+  <source>Interrupt flow</source>
+</trans-unit>
 </body>
 </file>
 </xliff>