From 72cc44641b5914164f727cef54298d8e2b1f3719 Mon Sep 17 00:00:00 2001
From: Shaun Walker <shaun.walker@siliqon.com>
Date: Sat, 24 Sep 2022 08:37:18 -0400
Subject: [PATCH] Add Blazor Server reconnect script, fix event log direct link
 from notification email, add more validation to Pager, improve browser
 refresh script to wait for server availability

---
 Oqtane.Client/Modules/Admin/Logs/Index.razor |  2 +-
 Oqtane.Client/Modules/Controls/Pager.razor   |  1 +
 Oqtane.Server/Pages/_Host.cshtml             |  1 +
 Oqtane.Server/Pages/_Host.cshtml.cs          | 91 +++++++++++++-------
 Oqtane.Server/wwwroot/js/interop.js          | 13 ++-
 5 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/Oqtane.Client/Modules/Admin/Logs/Index.razor b/Oqtane.Client/Modules/Admin/Logs/Index.razor
index afd95fdb..d763a5de 100644
--- a/Oqtane.Client/Modules/Admin/Logs/Index.razor
+++ b/Oqtane.Client/Modules/Admin/Logs/Index.razor
@@ -109,7 +109,7 @@ else
 			// external link to log item will display Details component
 			if (PageState.QueryString.ContainsKey("id") && int.TryParse(PageState.QueryString["id"], out int id))
 			{
-				NavigationManager.NavigateTo(EditUrl(PageState.Page.Path, ModuleState.ModuleId, "Detail", $"id={id}"));
+				NavigationManager.NavigateTo(EditUrl(PageState.Page.Path, ModuleState.ModuleId, "Detail", $"/{id}"));
 			}
 
 			if (UrlParameters.ContainsKey("level"))
diff --git a/Oqtane.Client/Modules/Controls/Pager.razor b/Oqtane.Client/Modules/Controls/Pager.razor
index e317f38b..068e0d55 100644
--- a/Oqtane.Client/Modules/Controls/Pager.razor
+++ b/Oqtane.Client/Modules/Controls/Pager.razor
@@ -293,6 +293,7 @@
         {
             _page = 1;
         }
+		if (_page < 1) _page = 1;
 
         _startPage = 0;
         _endPage = 0;
