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

…e back online
trycourier · May 24, 2024 · a67a3ef · a67a3ef
1 parent 00141d1
commit a67a3ef
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 27 deletions.
diff --git a/packages/components/__tests__/index.spec.tsx b/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,

diff --git a/packages/components/src/index.html b/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(

diff --git a/packages/react-hooks/src/inbox/use-inbox-actions.ts b/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",
         });
       }

diff --git a/packages/react-hooks/src/use-transport.ts b/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, ITransportOptions } 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 => {
+}): CourierTransport | undefined => {
   const transportRef =
     useRef<{
       authorization: string;
@@ -90,6 +88,21 @@ const useTransport = ({
     return newTransport;
   }, [tenantId, authorization, clientKey, transport, userSignature, wsOptions]);
 
+  const isConnected = newTransport?.isConnected();
+  useEffect(() => {
+    if (!(newTransport instanceof CourierTransport)) {
+      return;
+    }
+
+    if (!isOnline && isConnected) {
+      newTransport.closeConnection();
+    }
+
+    if (isOnline && !isConnected) {
+      newTransport.connect();
+    }
+  }, [newTransport, isConnected, isOnline]);
+
   return newTransport;
 };
 

diff --git a/packages/react-provider/src/hooks/use-is-online.ts b/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 };
diff --git a/packages/react-provider/src/index.tsx b/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);
         }
       }
     }

diff --git a/packages/storybook/stories/client-graphql/examples/messages.tsx b/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;
       }

diff --git a/packages/storybook/stories/inbox/with-toast.stories.tsx b/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;
   };
 

diff --git a/packages/transport/src/courier/index.ts b/packages/transport/src/courier/index.ts
@@ -33,8 +33,6 @@ export class CourierTransport extends Transport {
       userSignature: options.userSignature,
     });
 
-    this.ws.connect();
-
     if (options.wsOptions?.onReconnect) {
       this.ws.onReconnection({
         id: "propReconnect",
@@ -51,6 +49,10 @@ export class CourierTransport extends Transport {
     this.ws.connect();
   }
 
+  isConnected(): boolean {
+    return this.ws.connected;
+  }
+
   keepAlive(): void {
     this.ws.send({
       action: "keepAlive",

diff --git a/packages/transport/src/ws.ts b/packages/transport/src/ws.ts
@@ -8,7 +8,9 @@ import { ErrorEventHandler, WSOptions } from "./types";
 
 const SUBSCRIPTION_VERSION = 5;
 export class CourierWS {
-  connection?: ReconnectingWebSocket;
+  public connection?: ReconnectingWebSocket;
+  public connected: boolean;
+
   private subscriptions: Array<{
     channel: string;
     event?: string;
@@ -28,7 +30,6 @@ export class CourierWS {
   private url: string;
   private userSignature?: string;
   private connectionCount: number;
-  protected connected;
   protected messageCallback;
 
   constructor({