@using LinkDotNet.Blog.Domain
@using LinkDotNet.Blog.Web.Features.Services
@inject ILocalStorageService LocalStorage
@code {
[Parameter, EditorRequired]
public required BlogPost BlogPost { get; set; }
[Parameter]
public EventCallback OnBlogPostLiked { get; set; }
private bool shouldBeUpdated;
private bool HasLiked { get; set; }
private string ButtonClass => HasLiked
? "btn-primary"
: "btn-outline-secondary";
protected override void OnParametersSet()
{
base.OnParametersSet();
shouldBeUpdated = true;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
// As we are using static prerendering, we can only issue JS Interop in OnAfterRender
// As the page might be updated (click a related blog post inside a blog post), we need to update the like status
// But we only want to do this once
if (shouldBeUpdated)
{
HasLiked = await GetHasLiked();
shouldBeUpdated = false;
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/{BlogPost.Id}", HasLiked);
}
private async Task GetHasLiked()
{
if (await LocalStorage.ContainsKeyAsync($"hasLiked/{BlogPost.Id}"))
{
return await LocalStorage.GetItemAsync($"hasLiked/{BlogPost.Id}");
}
return false;
}
}