feat(better reconnect): check online status and reconnect when we com…

…e back online

packages/components/__tests__/index.spec.tsx

@@ -200,7 +200,6 @@ test("will support onEvent to listen for events on the window", async (done) =>
       components: {
         inbox: {
           onEvent: (params) => {
-            console.log("params", params);
             expect(params).toEqual({
               messageId: mockGraphMessage.messageId,
               message: mockGraphMessage,

packages/components/src/index.html

@@ -301,7 +301,6 @@
           inbox: {
             appendTo: "#test",
             onEvent: (params) => {
-              console.log("params", params);
               if (
                 params.event === "read" &&
                 window.courier.inbox.pinned.find(

packages/react-hooks/src/__tests__/use-transport.spec.ts

@@ -1,12 +1,13 @@
 import { renderHook } from "@testing-library/react-hooks"; // will attempt to auto-detect
-import { CourierTransport, Transport } from "@trycourier/transport";
+import { CourierTransport } from "@trycourier/transport";
 import useTransport from "../use-transport";
 
 jest.mock("@trycourier/transport");
 
 const courierTransportMock = CourierTransport as jest.Mock;
 const courierTransport = new CourierTransport({
   clientSourceId: "foo",
+  clientKey: "foobar",
 });
 
 const renewSessionMock = courierTransport.renewSession as jest.Mock;
@@ -17,7 +18,11 @@ describe("useTransport", () => {
   });
 
   test("will return the same transport passed in", () => {
-    const transport = new Transport();
+    const transport = new CourierTransport({
+      clientSourceId: "abc123",
+      clientKey: "foo",
+    });
+
     const { result } = renderHook(() =>
       useTransport({
         transport,

packages/react-hooks/src/inbox/use-inbox-actions.ts

@@ -190,6 +190,11 @@ const useInboxActions = (): IInboxActions => {
       }
     },
     markMessageRead: async (messageId: string, fromWS?: boolean) => {
+      const message = allMessages.find((m) => m.messageId === messageId);
+      if (message?.read) {
+        return;
+      }
+
       dispatch(markMessageRead(messageId));
       if (!fromWS) {
         await inboxClient.markRead(messageId);
@@ -198,12 +203,17 @@ const useInboxActions = (): IInboxActions => {
       if (onEvent) {
         onEvent({
           event: "read",
-          message: allMessages.find((m) => m.messageId === messageId),
+          message,
           messageId,
         });
       }
     },
     markMessageUnread: async (messageId, fromWS) => {
+      const message = allMessages.find((m) => m.messageId === messageId);
+      if (!message?.read) {
+        return;
+      }
+
       dispatch(markMessageUnread(messageId));
       if (!fromWS) {
         await inboxClient.markUnread(messageId);
@@ -212,12 +222,17 @@ const useInboxActions = (): IInboxActions => {
       if (onEvent) {
         onEvent({
           messageId,
-          message: allMessages.find((m) => m.messageId === messageId),
+          message,
           event: "unread",
         });
       }
     },
     markMessageOpened: async (messageId, fromWS) => {
+      const message = allMessages.find((m) => m.messageId === messageId);
+      if (message?.opened) {
+        return;
+      }
+
       dispatch(markMessageOpened(messageId));
       if (!fromWS) {
         await inboxClient.markOpened(messageId);
@@ -226,12 +241,17 @@ const useInboxActions = (): IInboxActions => {
       if (onEvent) {
         onEvent({
           messageId,
-          message: allMessages.find((m) => m.messageId === messageId),
+          message,
           event: "opened",
         });
       }
     },
     markMessageArchived: async (messageId, fromWS) => {
+      const message = allMessages.find((m) => m.messageId === messageId);
+      if (message?.archived) {
+        return;
+      }
+
       dispatch(markMessageArchived(messageId));
       if (!fromWS) {
         await inboxClient.markArchive(messageId);
@@ -240,7 +260,7 @@ const useInboxActions = (): IInboxActions => {
       if (onEvent) {
         onEvent({
           messageId,
-          message: allMessages.find((m) => m.messageId === messageId),
+          message,
           event: "archive",
         });
       }

packages/react-hooks/src/use-transport.ts

@@ -1,32 +1,30 @@
-import { useMemo, useRef } from "react";
-import {
-  CourierTransport,
-  Transport,
-  ITransportOptions,
-} from "@trycourier/transport";
+import { useMemo, useRef, useEffect } from "react";
+import { CourierTransport, TransportOptions } from "@trycourier/transport";
 import jwtDecode from "jwt-decode";
 interface DecodedAuth {
   scope: string;
   tenantId: string;
 }
 
 const useTransport = ({
-  tenantId,
   authorization,
-  clientSourceId,
   clientKey,
+  clientSourceId,
+  isOnline,
+  tenantId,
   transport,
   userSignature,
   wsOptions,
 }: {
-  tenantId?: string;
   authorization?: string;
-  clientSourceId?: string;
   clientKey?: string;
-  transport?: CourierTransport | Transport;
+  clientSourceId?: string;
+  isOnline?: boolean;
+  tenantId?: string;
+  transport?: CourierTransport;
   userSignature?: string;
-  wsOptions?: ITransportOptions["wsOptions"];
-}): CourierTransport | Transport | undefined => {
+  wsOptions?: TransportOptions["wsOptions"];
+}): CourierTransport | undefined => {
   const transportRef =
     useRef<{
       authorization: string;
@@ -71,25 +69,53 @@ const useTransport = ({
       return;
     }
 
-    const newTransport = new CourierTransport({
-      tenantId,
-      authorization,
-      clientSourceId,
-      clientKey,
-      userSignature,
-      wsOptions,
-    });
-
-    // keep track of the transport so we don't reconnect when we don't have to
     if (authorization) {
+      const courierTransport = new CourierTransport({
+        tenantId,
+        authorization,
+        clientSourceId,
+        wsOptions,
+      });
+
+      // keep track of the transport so we don't reconnect when we don't have to
       transportRef.current = {
         authorization,
-        transport: newTransport,
+        transport: courierTransport,
       };
+
+      return courierTransport;
+    }
+
+    if (clientKey) {
+      const courierTransport = new CourierTransport({
+        tenantId,
+        clientSourceId,
+        clientKey,
+        userSignature,
+        wsOptions,
+      });
+
+      return courierTransport;
     }
-    return newTransport;
   }, [tenantId, authorization, clientKey, transport, userSignature, wsOptions]);
 
+  const isConnected = newTransport?.isConnected
+    ? newTransport?.isConnected()
+    : undefined;
+  useEffect(() => {
+    if (!(newTransport instanceof CourierTransport)) {
+      return;
+    }
+
+    if (!isOnline && isConnected) {
+      newTransport.closeConnection();
+    }
+
+    if (isOnline && !isConnected) {
+      newTransport.connect();
+    }
+  }, [newTransport, isConnected, isOnline]);
+
   return newTransport;
 };
 

packages/react-provider/src/hooks/use-is-online.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+const useIsOnline = (): boolean | undefined => {
+  if (typeof window === "undefined" || typeof navigator === "undefined") {
+    return;
+  }
+
+  const [isOnline, setOnlineStatus] = useState(window.navigator.onLine);
+
+  useEffect(() => {
+    const toggleOnlineStatus = () => setOnlineStatus(window.navigator.onLine);
+
+    window.addEventListener("online", toggleOnlineStatus);
+    window.addEventListener("offline", toggleOnlineStatus);
+
+    return () => {
+      window.removeEventListener("online", toggleOnlineStatus);
+      window.removeEventListener("offline", toggleOnlineStatus);
+    };
+  }, [isOnline]);
+
+  return isOnline;
+};
+
+export { useIsOnline };

packages/react-provider/src/index.tsx

@@ -35,6 +35,7 @@ import useClientSourceId from "./hooks/use-client-source-id";
 import deepExtend from "deep-extend";
 import { darkVariables, lightVariables } from "./theme";
 import { createGlobalStyle } from "styled-components";
+import { useIsOnline } from "./hooks/use-is-online";
 
 export * from "./hooks";
 
@@ -117,15 +118,17 @@ const CourierProviderInner: React.FunctionComponent<
     createReducer<any, Partial<ICourierContext>>(...middleware),
     [middleware]
   );
+  const isOnline = useIsOnline();
 
   const transport =
     typeof window === "undefined"
       ? undefined
       : useTransport({
-          tenantId: tenantId,
           authorization,
-          clientSourceId,
           clientKey,
+          clientSourceId,
+          isOnline,
+          tenantId: tenantId,
           transport: _transport,
           userSignature,
           wsOptions,
@@ -224,7 +227,7 @@ const CourierProviderInner: React.FunctionComponent<
         try {
           parsedLocalStorageState = JSON.parse(localStorageState);
         } catch (ex) {
-          console.log("error", ex);
+          console.error(ex);
         }
       }
     }

packages/react-provider/src/types.ts

@@ -1,4 +1,4 @@
-import { CourierTransport, Transport, WSOptions } from "@trycourier/transport";
+import { CourierTransport, WSOptions } from "@trycourier/transport";
 import { Interceptor } from "@trycourier/core";
 import { Brand } from "@trycourier/core";
 import { IInboxMessagePreview } from "@trycourier/core";
@@ -37,7 +37,7 @@ export interface ICourierProviderProps {
   onRouteChange?: (route: string) => void;
   tenantId?: string;
   theme?: ProviderTheme;
-  transport?: CourierTransport | Transport;
+  transport?: CourierTransport;
   userId?: string;
   userSignature?: string;
   wsOptions?: WSOptions;

packages/storybook/stories/client-graphql/examples/messages.tsx

@@ -55,7 +55,6 @@ const MessagesExample: React.FunctionComponent<{
     (messageId: string) => async (event: React.MouseEvent) => {
       event.preventDefault();
       const result = await inboxApi.getMessage(messageId);
-      console.log("message", message);
       if (!result?.message) {
         return;
       }

packages/storybook/stories/inbox/with-toast.stories.tsx

@@ -106,7 +106,6 @@ export function AsyncUserId() {
 
 export function OnMessage() {
   const handleOnMessage = (message) => {
-    console.log(message);
     return message;
   };
 

packages/transport/src/courier/index.ts

@@ -1,40 +1,41 @@
 import { CourierWS } from "../ws";
 import { Transport } from "../base";
 import { Interceptor } from "@trycourier/core";
-import { ITransportOptions } from "./types";
+import { TransportOptions, IClientKeyOptions, IJWTOptions } from "./types";
 
 export class CourierTransport extends Transport {
   protected tenantId?: string;
   protected authorization?: string;
-  protected clientSourceId: string;
+  protected clientSourceId?: string;
   protected clientKey?: string;
   protected declare interceptor?: Interceptor;
   protected userSignature?: string;
   protected ws: CourierWS;
 
-  constructor(options: ITransportOptions) {
+  constructor(options: TransportOptions) {
     super();
 
-    if (!options.clientKey && !options.authorization) {
+    const clientKeyOptions = options as IClientKeyOptions;
+    const jwtOptions = options as IJWTOptions;
+
+    if (!clientKeyOptions.clientKey && !jwtOptions.authorization) {
       throw new Error("Missing Authorization");
     }
 
-    this.authorization = options.authorization;
+    this.authorization = jwtOptions.authorization;
     this.clientSourceId = options.clientSourceId;
-    this.clientKey = options.clientKey;
-    this.userSignature = options.userSignature;
+    this.clientKey = clientKeyOptions.clientKey;
+    this.userSignature = clientKeyOptions.userSignature;
 
     this.ws = new CourierWS({
       tenantId: options.tenantId,
-      authorization: options.authorization,
+      authorization: jwtOptions.authorization,
       clientSourceId: options.clientSourceId,
-      clientKey: options.clientKey,
+      clientKey: clientKeyOptions.clientKey,
       options: options.wsOptions,
-      userSignature: options.userSignature,
+      userSignature: clientKeyOptions.userSignature,
     });
 
-    this.ws.connect();
-
     if (options.wsOptions?.onReconnect) {
       this.ws.onReconnection({
         id: "propReconnect",
@@ -51,6 +52,10 @@ export class CourierTransport extends Transport {
     this.ws.connect();
   }
 
+  isConnected(): boolean {
+    return this.ws.connected;
+  }
+
   keepAlive(): void {
     this.ws.send({
       action: "keepAlive",