From c6c1c219f0cd70f1e10d10d0f1e54f6eabb23ec1 Mon Sep 17 00:00:00 2001
From: Jared Goodwin <translucency@outlook.com>
Date: Thu, 7 Mar 2024 09:43:48 -0800
Subject: [PATCH] Convert modals to using JS instead of C# for displaying.

---
 Server/Components/ModalHarness.razor    | 37 ++++++++++---------------
 Server/Components/ModalHarness.razor.js |  8 ++++++
 2 files changed, 22 insertions(+), 23 deletions(-)
 create mode 100644 Server/Components/ModalHarness.razor.js

diff --git a/Server/Components/ModalHarness.razor b/Server/Components/ModalHarness.razor
index ea599cd3a..5cf5909a2 100644
--- a/Server/Components/ModalHarness.razor
+++ b/Server/Components/ModalHarness.razor
@@ -1,12 +1,13 @@
 @inject IModalService ModalService
 @inject IJsInterop JsInterop
+@inject IJSRuntime JsRuntime
 
-<div class="modal fade @_showClass" style="display: @_displayStyle; background-color: rgba(0,0,0,0.35)" @onclick="CloseModal">
+<div @ref="_modalRef" id="defaultModal" class="modal fade" style="background-color: rgba(0,0,0,0.35)">
     <div class="modal-dialog modal-dialog-scrollable" role="document" @onclick:stopPropagation>
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">@ModalService.Title</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="alert" @onclick="CloseModal"></button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body" >
                 @if (ModalService.RenderBody is not null)
@@ -27,9 +28,9 @@
             <div class="modal-footer">
                 @foreach (var button in ModalService.Buttons)
                 {
-                    <button @key="button" type="button" class="@button.Class" @onclick="() => ExecuteButtonAction(button.OnClick)">@button.Text</button>
+                    <button @key="button" type="button" data-bs-dismiss="modal" class="@button.Class" @onclick="() => ExecuteButtonAction(button.OnClick)">@button.Text</button>
                 }
-                <button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="CloseModal">Close</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
@@ -39,36 +40,26 @@
     private string? _showClass;
     private string? _displayStyle;
 
-    protected override Task OnAfterRenderAsync(bool firstRender)
+    private IJSObjectReference? _module;
+    private ElementReference _modalRef;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
         {
+            _module = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./Components/ModalHarness.razor.js");
             ModalService.ModalShown += async (sender, args) =>
             {
-                _displayStyle = "block";
-                await InvokeAsync(StateHasChanged);
-                // The fade animation won't work without a delay here.
-                await Task.Delay(100);
-                _showClass = "show";
+                await _module.InvokeVoidAsync("showModal", _modalRef);
                 await InvokeAsync(StateHasChanged);
             };
         }
-        return base.OnAfterRenderAsync(firstRender);
-    }
-
-
-    private async Task CloseModal()
-    {
-        _showClass = null;
-        await InvokeAsync(StateHasChanged);
-        await Task.Delay(100);
-        _displayStyle = null;
-        await InvokeAsync(StateHasChanged);
+        await base.OnAfterRenderAsync(firstRender);
     }
 
-    private async Task ExecuteButtonAction(Action onclick)
+    private Task ExecuteButtonAction(Action onclick)
     {
         onclick.Invoke();
-        await CloseModal();
+        return Task.CompletedTask;
     }
 }
diff --git a/Server/Components/ModalHarness.razor.js b/Server/Components/ModalHarness.razor.js
new file mode 100644
index 000000000..f8a9a2aa3
--- /dev/null
+++ b/Server/Components/ModalHarness.razor.js
@@ -0,0 +1,8 @@
+/**
+ * 
+ * @param {HTMLElement} modal
+ */
+export function showModal(modal) {
+    const modalApi = new bootstrap.Modal(modal);
+    modalApi.show();
+}
\ No newline at end of file