Custom implementing like button in ASP .NET CORE with SignalR - asp.net-core

Question

Hy everyone,
sorry if my question is duplicate of some, but i didn't found solution for my problem.
However, i'm trying to implement custom like button for posts in my asp.net core mvc application and everything works fine, except when i click on like button, it changes color (like on facebook, blue color etc.) not just for current logged user, but for all logged users. But when other users refresh window, everything is back to normal...
What I want is, when I click on "like" button, to update "like counter" FOR EVERYONE and to change color JUST FOR ME (when I came back some other day, that I know that I liked that post.)
Does someone know how to acomplish this?
Here's my code
Index.cshtml
#using Fitness_Centar.Data
#using Fitness_Centar.Data.Models
#using Fitness_Centar.Web.Areas.ModulClan.ViewModels
#using Fitness_Centar.Web.Helper
#model List<TimelineVM>
#{
ViewData["Title"] = "Index";
MyContext _ctx = (MyContext)ViewData["_ctx"];
User u = Context.GetLoggedUser();
int userId = -1;
if (u.Coach != null)
{
userId = u.Coach.CoachId;
}
if (u.Employee != null)
{
userId = u.Employee.EmployeeId;
}
if (u.Member != null)
{
userId = u.Member.MemberId;
}
}
<div class="row">
<div class="col-sm-12 col-md-9 col-lg-9">
<div class="box box-info custom aktivnosti">
<div class="box-header with-border padding-l-25">
<h3 class="box-title">Activities</h3>
</div>
<div class="box-body">
#foreach (var p in Model)
{
<div id="#p.Post.PostClanovaId" class="post">
<div class="user-info">
<img class="img-circle img-bordered-sm" src="~/AdminLTE/dist/img/avatar5.png" />
<div class="desc">
<span class="username">#p.Post.User.Name #p.Post.User.LastName</span>
<span class="post-description">Published: #p.Post.PostDate</span>
</div>
</div>
<div class="post-content text-justify">
<p>#p.Post.Content</p>
</div>
<div class="post-footer">
#{int n = p.Post.PostId + 1594;}
#{
var c = _ctx.Likes.Where(x => x.UserId == userId && x.PostId == p.Post.PostId).FirstOrDefault();
if (c != null && c.UserId == userId)
{
<a href="" id="post-#n" class="likeButton link-black liked" data-postid="#p.Post.PostId" data-userid="#userId">
<i class="fa fa-thumbs-o-up margin-r-5"></i>
Like
</a>
}
else
{
<a href="" id="post-#n" class="likeButton link-black" data-postid="#p.Post.PostId" data-userid="#userId">
<i class="fa fa-thumbs-o-up margin-r-5"></i>
Like
</a>
}
}
<div class="num-of-likes" id="post-#n-numOfLikes">
#p.Likes.Count()
<span class="usersThatLiked">
#{
string g = "";
foreach (var l in p.Likes)
{
g += l.User.Ime + " " + l.Clan.Prezime;
}
#g;
}
</span>
</div>
<div class="comment pull-right">
<a href="#" class="link-black">
<i class="fa fa-comments-o margin-r-5"></i>
Comments
</a>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Komentiraj...">
<span class="input-group-btn">
<button type="button" class="btn btn-info btn-flat"><i class="fa fa-check"></i></button>
</span>
</div>
</div>
</div>
}
</div>
</div>
</div>
javascript.js
"use strict";
var $connection = new signalR.HubConnectionBuilder().withUrl("/ModulClan/Helper/LajkHub").build();
$(".likeButton").prop("disabled", true);
$connection.on("ReceiveMessage", function (numOfLikes, postId) {
var x = postId + 1594;
var s = "#post-" + x;
if ($(s).hasClass("liked")) {
$(s).removeClass("liked");
} else {
$(s).addClass("liked");
}
$(s + "-num-of-likes").text(numOfLikes);
});
$connection.start().then(function () {
$(".likeButton").prop("disabled", false);
}).catch(function (err) {
return console.error(err.toString());
});
$(".likeButton").bind("click", function (event) {
var userId = $(this).attr("data-userid");
var postId = $(this).attr("data-postid");
$connection.invoke("SetLike", userId, postId).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
});
LikeHub.cs
public class LikeHub : Hub
{
private readonly MyContext _ctx;
public LikeHub (MyContext context)
{
_ctx = context;
}
public async Task SetLike(int userId, int postId)
{
Likes l = new Likes();
Likes temp = _ctx.Likes.Where(x => x.PostId == postId && x.UserId == userId).FirstOrDefault();
if(temp != null)
{
_ctx.Likes.Remove(temp);
}
else
{
_ctx.Likes.Add(l);
l.UserId = userId;
l.PostId = postId;
}
_ctx.SaveChanges();
int numOfLikes= _ctx.Likes.Where(x => x.PostId == postId).Count();
await Clients.All.SendAsync("ReceiveMessage", numOfLikes, postId);
}
}

Answer 1

You can identify the current user (who clicked the like button) via
var userId = $(this).attr("data-userid"); (as you did when someone clicks the like button).
But the problem is this, you are not checking for the userId when the SetLike is succeeded (inside the on ReceiveMessage javascript function).
so to solve this you need to send the userId of the user who clicked the like button from the backend to the frontend (to the on("ReceiveMessage"..) function)
e.g.: await Clients.All.SendAsync("ReceiveMessage", numOfLikes, postId, userId);
and on the ReciveMessage check if the userId you got from the backend match the current user who's browsing by var currentUserId = $(this).attr("data-userid");
if they are equal then color the like button, otherwise just update the like counter.
this way would solve your issue.
Another solution would be to send 2 requests one is specific for the user who clicked the like button and the other is to everyone to update the like counter.