Return connection status on reconnect (#2072)

* Update LostConnectionHandler.ts

Amending the reconnect function to return the result from the AsyncGenerator function

* Update Sample app to handle connection failure on reconnect

Updating the sample app to handle the status on reconnect

Author: anandBalachandar

vuu-ui/packages/vuu-data-remote/src/LostConnectionHandler.ts

@@ -47,11 +47,13 @@ export class RetryGenerator {
     console.log("[RetryGenerator] constructor");
   }
 
-  async *[Symbol.asyncIterator](): AsyncGenerator {
+  async *[Symbol.asyncIterator](): AsyncGenerator<
+    "connected" | "connection-failed"
+  > {
     let connected = false;
     do {
       await new Promise((resolve) =>
-        setTimeout(resolve, this.options.interval),
+        setTimeout(resolve, this.options.interval)
       );
       try {
         await this.vuuAuth.login();
@@ -62,11 +64,12 @@ export class RetryGenerator {
       }
       this.options.next();
     } while (!connected && this.options.interval !== -1);
-    if (connected) {
-      return;
-    } else {
+
+    if (!connected) {
       yield "connection-failed";
     }
+
+    return;
   }
 }
 
@@ -75,12 +78,15 @@ export class LostConnectionHandler {
     private vuuAuth: VuuAuthenticator,
     private retryIntervals = defaultRetryIntervals,
   ) {}
-  async reconnect() {
+  async reconnect(): Promise<"connected" | "connection-failed"> {
     for await (const result of new RetryGenerator(
       this.vuuAuth,
-      RetryOptions(this.retryIntervals),
+      RetryOptions(this.retryIntervals)
     )) {
       console.log(`  ... async iterator result = ${result}`);
+      return result;
     }
+
+    return "connection-failed";
   }
 }

vuu-ui/sample-apps/app-vuu-example/index.tsx

@@ -13,6 +13,9 @@ import { App } from "./src/App";
 import "@vuu-ui/vuu-icons/index.css";
 import "@vuu-ui/vuu-theme/index.css";
 
+const CONNECTION_FAILED = 'connection-failed';
+const isConnectionFailedMessage = (err) => typeof err === "string" && err.includes(CONNECTION_FAILED);
+
 const { websocketUrl } = await vuuConfig;
 
 const vuuAuth = new VuuAuthenticator({
@@ -26,7 +29,11 @@ const lostConnectionHandler = new LostConnectionHandler(vuuAuth);
 const onConnectionStatusChange = (connectionStatus: ConnectionStatus) => {
   if (connectionStatus === "disconnected") {
     // do we care about the reason ?
-    lostConnectionHandler.reconnect();
+    lostConnectionHandler.reconnect().then(status => {
+      if (status === CONNECTION_FAILED) {
+        throw new Error(status);
+      }
+    });
   }
 };
 
@@ -40,7 +47,7 @@ try {
   const root = createRoot(container);
   root.render(<App logout={vuuAuth.logout} user={{ username: userName }} />);
 } catch (err: unknown) {
-  if (isLoginErrorMessage(err)) {
+  if (isLoginErrorMessage(err) || isConnectionFailedMessage(err)) {
     const root = createRoot(container);
     root.render(<div>{`${err}`}</div>);
   } else {