Show toast errors and messages

Nodexr/Nodexr.csproj

@@ -21,6 +21,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.Modal" Version="4.1.0" />
+    <PackageReference Include="Blazored.Toast" Version="3.1.2" />
 
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" PrivateAssets="all" />

Nodexr/Program.cs

@@ -11,6 +11,8 @@
 using Nodexr.Shared.Services;
 using Blazored;
 using Blazored.Modal;
+using Blazored.Toast;
+using Blazored.Toast.Services;
 using Blazored.Modal.Services;
 
 namespace Nodexr
@@ -22,11 +24,12 @@ public static async Task Main(string[] args)
             var builder = WebAssemblyHostBuilder.CreateDefault(args);
             builder.RootComponents.Add<App>("app");
 
+            builder.Services.AddBlazoredToast();
             builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-            builder.Services.AddSingleton<INodeDragService, NodeDragService>();
-            builder.Services.AddSingleton<INoodleDragService, NoodleDragService>();
-            builder.Services.AddSingleton<INodeHandler, NodeHandler>();
-            builder.Services.AddSingleton<RegexReplaceHandler>();
+            builder.Services.AddScoped<INodeDragService, NodeDragService>();
+            builder.Services.AddScoped<INoodleDragService, NoodleDragService>();
+            builder.Services.AddScoped<INodeHandler, NodeHandler>();
+            builder.Services.AddScoped<RegexReplaceHandler>();
             builder.Services.AddBlazoredModal();
 
             await builder.Build().RunAsync();

Nodexr/Shared/Components/OutputDisplay.razor

@@ -2,6 +2,7 @@
 @inject IJSRuntime JSRuntime
 @inject IModalService ModalService
 @inject NavigationManager NavManager
+@inject IToastService ToastService
 @using Microsoft.AspNetCore.WebUtilities
 
 <h3 style="margin:6px 10px 7px 7px; display:inline-block;">Output:</h3>
@@ -44,11 +45,14 @@
     private async Task OnCreateLinkButtonClick()
     {
         string url = QueryHelpers.AddQueryString(NavManager.BaseUri, "parse", NodeHandler.CachedOutput.Expression);
-        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", url, "Link copied to clipboard");
+        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", url, "");
+        ToastService.ShowInfo("", "Link copied to clipboard");
     }
 
     private async Task CopyTextToClipboard()
     {
-        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", NodeHandler.CachedOutput.Expression, "Copied to clipboard");
+        string regex = NodeHandler.CachedOutput.Expression;
+        await JSRuntime.InvokeVoidAsync("clipboardCopy.copyText", regex, "");
+        ToastService.ShowInfo(regex, "Copied to clipboard");
     }
 }

Nodexr/Shared/MainLayout.razor

@@ -1,4 +1,5 @@
 @using Nodexr.Shared.NodeTypes;
+@using Blazored.Toast.Configuration;
 @inject RegexReplaceHandler RegexReplaceHandler;
 
 @inherits LayoutComponentBase
@@ -8,7 +9,9 @@
     @*<div class="top-row px-4">
         <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
     </div>*@
-    <BlazoredModal/>
+    <BlazoredModal />
+    <BlazoredToasts Position="ToastPosition.BottomRight"
+                    Timeout="10"/>
     <div class="content">
         @Body
     </div>

Nodexr/Shared/Services/NodeHandler.cs

@@ -8,6 +8,7 @@
 using Microsoft.AspNetCore.WebUtilities;
 using Nodexr.Shared.Nodes;
 using Nodexr.Shared.NodeInputs;
+using Blazored.Toast.Services;
 
 namespace Nodexr.Shared.Services
 {
@@ -53,10 +54,12 @@ private set
         public event EventHandler OnRequireNodeGraphRefresh;
 
         readonly NavigationManager navManager;
+        readonly IToastService toastService;
 
-        public NodeHandler(NavigationManager navManager)
+        public NodeHandler(NavigationManager navManager, IToastService toastService)
         {
             this.navManager = navManager;
+            this.toastService = toastService;
 
             var uri = navManager.ToAbsoluteUri(navManager.Uri);
             if (QueryHelpers.ParseQuery(uri.Query).TryGetValue("parse", out var parseString))
@@ -85,6 +88,7 @@ public bool TryCreateTreeFromRegex(string regex)
             }
             else
             {
+                toastService.ShowError(parseResult.Error.ToString(), "Couldn't parse input");
                 Console.WriteLine("Couldn't parse input: " + parseResult.Error);
                 return false;
             }

Nodexr/_Imports.razor

@@ -15,4 +15,6 @@
 @using Nodexr.Shared.Services
 @using Blazored
 @using Blazored.Modal
-@using Blazored.Modal.Services
+@using Blazored.Modal.Services
+@using Blazored.Toast
+@using Blazored.Toast.Services

Nodexr/wwwroot/css/toast-overrides.css

@@ -0,0 +1,7 @@
+.blazored-toast-body p {
+    white-space: pre-wrap !important;
+}
+
+.blazored-toast-body .blazored-toast-header h5 {
+    text-transform: none !important;
+}

Nodexr/wwwroot/index.html

@@ -10,9 +10,11 @@
     <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
     <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
+    <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="css/node.css" rel="stylesheet" />
     <link href="css/node-list.css" rel="stylesheet" />
+    <link href="css/toast-overrides.css" rel="stylesheet" />
     <link href="css/options-dropdown.css" rel="stylesheet" />
     <link href="css/splitjs.css" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:wght@400,500&display=swap" rel="stylesheet">

Nodexr/wwwroot/js/ClipboardCopy.js

@@ -4,7 +4,9 @@
 window.clipboardCopy = {
     copyText: function (text, message) {
         navigator.clipboard.writeText(text).then(function () {
-            alert(message);
+            if (!!message) {
+                alert(message);
+            }
         })
             .catch(function (error) {
                 alert(error);