Added Like option to blogpost

Author: linkdotnet

LinkDotNet.Blog.TestUtilities/BlogPostBuilder.cs

@@ -10,6 +10,7 @@ public class BlogPostBuilder
         private string url = "localhost";
         private bool isPublished = true;
         private string[] tags;
+        private int likes;
 
         public BlogPostBuilder WithTitle(string title)
         {
@@ -47,9 +48,17 @@ public BlogPostBuilder IsPublished(bool isPublished = true)
             return this;
         }
 
+        public BlogPostBuilder WithLikes(int likes)
+        {
+            this.likes = likes;
+            return this;
+        }
+
         public BlogPost Build()
         {
-            return BlogPost.Create(title, shortDescription, content, url, isPublished, tags);
+            var blogPost = BlogPost.Create(title, shortDescription, content, url, isPublished, tags);
+            blogPost.Likes = likes;
+            return blogPost;
         }
     }
 }

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

@@ -0,0 +1,30 @@
+using Blazored.LocalStorage;
+using Bunit;
+using FluentAssertions;
+using LinkDotNet.Blog.TestUtilities;
+using LinkDotNet.Blog.Web.Shared;
+using Microsoft.Extensions.DependencyInjection;
+using Moq;
+using Xunit;
+
+namespace LinkDotNet.Blog.UnitTests.Web.Shared
+{
+    public class LikeTests : TestContext
+    {
+        [Theory]
+        [InlineData(0, "0 Likes")]
+        [InlineData(1, "1 Like")]
+        [InlineData(2, "2 Likes")]
+        public void ShouldDisplayLikes(int likes, string expectedText)
+        {
+            Services.AddScoped(_ => new Mock<ILocalStorageService>().Object);
+            var blogPost = new BlogPostBuilder().WithLikes(likes).Build();
+            var cut = RenderComponent<Like>(
+                p => p.Add(l => l.BlogPost, blogPost));
+
+            var label = cut.Find("small").TextContent;
+
+            label.Should().Be(expectedText);
+        }
+    }
+}

LinkDotNet.Blog.Web/LinkDotNet.Blog.Web.csproj

@@ -6,6 +6,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Blazored.LocalStorage" Version="4.1.2" />
         <PackageReference Include="Blazored.Toast" Version="3.1.2" />
         <PackageReference Include="Markdig" Version="0.25.0" />
         <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="5.0.7" />

LinkDotNet.Blog.Web/Pages/BlogPostPage.razor

@@ -32,6 +32,7 @@ else
                     @(RenderMarkupString(BlogPost.Content))
                 </div>
             </div>
+            <Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
         </div>
     </div>
 }
@@ -55,4 +56,11 @@ else
             StateHasChanged();
         }
     }
+
+    private async Task UpdateLikes(bool hasLiked)
+    {
+        BlogPost = await _repository.GetByIdAsync(BlogPostId);
+        BlogPost.Likes = hasLiked ? BlogPost.Likes + 1 : BlogPost.Likes - 1;
+        await _repository.StoreAsync(BlogPost);
+    }
 }

LinkDotNet.Blog.Web/Shared/Like.razor

@@ -0,0 +1,57 @@
+@using LinkDotNet.Domain
+@using Blazored.LocalStorage
+@using LinkDotNet.Infrastructure.Persistence
+@inject ILocalStorageService _localStorage
+<div style="float: right">
+    <small>@BlogPost.Likes @LikeText</small>
+    <button class="btn @BtnClass" @onclick="LikeBlogPost"><i class="far fa-thumbs-up"></i> @LikeTextButton</button>
+</div>
+
+@code {
+    [Parameter]
+    public BlogPost BlogPost { get; set; }
+
+    [Parameter] 
+    public EventCallback<bool> OnBlogPostLiked { get; set; }
+    
+    private bool HasLiked { get; set; }
+
+    private string BtnClass => HasLiked ? "btn-secondary" : "btn-primary";
+
+    private string LikeTextButton => HasLiked ? "Unlike" : "Like";
+    
+    private string LikeText => BlogPost.Likes == 1 ? "Like" : "Likes";
+    
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            HasLiked = await GetHasLiked();
+            StateHasChanged();
+        }
+    }
+
+    private async Task LikeBlogPost()
+    {
+        // Prevent multiple open sites to like / unlike multiple times
+        var hasLikedFromLocalStorage = await GetHasLiked();
+        if (HasLiked != hasLikedFromLocalStorage)
+        {
+            return;
+        }
+        
+        HasLiked = !HasLiked;
+        await OnBlogPostLiked.InvokeAsync(HasLiked);
+        await _localStorage.SetItemAsync("hasLiked", HasLiked);
+    }
+
+    private async Task<bool> GetHasLiked()
+    {
+        if (await _localStorage.ContainKeyAsync("hasLiked"))
+        {
+            return await _localStorage.GetItemAsync<bool>("hasLiked");
+        }
+
+        return false;
+    }
+}

LinkDotNet.Blog.Web/Startup.cs

@@ -1,3 +1,4 @@
+using Blazored.LocalStorage;
 using Blazored.Toast;
 using LinkDotNet.Blog.Web.Authentication.Auth0;
 using LinkDotNet.Blog.Web.RegistrationExtensions;
@@ -39,6 +40,7 @@ public void ConfigureServices(IServiceCollection services)
             services.UseAuth0Authentication(Configuration);
 
             services.AddBlazoredToast();
+            services.AddBlazoredLocalStorage();
         }
 
         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

LinkDotNet.Domain/BlogPost.cs

@@ -26,6 +26,8 @@ private BlogPost()
 
         public bool IsPublished { get; set; }
 
+        public int Likes { get; set; }
+
         public static BlogPost Create(
             string title,
             string shortDescription,