feat: prevent navigation if blogpost is dirty

Author: linkdotnet

.DS_Store

@@ -75,6 +75,7 @@
 </div>
 <FeatureInfoDialog @ref="FeatureDialog"></FeatureInfoDialog>
 
+<NavigationLock ConfirmExternalNavigation="@model.IsDirty" OnBeforeInternalNavigation="PreventNavigationWhenDirty"></NavigationLock>
 @code {
     [Parameter]
     public BlogPost BlogPost { get; set; }
@@ -120,4 +121,10 @@
     {
         model.Content = content;
     }
+
+    private void PreventNavigationWhenDirty(LocationChangingContext context)
+    {
+        if (model.IsDirty)
+            context.PreventNavigation();
+    }
 }

src/.DS_Store

@@ -7,57 +7,130 @@ namespace LinkDotNet.Blog.Web.Features.Admin.BlogPostEditor.Components;
 
 public class CreateNewModel
 {
-    public string Id { get; set; }
+    private DateTime originalUpdatedDate;
+    private string id;
+    private string title;
+    private string shortDescription;
+    private string content;
+    private string previewImageUrl;
+    private bool isPublished = true;
+    private bool shouldUpdateDate;
+    private string tags;
+    private string previewImageUrlFallback;
 
     [Required]
-    public string Title { get; set; }
+    public string Title
+    {
+        get => title;
+        set
+        {
+            title = value;
+            IsDirty = true;
+        }
+    }
 
     [Required]
-    public string ShortDescription { get; set; }
+    public string ShortDescription
+    {
+        get => shortDescription;
+        set
+        {
+            shortDescription = value;
+            IsDirty = true;
+        }
+    }
 
     [Required]
-    public string Content { get; set; }
+    public string Content
+    {
+        get => content;
+        set
+        {
+            content = value;
+            IsDirty = true;
+        }
+    }
 
     [Required]
-    public string PreviewImageUrl { get; set; }
+    public string PreviewImageUrl
+    {
+        get => previewImageUrl;
+        set
+        {
+            previewImageUrl = value;
+            IsDirty = true;
+        }
+    }
 
     [Required]
-    public bool IsPublished { get; set; } = true;
+    public bool IsPublished
+    {
+        get => isPublished;
+        set
+        {
+            isPublished = value;
+            IsDirty = true;
+        }
+    }
 
     [Required]
-    public bool ShouldUpdateDate { get; set; } = false;
+    public bool ShouldUpdateDate
+    {
+        get => shouldUpdateDate;
+        set
+        {
+            shouldUpdateDate = value;
+            IsDirty = true;
+        }
+    }
 
-    public string Tags { get; set; }
+    public string Tags
+    {
+        get => tags;
+        set
+        {
+            tags = value;
+            IsDirty = true;
+        }
+    }
 
-    public DateTime OriginalUpdatedDate { get; set; }
+    public string PreviewImageUrlFallback
+    {
+        get => previewImageUrlFallback;
+        set
+        {
+            previewImageUrlFallback = value;
+            IsDirty = true;
+        }
+    }
 
-    public string PreviewImageUrlFallback { get; set; }
+    public bool IsDirty { get; private set; }
 
     public static CreateNewModel FromBlogPost(BlogPost blogPost)
     {
         return new CreateNewModel
         {
-            Id = blogPost.Id,
+            id = blogPost.Id,
             Content = blogPost.Content,
             Tags = blogPost.Tags != null ? string.Join(",", blogPost.Tags.Select(t => t.Content)) : null,
             Title = blogPost.Title,
             ShortDescription = blogPost.ShortDescription,
             IsPublished = blogPost.IsPublished,
             PreviewImageUrl = blogPost.PreviewImageUrl,
-            OriginalUpdatedDate = blogPost.UpdatedDate,
+            originalUpdatedDate = blogPost.UpdatedDate,
             PreviewImageUrlFallback = blogPost.PreviewImageUrlFallback,
         };
     }
 
     public BlogPost ToBlogPost()
     {
-        var tags = string.IsNullOrWhiteSpace(Tags) ? ArraySegment<string>.Empty : Tags.Split(",");
-        DateTime? updatedDate = ShouldUpdateDate || OriginalUpdatedDate == default
+        var tagList = string.IsNullOrWhiteSpace(Tags) ? ArraySegment<string>.Empty : Tags.Split(",");
+        DateTime? updatedDate = ShouldUpdateDate || originalUpdatedDate == default
             ? null
-            : OriginalUpdatedDate;
+            : originalUpdatedDate;
 
-        var blogPost = BlogPost.Create(Title, ShortDescription, Content, PreviewImageUrl, IsPublished, updatedDate, tags, PreviewImageUrlFallback);
-        blogPost.Id = Id;
+        var blogPost = BlogPost.Create(Title, ShortDescription, Content, PreviewImageUrl, IsPublished, updatedDate, tagList, PreviewImageUrlFallback);
+        blogPost.Id = id;
         return blogPost;
     }
 }

src/LinkDotNet.Blog.Web/.DS_Store

@@ -1,8 +1,11 @@
 using System;
 using System.Linq;
+using Bunit;
 using LinkDotNet.Blog.Domain;
 using LinkDotNet.Blog.TestUtilities;
 using LinkDotNet.Blog.Web.Features.Admin.BlogPostEditor.Components;
+using Microsoft.AspNetCore.Components.Routing;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace LinkDotNet.Blog.UnitTests.Web.Features.Admin.BlogPostEditor.Components;
 
@@ -165,4 +168,26 @@ public void ShouldAcceptInputWithoutLosingFocusOrEnter()
         blogPost.Tags.Should().HaveCount(3);
         blogPost.Tags.Select(t => t.Content).Should().Contain(new[] { "Tag1", "Tag2", "Tag3" });
     }
+
+    [Fact(Skip = "Need bUnit > 1.9.8")]
+    public void ShouldStopExternalNavigationWhenDirty()
+    {
+        var cut = RenderComponent<CreateNewBlogPost>();
+
+        cut.Find("#title").Change("Hey");
+
+        cut.FindComponent<NavigationLock>().Instance.ConfirmExternalNavigation.Should().BeTrue();
+    }
+
+    [Fact(Skip = "Need bUnit > 1.9.8")]
+    public void ShouldStopInternalNavigationWhenDirty()
+    {
+        var cut = RenderComponent<CreateNewBlogPost>();
+        cut.Find("#tags").Change("Hey");
+        var fakeNavigationManager = Services.GetRequiredService<FakeNavigationManager>();
+
+        fakeNavigationManager.NavigateTo("/internal");
+
+        fakeNavigationManager.History.Count.Should().Be(1);
+    }
 }