Display Notification for Emoji Reactions on a Comment

[noi5e]

What do you all think about having a Noty Notification displayed when user reacts to a comment?

Expected

For example, here is a video that shows notification when user DELETEs a comment.

An image of Delete Notification below:

We could have a similar notification for when user reacts to a comment. The notification could have a string like:

• Reacted with "Hooray!
• Reacted with "Thumbs Down" to Comment
• Removed "Thumbs Down" Reaction

Actual

This video shows what currently happens when the user emoji-reacts to a comment

• No notification at all
• Sometimes there can be a delay after the user clicks on the reaction, and before the reaction appears on the comment. This can be a little confusing sometimes. Maybe a notification would help this be less confusing?

On the other hand, I know that for example facebook doesn't flash notifications when a user likes a post. Is this something we even want to do? If so, I'm happy to help guide whoever takes this issue on.

[noi5e]

What to Change

Here's where the comment view sends a request to make a user reaction on a comment:

plots2/app/views/notes/_comment.html.erb

Lines 83 to 92 in 38e37eb

	<div id="emoji-list" class="emoji-container">
	<% emoji_names, emoji_image_map = emoji_info %>
	<% emoji_names.each do |e| %>
	<% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
	<% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>
	<%= link_to str, data: { method: "post", remote: true }, style: "margin: 6px;" do %>
	<img alt="React to post" class="emoji grow" height="20" width="20" src="<%= emoji_image_map[e] %>">
	<% end %>
	<% end %>
	</div>

Particularly these two lines are making an <a href> tag that sends a request to /comment/like:

plots2/app/views/notes/_comment.html.erb

Lines 87 to 88 in 38e37eb

	<% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>
	<%= link_to str, data: { method: "post", remote: true }, style: "margin: 6px;" do %>

Which calls this controller here:

plots2/app/controllers/comment_controller.rb

Lines 140 to 160 in 38e37eb

	def like_comment
	@comment_id = params["comment_id"].to_i
	@user_id = params["user_id"].to_i
	@emoji_type = params["emoji_type"]
	comment = Comment.where(cid: @comment_id).first
	like = comment.likes.where(user_id: @user_id, emoji_type: @emoji_type)
	@is_liked = like.size.positive?
	if like.size.positive?
	like.first.destroy
	else
	comment.likes.create(user_id: @user_id, emoji_type: @emoji_type)
	end
	# select likes from users that aren't banned (status = 0)
	@likes = comment.likes.joins(:user).select(:emoji_type, :status).where("emoji_type IS NOT NULL").where("status != 0").group(:emoji_type).size
	@user_reactions_map = comment.user_reactions_map
	respond_with do |format|
	format.js do
	render template: 'comments/like_comment'
	end
	end
	end

The delete comment example I mentioned above uses this JS here to flash the notification:

plots2/app/views/notes/_comment.html.erb

Lines 107 to 117 in 38e37eb

	confirm: function () {
	$.ajax({
	url : "/comment/delete/<%= comment.cid %>",
	type: 'GET',
	success: function(response){
	notyNotification('sunset', 3000, 'error', 'topRight', 'Comment deleted');
	$("#c<%= comment.cid %>").remove()
	$('#comment-count')[0].innerHTML = parseInt($('#comment-count')[0].innerHTML)-1;
	}
	});
	},

• Maybe instead of an <a> link to send the request to emoji-react, we send a jQuery AJAX request like above.
• Then in the callback for that request, put a notyNotification to flash the response
• We would also probably need to think about debouncing so the user doesn't spam the emoji buttons by clicking over-and-over again.

[RATED-R-SUNDRAM]

I would like to work on this issue

[noi5e]

@RATED-R-SUNDRAM go for it! comment on this page or in chat if you'd like help with anything!

[shadowoflight]

@noi5e can I work on this issue if @RATED-R-SUNDRAM is not working on this?

[noi5e]

@shadowoflight Good question! @RATED-R-SUNDRAM Do you still want to work on this issue? Are you stuck anywhere and need help? If you don't want to work on this anymore, are you okay with @shadowoflight taking it over?

[shadowoflight]

Since @RATED-R-SUNDRAM has no response it will be fair enough if I take up the issue and start working @noi5e

[noi5e]

@shadowoflight Go ahead!

[noi5e]

@shadowoflight How is it going with this issue? Were you able to find a way to get the app set up locally or on GitPod? Please let me know if there's any way I can help 😄

[govindgoel]

@shadowoflight are you working on this

[govindgoel]

@noi5e Can you assign this to me

[noi5e]

@shadowoflight, You mentioned that you hadn't started working on this because of exams. Can you please let us know when you'll be ready to start this?

[waridrox]

Hey @noi5e, meanwhile can I try to solve this issue. This would be my first contribution to the org :)

[noi5e]

@govindgoel If you want this issue it's yours. Can you claim it in the next 24 hours? If I don't hear from you, I'll assign it to @waridrox

[govindgoel]

@noi5e I can start working on this.

[noi5e]

@govindgoel Great, go ahead!

[waridrox]

Since there is no further update on this, @noi5e could you please assign it to me, I would like to at least try and see if this can be resolved. Thanks :)

[noi5e]

@waridrox Go ahead and start working on it! You can submit a PR linking this issue. Thanks.

[govindgoel]

I am working on it the issue I faced @noi5e is with ajax call i am able to put a notyNotification but while remvoing the reacted emoji, it still shows reacted with in the notification ideally it should show removed the particular emoji, there is some issue with the post request i'm currently looking into it. And I should have followed up early :/

[waridrox]

And I should have followed up early :/

No worries 👍 pls continue...

[noi5e]

@govindgoel Ah okay! Sorry about that, I wasn't sure if you were working on it. @govindgoel, definitely continue working on it. I'm happy to help you too! Don't hesitate to leave a comment about what you find.

[KarishmaVanwari]

Is this issue open? If yes, I would like to work on this. @noi5e

[Yavnikaa]

If this issue is open, I would like to take this up. May I?

[noi5e]

Apologies for the delay! @Yavnikaa, as you are the most recent interested person, feel free to take up this issue!

[iem-saad]

@noi5e Hi, is anyone working on this issue? I would like to work on it if possible. Thanks

[noi5e]

@iem-saad Yes, feel free to go ahead and make a PR!

[iem-saad]

Thanks for allowing me, will ping you when done or help needed.

[iem-saad]

Hi @noi5e, you use rbenv or RVM for managing ruby versions? I use RVM and having following issue while project setup. Do you know any workaround??
https://bugs.ruby-lang.org/issues/18658

[noi5e]

@iem-saad I recommend asking for config help in Public Lab's Gitter channel... Or browse our open issues, you might find that someone else has encountered the same setup bug.

[iem-saad]

Hi, @noi5e I hope you are well. I've completed the task can you please review it #11356
Thanks.