See who liked my comments

[amywtlin]

📖 As an author of a comment, I should be able to see all people who liked my posts, and access their profiles.

Everywhere we show comments, we want to allow the author of the comment to be able to see who liked their comment. For the moment, this information will only be available to the comment author.

Places where we show comments:

• Post page
• Comment index page

(we also show comments on the notifications page, but we don't show comment count like this, so this feature doesn't apply there)

Tasks to complete:

Associated issues to investigate:

• [x] https://github.com/forem/forem/issues/18338
• [x] https://github.com/forem/forem/issues/18312

Tasks to complete:

• [x] Hide "Like" text when a comment has no likes
• [ ] Add ability to retrieve details on who has liked a comment
• [ ] Create a modal to show who liked a comment
• [ ] Separate the functionality of the like icon (heart) and the text (e.g. "2 likes")

Hide "Like" text when a comment has no likes

If a comment has no likes (this only happens when a comment author first adds the comment, or if they "unlike" the automatic reaction we apply to the comment), we want to remove the text "Like" so that only the icon displays.

Old UI

New UI

Add ability to retrieve details on who has liked a comment

As far as I can see, we don't currently have a mechanism to report the specific users who have liked a comment. To display comment counts we rely on public_reactions_count, which summarises all comment reaction counts for an article's comments. The data returned in that API request doesn't include the detail of which users liked the comment (as it's intended only for use to update the text e.g. "2 likes").

We will need to update the reactions_controller to be able to return detail about which users have reacted to a specific comment (or perhaps should this be in the comments_controller?). The minimal info we need to display the desired UI is

• Name
• Profile image
• Username
• User ID (for the follow button)

Given there may be hundreds of likes on a given comment, we will likely want to paginate the response so we can 'infinite scroll' the details (see below).

Note: There are close similarities between this task and the related one on https://github.com/forem/forem/issues/18125 - whichever is created first can be re-used for the other.

Create a modal to show who liked a comment

See the designs detailed in comment below https://github.com/forem/forem/issues/18126#issuecomment-1191135043. Please note the similarities between this and the modal in https://github.com/forem/forem/issues/18125 - whichever is created first can be re-used for the other.

We can use the Preact modal component for this. Since not all comment authors are going to view this content, I think it makes sense if we load comment like info for this modal async, rather than bundle all that HTML into the Rails view.

Infinite Scroll

Given there may be hundreds of likes on a given comment, we probably don't want to fetch and display them all at once, but instead implement an infinite scroll. Check out app/assets/javascripts/initializers/initScrolling.js for how we do infinite scroll elsewhere in the app.

Separate the functionality of the like icon (heart) and the text (e.g. "2 likes")

When I am the author of a comment

• The heart icon and the text "2 likes" should be two separate buttons
• Each button should have a unique aria-label
• The heart icon should like/unlike the comment
• The text should open the modal (all standard Preact modal behaviours should apply, e.g. trapping focus inside)

When I am not the author of a comment

• The heart icon should be a button that likes/unlikes the comment
• The text should just be plain text (not a button), and clicking it should do nothing
• It might make sense to link the text (e.g. "2 likes") to the icon button using aria-describedby so that screen-reader users have this context when interacting with the like button (not a strong opinion though)

Product point person: @amywtlin.

[github-actions[bot]]

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem-team. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

[pkfrank]

Linking these two issues: https://github.com/forem/forem/issues/18125

[anujbhavsar96]

This would be pretty straightforward. There will be new interaction about how to See who liked my comments

There aren't any design changes required for this. In any comment, we treat the whole ❤️ 2 Likes as a reaction button. Now we will separate ❤️ and 2 Likes

NOTE: In the mobile view, we have text like ❤️ 2, so we should be changing it the same as the desktop view ❤️ 2 Likes

Clicking on ❤️ will like the comment, while clicking on the 2 Likes text will open up the modal, showing who liked comments.

Here is a small prototype to explain interaction. Also, here are the Figma Designs for it.

Web view modal

Mobile view modal

[aitchiss]

Can I confirm if this modal is available to all users, or only to the comment's author (in a similar way to the proposal for seeing who reacted to your posts)?

[amywtlin]

Can I confirm if this modal is available to all users, or only to the comment's author (in a similar way to the proposal for seeing who reacted to your posts)?

@pkfrank was there a decision made for this one? I saw that we have decided that only authors can see who react to their posts, but not sure about this one.

To maximize the impact of building this modal, we should make this available to all users (so they can explore profiles and onwards); but it would be inconsistent with post reactions, which would cause confusion. Given that we have decided not to show post reactions publicly, I think we should be consistent in this for comment reactions, too, and consider open both to public together at a later stage.

[aitchiss]

Awesome - thanks @amywtlin!

One other question pops to mind now since the functionality is different depending on whether or not I'm the comment author -

If I am not the comment author, and I click "2 likes" (rather than the heart icon) - what do we expect to happen after this change? Does it

