Dispatch reconnection state change events in UserSpecifiedDisplay

Author: oroztocil

src/Components/Web.JS/src/Platform/Circuits/ReconnectStateChangedEvent.ts

@@ -0,0 +1,6 @@
+
+export interface ReconnectStateChangedEvent {
+  state: "show" | "hide" | "retrying" | "failed" | "rejected";
+  currentAttempt?: number;
+  secondsToNextAttempt?: number;
+}

src/Components/Web.JS/src/Platform/Circuits/UserSpecifiedDisplay.ts

@@ -2,6 +2,8 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { ReconnectDisplay } from './ReconnectDisplay';
+import { ReconnectStateChangedEvent } from './ReconnectStateChangedEvent';
+
 export class UserSpecifiedDisplay implements ReconnectDisplay {
   static readonly ShowClassName = 'components-reconnect-show';
 
@@ -19,6 +21,8 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
 
   static readonly SecondsToNextAttemptId = 'components-seconds-to-next-attempt';
 
+  static readonly ReconnectStateChangedEventName = 'components-reconnect-state-changed';
+
   constructor(private dialog: HTMLElement, private readonly document: Document, maxRetries?: number) {
     this.document = document;
 
@@ -34,10 +38,7 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
   show(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.ShowClassName);
-
-    if ((this.dialog as HTMLDialogElement).showModal) {
-      (this.dialog as HTMLDialogElement).showModal();
-    }
+    this.dispatchReconnectStateChangedEvent({ state: 'show' });
   }
 
   update(currentAttempt: number, secondsToNextAttempt: number): void {
@@ -56,25 +57,26 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
     if (currentAttempt > 1 && secondsToNextAttempt > 0) {
       this.dialog.classList.add(UserSpecifiedDisplay.RetryingClassName);
     }
+
+    this.dispatchReconnectStateChangedEvent({ state: 'retrying', currentAttempt, secondsToNextAttempt });
   }
 
   hide(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.HideClassName);
-
-    if ((this.dialog as HTMLDialogElement).close) {
-      (this.dialog as HTMLDialogElement).close();
-    }
+    this.dispatchReconnectStateChangedEvent({ state: 'hide' });
   }
 
   failed(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.FailedClassName);
+    this.dispatchReconnectStateChangedEvent({ state: 'failed' });
   }
 
   rejected(): void {
     this.removeClasses();
     this.dialog.classList.add(UserSpecifiedDisplay.RejectedClassName);
+    this.dispatchReconnectStateChangedEvent({ state: 'rejected' });
   }
 
   private removeClasses() {
@@ -85,4 +87,9 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
       UserSpecifiedDisplay.FailedClassName,
       UserSpecifiedDisplay.RejectedClassName);
   }
+
+  private dispatchReconnectStateChangedEvent(eventData: ReconnectStateChangedEvent) {
+    const event = new CustomEvent(UserSpecifiedDisplay.ReconnectStateChangedEventName, { detail: eventData });
+    this.dialog.dispatchEvent(event);
+  }
 }

src/Components/test/testassets/BasicTestApp/Reconnection/ReconnectionComponent.razor

@@ -35,6 +35,19 @@
     <dialog id="components-reconnect-modal">
         Rejoining the server...
     </dialog>
+
+    <script>
+        const reconnectModal = document.getElementById("components-reconnect-modal");
+        reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
+
+        function handleReconnectStateChanged(event) {
+            if (event.detail.state === "show") {
+                reconnectModal.showModal();
+            } else if (event.detail.state === "hide") {
+                reconnectModal.close();
+            }
+        }
+    </script>
 }
 
 @code {

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.css

@@ -1,4 +1,4 @@
-.components-reconnect-first-attempt-s,
+.components-reconnect-first-attempt-visible,
 .components-reconnect-repeated-attempt-visible,
 .components-reconnect-failed-visible,
 .components-rejoining-animation {

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/ReconnectModal.razor.js

@@ -1,30 +1,42 @@
 // Set up event handlers
+const reconnectModal = document.getElementById("components-reconnect-modal");
+reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
+
 const retryButton = document.getElementById("components-reconnect-button");
+retryButton.addEventListener("click", retry);
 
-retryButton.addEventListener('click', retry);
+function handleReconnectStateChanged(event) {
+    if (event.detail.state === "show") {
+        reconnectModal.showModal();
+    } else if (event.detail.state === "hide") {
+        reconnectModal.close();
+    } else if (event.detail.state === "failed") {
+        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
+    }
+}
 
 async function retry() {
-    document.removeEventListener('visibilitychange', retryWhenDocumentBecomesVisible);
+    document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
 
     try {
         // Reconnect will asynchronously return:
         // - true to mean success
         // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
-        // - exception to mean we didn't reach the server (this can be sync or async)
+        // - exception to mean we didn"t reach the server (this can be sync or async)
         const successful = await Blazor.reconnect();
         if (!successful) {
             // We have been able to reach the server, but the circuit is no longer available.
-            // We'll reload the page so the user can continue using the app as quickly as possible.
+            // We"ll reload the page so the user can continue using the app as quickly as possible.
             location.reload();
         }
     } catch (err) {
         // We got an exception, server is currently unavailable
-        document.addEventListener('visibilitychange', retryWhenDocumentBecomesVisible);
+        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
     }
 }
 
 async function retryWhenDocumentBecomesVisible() {
-    if (document.visibilityState === 'visible') {
+    if (document.visibilityState === "visible") {
         await retry();
     }
 }