diff --git a/Oqtane.Server/Pages/_Host.cshtml b/Oqtane.Server/Pages/_Host.cshtml
index e8de6ad5..21518a22 100644
--- a/Oqtane.Server/Pages/_Host.cshtml
+++ b/Oqtane.Server/Pages/_Host.cshtml
@@ -49,6 +49,7 @@
 		@if (Model.Runtime == "Server")
 		{
 			<script src="_framework/blazor.server.js"></script>
+			@Html.Raw(Model.ReconnectScript)
 		}
 		@if (!string.IsNullOrEmpty(Model.PWAScript))
 		{
diff --git a/Oqtane.Server/Pages/_Host.cshtml.cs b/Oqtane.Server/Pages/_Host.cshtml.cs
index c0b64609..8ae0696f 100644
--- a/Oqtane.Server/Pages/_Host.cshtml.cs
+++ b/Oqtane.Server/Pages/_Host.cshtml.cs
@@ -69,6 +69,7 @@ namespace Oqtane.Pages
         public string Meta = "";
         public string FavIcon = "favicon.ico";
         public string PWAScript = "";
+        public string ReconnectScript = "";
         public string Message = "";
 
         public IActionResult OnGet()
@@ -128,6 +129,10 @@ namespace Oqtane.Pages
                         {
                             FavIcon = Utilities.FileUrl(alias, site.FaviconFileId.Value);
                         }
+                        if (Runtime == "Server")
+                        {
+                            ReconnectScript = CreateReconnectScript();
+                        }
                         if (site.PwaIsEnabled && site.PwaAppIconFileId != null && site.PwaSplashIconFileId != null)
                         {
                             PWAScript = CreatePWAScript(alias, site, route);
@@ -374,40 +379,60 @@ namespace Oqtane.Pages
         private string CreatePWAScript(Alias alias, Site site, Route route)
         {
             return
-            "<script id=\"app-pwa\">" +
-                "setTimeout(() => { " +
-                    "var manifest = { " +
-                        "\"name\": \"" + site.Name + "\", " +
-                        "\"short_name\": \"" + site.Name + "\", " +
-                        "\"start_url\": \"" + route.SiteUrl + "/\", " +
-                        "\"display\": \"standalone\", " +
-                        "\"background_color\": \"#fff\", " +
-                        "\"description\": \"" + site.Name + "\", " +
-                        "\"icons\": [{ " +
-                            "\"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaAppIconFileId.Value) + "\", " +
-                            "\"sizes\": \"192x192\", " +
-                            "\"type\": \"image/png\" " +
-                            "}, { " +
-                            "\"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaSplashIconFileId.Value) + "\", " +
-                            "\"sizes\": \"512x512\", " +
-                            "\"type\": \"image/png\" " +
-                        "}] " +
-                    "}; " +
-                    "const serialized = JSON.stringify(manifest); " +
-                    "const blob = new Blob([serialized], {type: 'application/javascript'}); " +
-                    "const url = URL.createObjectURL(blob); " +
-                    "document.getElementById('app-manifest').setAttribute('href', url); " +
-                "} " +
-                ", 1000);" +
+            "<script>" + Environment.NewLine +
+            "    // PWA Manifest" + Environment.NewLine +
+            "    setTimeout(() => {" + Environment.NewLine +
+            "        var manifest = {" + Environment.NewLine +
+            "            \"name\": \"" + site.Name + "\"," + Environment.NewLine +
+            "            \"short_name\": \"" + site.Name + "\"," + Environment.NewLine +
+            "            \"start_url\": \"" + route.SiteUrl + "/\"," + Environment.NewLine +
+            "            \"display\": \"standalone\"," + Environment.NewLine +
+            "            \"background_color\": \"#fff\"," + Environment.NewLine +
+            "            \"description\": \"" + site.Name + "\"," + Environment.NewLine +
+            "            \"icons\": [{" + Environment.NewLine +
+            "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaAppIconFileId.Value) + "\"," + Environment.NewLine +
+            "                \"sizes\": \"192x192\"," + Environment.NewLine +
+            "                \"type\": \"image/png\"" + Environment.NewLine +
+            "                }, {" + Environment.NewLine +
+            "                \"src\": \"" + route.RootUrl + Utilities.FileUrl(alias, site.PwaSplashIconFileId.Value) + "\"," + Environment.NewLine +
+            "                \"sizes\": \"512x512\"," + Environment.NewLine +
+            "                \"type\": \"image/png\"" + Environment.NewLine +
+            "            }]" + Environment.NewLine +
+            "       };" + Environment.NewLine +
+            "       const serialized = JSON.stringify(manifest);" + Environment.NewLine +
+            "       const blob = new Blob([serialized], {type: 'application/javascript'});" + Environment.NewLine +
+            "       const url = URL.createObjectURL(blob);" + Environment.NewLine +
+            "       document.getElementById('app-manifest').setAttribute('href', url);" + Environment.NewLine +
+            "    }, 1000);" + Environment.NewLine +
             "</script>" + Environment.NewLine +
-            "<script id=\"app-serviceworker\">" +
-                "if ('serviceWorker' in navigator) { " +
-                    "navigator.serviceWorker.register('/service-worker.js').then(function(registration) { " +
-                        "console.log('ServiceWorker Registration Successful'); " +
-                    "}).catch (function(err) { " +
-                        "console.log('ServiceWorker Registration Failed ', err); " +
-                    "}); " +
-                "};" +
+            "<script>" + Environment.NewLine +
+            "    // PWA Service Worker" + Environment.NewLine +
+            "    if ('serviceWorker' in navigator) {" + Environment.NewLine +
+            "        navigator.serviceWorker.register('/service-worker.js').then(function(registration) {" + Environment.NewLine +
+            "            console.log('ServiceWorker Registration Successful');" + Environment.NewLine +
+            "        }).catch (function(err) {" + Environment.NewLine +
+            "            console.log('ServiceWorker Registration Failed ', err);" + Environment.NewLine +
+            "        });" + Environment.NewLine +
+            "    };" + Environment.NewLine +
+            "</script>";
+        }
+
+        private string CreateReconnectScript()
+        {
+            return
+            "<script>" + Environment.NewLine +
+            "    // Blazor Server Reconnect" + Environment.NewLine +
+            "    new MutationObserver((mutations, observer) => {" + Environment.NewLine +
+            "        if (document.querySelector('#components-reconnect-modal h5 a')) {" + Environment.NewLine +
+            "            async function attemptReload() {" + Environment.NewLine +
+            "                await fetch('');" + Environment.NewLine +
+            "                location.reload();" + Environment.NewLine +
+            "            }" + Environment.NewLine +
+            "            observer.disconnect();" + Environment.NewLine +
+            "            attemptReload();" + Environment.NewLine +
+            "            setInterval(attemptReload, 5000);" + Environment.NewLine +
+            "        }" + Environment.NewLine +
+            "    }).observe(document.body, { childList: true, subtree: true });" + Environment.NewLine +
             "</script>";
         }
 
diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js
index 8a677952..90c2bda4 100644
--- a/Oqtane.Server/wwwroot/js/interop.js
+++ b/Oqtane.Server/wwwroot/js/interop.js
@@ -356,10 +356,15 @@ Oqtane.Interop = {
             }
         }
     },
-    refreshBrowser: function (reload, wait) {
-        setInterval(function () {
-            window.location.reload(reload);
-        }, wait * 1000);
+    refreshBrowser: function (verify, wait) {
+        async function attemptReload (verify) {
+            if (verify) {
+                await fetch('');
+            }
+            window.location.reload();
+        }
+        attemptReload(verify);
+        setInterval(attemptReload, wait * 1000);
     },
     redirectBrowser: function (url, wait) {
         setInterval(function () {