Skip to content

Comments

Add support for reactions in comments#18

Merged
luisdalmolin merged 16 commits intomainfrom
feature/add-reactions
May 6, 2025
Merged

Add support for reactions in comments#18
luisdalmolin merged 16 commits intomainfrom
feature/add-reactions

Conversation

@guetteman
Copy link
Contributor

@guetteman guetteman commented Apr 25, 2025

This pull request introduces a new feature to support reactions on comments, along with several supporting updates to configuration, database schema, and frontend components. The most important changes include adding a CommentReaction model and corresponding database table, updating the Comment model to handle reactions, and extending the frontend to display and manage reactions.

image

Luis Güette added 11 commits April 25, 2025 07:50
- Introduced a new `comment_reactions` table to store user reactions to comments.
- Updated the `Comment` model to include a relationship for reactions.
- Implemented reaction toggling in the Livewire component, allowing users to add or remove reactions.
- Enhanced the comment view to display reactions and their counts.
- Added tests to verify the functionality of adding and removing reactions.

This feature enhances user engagement by allowing reactions to comments, similar to social media platforms.
- Updated the `getComments` method in the `HasComments` trait to include reactions and their associated reactors.
- Simplified the `comments` method in the `CommentList` Livewire component to utilize the updated `getComments` method for improved performance and clarity.
- Introduced a new configuration option for allowed reactions in comments, enabling customization of emoji reactions.
- Updated the comment view to dynamically display allowed reactions and their counts.
- Enhanced the reaction toggling functionality to validate against the allowed reactions.
- Added tests to ensure users can only react with configured emojis and that the system handles reactions correctly.

This update improves user interaction by allowing a broader range of reactions to comments, enhancing engagement.
- Updated the comment view to directly access the reaction summary from the component's property instead of calling a method.
- Adjusted the logic for displaying reactions to ensure consistency with the allowed reactions configuration.

This change simplifies the code and improves performance by reducing method calls during rendering.
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces support for reactions on comments by adding a new CommentReaction model and database table, updating the Comment model to handle reactions, and extending the frontend components accordingly.

  • Adds a detailed planning document outlining implementation steps and code snippets.
  • Provides configuration and schema updates alongside frontend modifications.
  • Updates the project documentation under .repomix/instructions/plan.md to guide the feature implementation process.
Files not reviewed (13)
  • .cursor/rules/filament-plugin.mdc: Language not supported
  • .repomix/plan.config.json: Language not supported
  • config/commentions.php: Language not supported
  • database/migrations/create_commentions_tables.php.stub: Language not supported
  • resources/views/comment.blade.php: Language not supported
  • src/Comment.php: Language not supported
  • src/CommentReaction.php: Language not supported
  • src/CommentionsPlugin.php: Language not supported
  • src/Config.php: Language not supported
  • src/HasComments.php: Language not supported
  • src/Livewire/Comment.php: Language not supported
  • src/Livewire/CommentList.php: Language not supported
  • tests/Feature/CommentReactionTest.php: Language not supported

@guetteman guetteman changed the title add reactions Add support for reactions in comments Apr 25, 2025
@erikaraujo
Copy link

erikaraujo commented Apr 25, 2025

Tiny UX comment: Isn't it better to follow what most apps do and have a dedicated button to "react" where you click that button and then select the reaction you want to give instead of having all the emojis there?

It takes me a second to actually see what the reaction was when seeing all emojis there - even the ones where no one clicked to react.

(Kinda confusing, but I dont know how to better explain... sorry 😅 )

Edit: Something like this, from Zoom Chat:
image

@guetteman
Copy link
Contributor Author

Tiny UX comment: Isn't it better to follow what most apps do and have a dedicated button to "react" where you click that button and then select the reaction you want to give instead of having all the emojis there?

It takes me a second to actually see what the reaction was when seeing all emojis there - even the ones where no one clicked to react.

(Kinda confusing, but I dont know how to better explain... sorry 😅 )

Edit: Something like this, from Zoom Chat: image

😂 That's fair. We can improve the UI. Honestly I didn't think about it 😅

@@ -0,0 +1,13 @@
---

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we really commit this in a package we intend to make public?

(Honest question here - I dont know 😅)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think since this was very specific for the demo, we should probably remove this for now at least. We may want to have a more complete file like this for open-source projects, but let's remove it for now

{
public function up()
{
Schema::create('comment_reactions', function (Blueprint $table) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think if we are going to allow flexibility in the naming of the main table then this table should also allow that same flexibility.

@if ($comment->isComment() && $comment instanceof \Kirschbaum\Commentions\Comment)
<livewire:commentions::reaction-manager
:comment="$comment"
{{-- :reaction-summary="$this->reactionSummary" --}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like we have some left-over commented code here

@else
<div class="mt-1 space-y-6 text-sm text-gray-800 dark:text-gray-200">{!! $comment->getParsedBody() !!}</div>

@if ($comment->isComment() && $comment instanceof \Kirschbaum\Commentions\Comment)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe worth revisiting this conditional check - I know $comment->isComment() returns true, what is the benefit of checking that and checking if it's an instance of a Comment model? Is this due to use showing other items in the "timeline" that might not be actual comments?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I don't think the double-check is needed here

* Allowed reactions for comments.
* Define the list of emojis that users can react with.
*/
'allowed_reactions' => ['👍', '❤️', '😂', '😮', '😢', '🤔'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on Erik's feedback, maybe this will change, but I do wonder if this stays, if we should include a way to allow all emojis?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could make this a follow-up? We would probably need a plugin or to pull the list of all emojis from somewhere, and also implement search, etc. Thoughts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I guess that's fair if we want to do it as follow-up. I wasn't sure how complicated it would be.

Livewire::component('commentions::comment-list', CommentList::class);
Livewire::component('commentions::comments', Comments::class);

Livewire::component('commentions::reaction-manager', ReactionManager::class);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given the simplicity of the other component names should we just go with Reactions::class and commentions::reactions?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think that's a rename that makes sense

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@luisdalmolin We'll have to update this area and delete the other files, I see you have a commit for changing the names.

Livewire::component('commentions::comment-list', CommentList::class);
Livewire::component('commentions::comments', Comments::class);

Livewire::component('commentions::reaction-manager', ReactionManager::class);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@luisdalmolin We'll have to update this area and delete the other files, I see you have a commit for changing the names.

@luisdalmolin luisdalmolin merged commit bb27cc8 into main May 6, 2025
4 checks passed
@luisdalmolin luisdalmolin deleted the feature/add-reactions branch May 6, 2025 19:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants