#264 - Nice UI when signalr connection with the server fails.

src/Money.UI.Blazor/App.razor

@@ -6,16 +6,18 @@
         <Found Context="routeData">
             <Network>
                 <Online>
-                    <VersionSupport>
-                        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout)">
-                            <NotAuthorized>
-                                <Login />
-                            </NotAuthorized>
-                            <Authorizing>
-                                <AuthorizationProgress />
-                            </Authorizing>
-                        </AuthorizeRouteView>
-                    </VersionSupport>
+                    <VersionChecker>
+                        <ApiHubConnectionChecker>
+                            <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(Layout)">
+                                <NotAuthorized>
+                                    <Login />
+                                </NotAuthorized>
+                                <Authorizing>
+                                    <AuthorizationProgress />
+                                </Authorizing>
+                            </AuthorizeRouteView>
+                        </ApiHubConnectionChecker>
+                    </VersionChecker>
                 </Online>
                 <Offline>
                     <LayoutView Layout="@typeof(Layout)">

src/Money.UI.Blazor/Money.UI.Blazor.csproj

@@ -46,4 +46,14 @@
     <Watch Include="**\*.razor" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Watch Remove="Pages\VersionChecker.razor" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Compile Update="Pages\VersionChecker.razor.cs">
+      <DependentUpon>VersionChecker.razor</DependentUpon>
+    </Compile>
+  </ItemGroup>
+
 </Project>

src/Money.UI.Blazor/Pages/ApiHubConnectionChecker.razor

@@ -0,0 +1,27 @@
+@if (State.IsError)
+{
+    <LayoutView Layout="@typeof(Layouts.Layout)">
+        <Title Icon="exclamation-circle"
+               Main="Network error"
+               Sub="Background server connection failed"
+               ButtonIcon="sync-alt"
+               ButtonText="Reload the page"
+               ButtonClick="@(async () => await ReloadAsync())" />
+
+        <p>
+            We have troubles with background connection to the server. The application can't work corrently.
+        </p>
+        <p>
+            Reload the page (or application) and this problem may disappear.
+            <br />
+            Otherwise, we will be glad if you <a target="_blank" href="@Navigator.UrlMoneyProjectIssueNew("Background connection error")">report the problem</a>.
+        </p>
+        <p>
+            <strong>We are sorry for this inconvenience.</strong>
+        </p>
+    </LayoutView>
+}
+else
+{
+    @ChildContent
+}

src/Money.UI.Blazor/Pages/ApiHubConnectionChecker.razor.cs

@@ -0,0 +1,35 @@
+using Microsoft.AspNetCore.Components;
+using Money.Services;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Pages
+{
+    public partial class ApiHubConnectionChecker : IDisposable
+    {
+        [Inject]
+        public IApiHubState State { get; set; }
+
+        [Inject]
+        public Navigator Navigator { get; set; }
+
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+            State.Changed += StateHasChanged;
+        }
+
+        protected Task ReloadAsync()
+            => Navigator.ReloadAsync();
+
+        public void Dispose()
+            => State.Changed -= StateHasChanged;
+    }
+}

src/Money.UI.Blazor/Pages/VersionSupport.razor.cs → src/Money.UI.Blazor/Pages/VersionChecker.razor.cs

@@ -12,7 +12,7 @@
 
 namespace Money.Pages
 {
-    public partial class VersionSupport : IExceptionHandler<NotSupportedApiVersionException>
+    public partial class VersionChecker : IExceptionHandler<NotSupportedApiVersionException>
     {
         [Inject]
         public ExceptionHandlerBuilder ExceptionHandlerBuilder { get; set; }
@@ -21,7 +21,7 @@ public partial class VersionSupport : IExceptionHandler<NotSupportedApiVersionEx
         public Navigator Navigator { get; set; }
 
         [Inject]
-        public ILog<VersionSupport> Log { get; set; }
+        public ILog<VersionChecker> Log { get; set; }
 
         [Parameter]
         public RenderFragment ChildContent { get; set; }
@@ -38,7 +38,7 @@ protected override void OnInitialized()
             base.OnInitialized();
 
             ExceptionHandlerBuilder.Handler<NotSupportedApiVersionException>(this);
-            ClientVersion = typeof(VersionSupport).Assembly.GetName().Version;
+            ClientVersion = typeof(VersionChecker).Assembly.GetName().Version;
             NewIssueTitle = $"Client '{Converts.To<Version, string>(ClientVersion)}' is too old";
         }
 

src/Money.UI.Blazor/Program.cs

@@ -54,6 +54,7 @@ private static void ConfigureServices(IServiceCollection services)
                 .AddTransient<ApiTokenValidator>()
                 .AddSingleton<SignalRListener>()
                 .AddSingleton<ApiHubService>()
+                .AddTransient<IApiHubState>(provider => provider.GetRequiredService<ApiHubService>())
                 .AddSingleton<ApiVersionChecker>()
                 .AddTransient<Interop>()
                 .AddSingleton<PwaInstallInterop>()

src/Money.UI.Blazor/Services/ApiHubService.cs

@@ -13,7 +13,7 @@
 
 namespace Money.Services
 {
-    public class ApiHubService
+    public class ApiHubService : IApiHubState
     {
         private readonly BrowserEventDispatcher events;
         private readonly BrowserExceptionHandler exceptions;
@@ -23,7 +23,9 @@ public class ApiHubService
         private readonly ILog log;
         private HubConnection connection;
 
-        public bool IsStarted { get; private set; }
+        public bool IsActive { get; private set; }
+        public bool IsError { get; private set; }
+        public event Action Changed;
 
         public ApiHubService(BrowserEventDispatcher events, BrowserExceptionHandler exceptions, Navigator navigator, IOptions<ApiClientConfiguration> apiConfiguration, TokenContainer token, ILogFactory logFactory)
         {
@@ -69,22 +71,22 @@ public async Task StartAsync()
 
             await connection.StartAsync();
 
-            IsStarted = true;
+            ChangeState(true);
         }
 
-        private async Task OnConnectionClosed(Exception e)
+        private Task OnConnectionClosed(Exception e)
         {
             log.Debug("Connection closed.");
 
+            bool isError = false;
             if (e != null)
+            {
                 log.Fatal($"Connection error {Environment.NewLine}{e.ToString()}");
+                isError = true;
+            }
 
-#if !DEBUG
-                await navigator.AlertAsync("Underlaying connection to the server has closed. Reloading the page...");
-#endif
-
-            await Task.Delay(2000);
-            await navigator.ReloadAsync();
+            ChangeState(false, isError);
+            return Task.CompletedTask;
         }
 
         public async Task StopAsync()
@@ -98,6 +100,18 @@ public async Task StopAsync()
                 await connection.DisposeAsync();
                 connection = null;
             }
+
+            ChangeState(false);
+        }
+
+        private void ChangeState(bool isActive, bool isError = false)
+        {
+            IsActive = isActive;
+
+            if (isError)
+                IsError = true;
+
+            Changed?.Invoke();
         }
     }
 }

src/Money.UI.Blazor/Services/IApiHubState.cs

@@ -0,0 +1,17 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Money.Services
+{
+    public interface IApiHubState
+    {
+        bool IsActive { get; }
+        bool IsError { get; }
+
+        event Action Changed;
+    }
+}