Simplified navigation logic

Author: linkdotnet

LinkDotNet.Blog.IntegrationTests/Web/Pages/IndexTests.cs

@@ -8,7 +8,6 @@
 using LinkDotNet.Blog.Web;
 using LinkDotNet.Blog.Web.Shared;
 using LinkDotNet.Blog.Web.Shared.Services;
-using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.DependencyInjection;
 using Moq;
 using Toolbelt.Blazor.HeadElement;
@@ -74,39 +73,6 @@ public async Task ShouldOnlyLoadTenEntities()
             blogPosts.Count.Should().Be(10);
         }
 
-        [Fact]
-        public async Task ShouldGoToNextPageOnNextClick()
-        {
-            await CreatePublishedBlogPosts(11);
-            using var ctx = new TestContext();
-            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
-            RegisterComponents(ctx);
-            var cut = ctx.RenderComponent<Index>();
-
-            cut.FindComponent<BlogPostNavigation>().Find("li:last-child a").Click();
-
-            var navigationManager = ctx.Services.GetService<NavigationManager>();
-            cut.WaitForState(() => navigationManager.Uri.Contains("/2"));
-            navigationManager.Uri.Should().Contain("/2");
-        }
-
-        [Fact]
-        public async Task ShouldGoToPreviousPageOnPreviousClick()
-        {
-            await CreatePublishedBlogPosts(11);
-            using var ctx = new TestContext();
-            ctx.JSInterop.Mode = JSRuntimeMode.Loose;
-            RegisterComponents(ctx);
-            var cut = ctx.RenderComponent<Index>(
-                p => p.Add(s => s.Page, 2));
-
-            cut.FindComponent<BlogPostNavigation>().Find("li:first-child a").Click();
-
-            var navigationManager = ctx.Services.GetService<NavigationManager>();
-            cut.WaitForState(() => navigationManager.Uri.Contains("/1"));
-            navigationManager.Uri.Should().Contain("/1");
-        }
-
         [Fact]
         public async Task ShouldLoadOnlyItemsInPage()
         {

LinkDotNet.Blog.UnitTests/Web/Shared/BlogPostNavigationTests.cs

@@ -1,4 +1,6 @@
-using Bunit;
+using System.Linq;
+using AngleSharp.Html.Dom;
+using Bunit;
 using FluentAssertions;
 using LinkDotNet.Blog.Domain;
 using LinkDotNet.Blog.Web.Shared;
@@ -13,35 +15,31 @@ public class BlogPostNavigationTests : TestContext
         [Fact]
         public void ShouldFireEventWhenGoingToNextPage()
         {
-            var actualNewPage = 0;
             var page = CreatePagedList(2, 3);
-            var cut = RenderComponent<BlogPostNavigation>(p => p.Add(param => param.CurrentPage, page.Object)
-                .Add(param => param.OnPageChanged, newPage => actualNewPage = newPage));
 
-            cut.Find("li:last-child a").Click();
+            var cut = RenderComponent<BlogPostNavigation>(p =>
+                p.Add(param => param.PageList, page.Object));
 
-            actualNewPage.Should().Be(3);
+            cut.FindAll("a").Cast<IHtmlAnchorElement>().Last().Href.Should().EndWith("/3");
         }
 
         [Fact]
         public void ShouldFireEventWhenGoingToPreviousPage()
         {
-            var actualNewPage = 0;
             var page = CreatePagedList(2, 3);
-            var cut = RenderComponent<BlogPostNavigation>(p => p.Add(param => param.CurrentPage, page.Object)
-                .Add(param => param.OnPageChanged, newPage => actualNewPage = newPage));
 
-            cut.Find("li:first-child a").Click();
+            var cut = RenderComponent<BlogPostNavigation>(p =>
+                p.Add(param => param.PageList, page.Object));
 
-            actualNewPage.Should().Be(1);
+            cut.FindAll("a").Cast<IHtmlAnchorElement>().First().Href.Should().EndWith("/1");
         }
 
         [Fact]
         public void ShouldNotFireNextWhenOnLastPage()
         {
             var page = CreatePagedList(2, 2);
             var cut = RenderComponent<BlogPostNavigation>(p =>
-                p.Add(param => param.CurrentPage, page.Object));
+                p.Add(param => param.PageList, page.Object));
 
             cut.Find("li:last-child").ClassList.Should().Contain("disabled");
         }