• Like the comment (as it does now)
• Do nothing (to keep interactions consistent across my own vs others' comments)

[aitchiss]

Also what happens if I am the comment author, and my comment doesn't have any likes yet?

Currently a comment is automatically "liked" by the comment author, but in a couple of cases we show an empty heart icon and the text "Like":

This happens when:

• I just posted the comment on the post page (if I refresh it shows up that it's liked by me, the author 🤷‍♀️ )
• If I unlike the automatic reaction that was applied to it

If there are no likes, what does clicking "Like" do as an author? Does it pop up the modal with an empty state?

[anujbhavsar96]

If I am not the comment author, and I click "2 likes" (rather than the heart icon) - what do we expect to happen after this change? Does it

It should be this -> Do nothing (to keep interactions consistent across my own vs others' comments)

If there are no likes, what does clicking "Like" do as an author?

If it's 0, then we should not show Like text. Does this make sense?

[aitchiss]

If it's 0, then we should not show Like text. Does this make sense?

Yep, that definitely makes sense!

[aitchiss]

@anujbhavsar96 what do we want to do if there are hundreds of likes on a comment?

Should we load e.g. 25 initially, and then infinite scroll in the remainder? Or have a 'load more' button (easier, but less delightful maybe 😄)? I'm not sure how many likes is typical for a comment on DEV but I'm guessing it can get into the hundreds

[anujbhavsar96]

Should we load e.g. 25 initially, and then infinite scroll in the remainder?

This one ☝️. Probably we can load till the first two scrolls, and then we can autoload with scroll. The Load more option will be too many clicks if there are hundreds of likes.

[aitchiss]

@anujbhavsar96 / @amywtlin - are we happy that this one is ready for dev now?

[amywtlin]

@aitchiss Yes please!

[aitchiss]

I started looking at the first task on this issue - hide the "like" text when there are 0 reactions. I'm a little bit confused though as it seems public_reactions_count is never zero for a comment -

I followed these steps:

• Add a new comment to a post -> comment shows up automatically as 'liked' by me
• I remove the auto-added like
• I refresh the page -> comment still shows as "1 like", but isn't highlighted as liked by me
• I checked in a private browsing window in case something was being cached, but again I see '1 like' even though no-one has liked the comment

In the console I can see the comment has:

positive_reactions_count: 0,
public_reactions_count: 1,
reactions_count: 0,

But when I check the reactions table I can see there's no reactions for that comment.

Does anyone know if this is deliberate and where exactly we're setting this (I had a look but it's not clear to me exactly how we're keeping that as min. 1 like)?

Whether deliberate or not, I think we are going to have to change this behaviour, as we can't show "1 like" on the comment, but zero likes in the modal that opens.

[fdocr]

@aitchiss the reaction count mismatch at first glance feels like an odd situation. Did this happen on your local environment? Did you have caching enabled locally with rails dev:cache?

I tested this on BHC (here and here) and didn't run into the problem. Also attempted this locally and wasn't able to replicate the count mismatch problem.

I was only able to replicate this when caching is disabled locally. After a quick look through the code I wasn't able to find a reason why it would fail to keep track of these counts when caching is disabled, but at the moment I feel comfortable in this not happening in production environments where caching is enabled. Please let me know if you're able to replicate this on a prod environment though!

[aitchiss]

Ooh thanks for looking into this @fdocr - funnily enough I didn't think to check a prod environment 🙈

I ran rails dev:cache which did change the behaviour, but now I'm seeing other weirdness locally 😞

https://user-images.githubusercontent.com/20773163/183696888-5667e442-781c-4c6b-835c-dd41f8974c3f.mp4

(The new comment comes with 1 like even though it doesn't show as me having liked it)

IDK it's weird, but at least it seems like I can maybe trigger a state locally with 0 likes which will definitely help 😄

[fdocr]

Oh yeah now that you mention this I can see the same weirdness you shared in the screen recording above. However, I think this only happened because we need to refresh the page after running rails dev:cache. Also worth noting to make sure to restart the server in case you ran the command in a separate terminal.

After doing those two things I mentioned this is what I see locally:

https://user-images.githubusercontent.com/6045239/183705083-b1265cf8-ab23-46ed-b71c-7db676e4ec85.mov

I just submitted an issue so we can take a look at these problems we're seeing locally

[aitchiss]

Ah cool, yeah seems like there's a few ways to trip things up locally, but essentially it does all work correctly (or at least we're pretty much sure of that 😄)

Thanks for submitting that issue!

[maestromac]

Late and dumb question here but what's the reasoning behind hiding "Like" text when a comment has no likes? To me, it's adding inconsistency.

[aitchiss]

Late and dumb question here but what's the reasoning behind hiding "Like" text when a comment has no likes? To me, it's adding inconsistency.

Definitely a sensible question 😄 I'll let @anujbhavsar96 chime in, but I think it's to make things more consistent for the new flow (still to be implemented).

The forthcoming change will be for the 'like' button to become two buttons - with the icon actually liking the comment, and the text popping up a modal for the author. If the comment doesn't have any likes yet, and we showed the text, then we'd have to have a situation where for an author's comment

• sometimes the text does nothing / isn't a button
• sometimes it pops up the modal

And I guess similarly it would have to dynamically change from static text to button (or vice versa) if an author liked or unliked the comment.

TBH the impact will be very very small, since when you post a comment, it's automatically 'liked' by the author. So it's pretty rare a comment doesn't have at least one like.

[aitchiss]

First task (Hide "Like" text when a comment has no likes) has been completed in https://github.com/forem/forem/pull/18322

Since I won't be able to take this any further, I'm going to unassign myself and pop it back in 'ready for dev' 🙂

[anujbhavsar96]

Late and dumb question here but what's the reasoning behind hiding "Like" text when a comment has no likes? To me, it's adding inconsistency.

Even right now, we have a similar interaction. When 0 likes, we hide the number(In mobile). @maestromac

Before, we treated Like text as a label, but now it's an action. In that case, it doesn't make sense to show when there are no likes.