@@ -51,7 +49,7 @@ public void ShouldNotFireNextWhenOnFirstPage()
         {
             var page = CreatePagedList(1, 2);
             var cut = RenderComponent<BlogPostNavigation>(p =>
-                p.Add(param => param.CurrentPage, page.Object));
+                p.Add(param => param.PageList, page.Object));
 
             cut.Find("li:first-child").ClassList.Should().Contain("disabled");
         }
@@ -61,7 +59,7 @@ public void ShouldNotFireNextWhenNoPage()
         {
             var page = CreatePagedList(0, 0);
             var cut = RenderComponent<BlogPostNavigation>(p =>
-                p.Add(param => param.CurrentPage, page.Object));
+                p.Add(param => param.PageList, page.Object));
 
             cut.Find("li:first-child").ClassList.Should().Contain("disabled");
             cut.Find("li:last-child").ClassList.Should().Contain("disabled");

LinkDotNet.Blog.Web/Pages/Index.razor

@@ -28,7 +28,7 @@
             <ShortBlogPost BlogPost="context" UseAlternativeStyle="@(currentLine++ % 2 != 0)"></ShortBlogPost>
         </Virtualize>
     </div>
-    <BlogPostNavigation CurrentPage="@currentPage" OnPageChanged="@SetPageNumber"></BlogPostNavigation>
+    <BlogPostNavigation PageList="@currentPage"></BlogPostNavigation>
 </section>
 
 @code {
@@ -56,9 +56,4 @@
             await userRecordService.StoreUserRecordAsync();
         }
     }
-
-    private void SetPageNumber(int newPage)
-    {
-        navigationManager.NavigateTo($"/{newPage}");
-    }
 }

LinkDotNet.Blog.Web/Shared/BlogPostNavigation.razor

@@ -2,36 +2,17 @@
 @using LinkDotNet.Blog.Domain
     <nav aria-label="Page navigation">
         <ul class="pagination justify-content-center">
-            <li class="page-item @(!CurrentPage.IsFirstPage && CurrentPage.Count > 0 ? string.Empty : "disabled")">
-                <a class="page-link" href="" tabindex="-1" @onclick="PreviousPage">Previous</a>
+            <li class="page-item @(!PageList.IsFirstPage && PageList.Count > 0 ? string.Empty : "disabled")">
+                <a class="page-link" href="/@(PageList.PageNumber - 1)" tabindex="-1">Previous</a>
             </li>
-            <li class="page-item @(!CurrentPage.IsLastPage && CurrentPage.Count > 0 ? string.Empty : "disabled")">
+            <li class="page-item @(!PageList.IsLastPage && PageList.Count > 0 ? string.Empty : "disabled")">
                 <a class="page-link"
-                   @onclick="NextPage"
-                   href="">Next</a>
+                   href="/@(PageList.PageNumber + 1)">Next</a>
             </li>
         </ul>
     </nav>
 
     @code {
         [Parameter]
-        public IPagedList<BlogPost> CurrentPage { get; set; }
-        
-        [Parameter]
-        public EventCallback<int> OnPageChanged { get; set; }
-
-        private async Task PageHasChanged(int newPage)
-        {
-            await OnPageChanged.InvokeAsync(newPage);
-        }
-
-        private async Task PreviousPage()
-        {
-            await PageHasChanged(CurrentPage.PageNumber - 1);
-        }
-        
-        private async Task NextPage()
-        {
-            await PageHasChanged(CurrentPage.PageNumber + 1);
-        }
+        public IPagedList<BlogPost> PageList { get; set; }
     }