Dispatching event with the save comment

luisdalmolin · luisdalmolin · commit 690423d198c4 · 2025-04-28T07:20:35.000-03:00
diff --git a/resources/views/reaction-manager.blade.php b/resources/views/reaction-manager.blade.php
@@ -6,7 +6,7 @@
                 x-cloak
                 wire:click="handleReactionToggle('{{ $reactionData['reaction'] }}')"
                 type="button"
-                class="inline-flex items-center justify-center gap-1 rounded-full border px-2 py-1 text-sm font-medium transition hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
+                class="inline-flex items-center justify-center gap-1 rounded-full border px-2 h-8 text-sm font-medium transition hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
                     {{ $reactionData['reacted_by_current_user']
                         ? 'bg-primary-100 dark:bg-primary-800 border-primary-300 dark:border-primary-600 text-primary-700 dark:text-primary-200'
                         : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200' }}"
@@ -25,7 +25,7 @@ class="inline-flex items-center justify-center gap-1 rounded-full border px-2 py
             x-on:click="open = !open"
             type="button"
             @disabled(! auth()->check())
-            class="inline-flex items-center justify-center gap-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 transition hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="inline-flex items-center justify-center gap-1 rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 w-8 h-8 text-sm font-medium text-gray-700 dark:text-gray-200 transition hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
             title="Add Reaction"
             wire:key="add-reaction-button-{{ $comment->getId() }}"
         >
@@ -51,7 +51,7 @@ class="absolute bottom-full mb-2 z-10 bg-white dark:bg-gray-800 border border-gr
                     x-on:click="open = false"
                     type="button"
                     @disabled(! auth()->check())
-                    class="inline-flex items-center justify-center gap-1 rounded-full border px-2 py-1 text-sm font-medium transition hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
+                    class="inline-flex items-center justify-center gap-1 rounded-full border w-8 h-8 text-sm font-medium transition hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed
                            {{ $reactionData['reacted_by_current_user']
                                ? 'bg-primary-100 dark:bg-primary-800 border-primary-300 dark:border-primary-600 text-primary-700 dark:text-primary-200'
                                : 'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200' }}"
@@ -69,7 +69,7 @@ class="inline-flex items-center justify-center gap-1 rounded-full border px-2 py
         @if (! in_array($reactionEmoji, $allowedReactions) && $data['count'] > 0)
             <span
                 wire:key="reaction-extra-{{ $reactionEmoji }}-{{ $comment->getId() }}"
-                class="inline-flex items-center justify-center gap-1 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-2 py-1 text-sm font-medium text-gray-600 dark:text-gray-300"
+                class="inline-flex items-center justify-center gap-1 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 w-8 h-8 text-sm font-medium text-gray-600 dark:text-gray-300"
                 title="{{ $reactionEmoji }}"
             >
                 <span>{{ $reactionEmoji }}</span>
diff --git a/src/Actions/ToggleCommentReaction.php b/src/Actions/ToggleCommentReaction.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace Kirschbaum\Commentions\Actions;
+
+use Illuminate\Foundation\Auth\User as Authenticatable;
+use Kirschbaum\Commentions\Comment;
+use Kirschbaum\Commentions\CommentReaction;
+use Kirschbaum\Commentions\Config;
+use Kirschbaum\Commentions\Events\CommentReactionToggledEvent;
+
+class ToggleCommentReaction
+{
+    public static function run(Comment $comment, string $reaction, ?Authenticatable $user = null): void
+    {
+        if (! $user) {
+            return;
+        }
+
+        if (! in_array($reaction, Config::getAllowedReactions())) {
+            return;
+        }
+
+        /** @var CommentReaction $existingReaction */
+        $existingReaction = $comment
+            ->reactions()
+            ->where('reactor_id', $user->getKey())
+            ->where('reactor_type', $user->getMorphClass())
+            ->where('reaction', $reaction)
+            ->first();
+
+        if ($existingReaction) {
+            $existingReaction->delete();
+            event(new CommentReactionToggledEvent($comment, $existingReaction, $user, $reaction, false));
+        } else {
+            $newReaction = $comment->reactions()->create([
+                'reactor_id' => $user->getKey(),
+                'reactor_type' => $user->getMorphClass(),
+                'reaction' => $reaction,
+            ]);
+            event(new CommentReactionToggledEvent($comment, $newReaction, $user, $reaction, true));
+        }
+    }
+}
diff --git a/src/Comment.php b/src/Comment.php
@@ -13,6 +13,7 @@
 use Illuminate\Support\Collection;
 use Kirschbaum\Commentions\Actions\HtmlToMarkdown;
 use Kirschbaum\Commentions\Actions\ParseComment;
+use Kirschbaum\Commentions\Actions\ToggleCommentReaction;
 use Kirschbaum\Commentions\Contracts\Commentable;
 use Kirschbaum\Commentions\Contracts\Commenter;
 use Kirschbaum\Commentions\Contracts\RenderableComment;
@@ -167,6 +168,11 @@ public function canDelete(): bool
         return Config::allowDeletes() && $this->isAuthor(Config::resolveAuthenticatedUser());
     }
 
+    public function toggleReaction(string $reaction): void
+    {
+        ToggleCommentReaction::run($this, $reaction, Config::resolveAuthenticatedUser());
+    }
+
     public function getLabel(): ?string
     {
         return null;
diff --git a/src/Events/CommentReactionToggledEvent.php b/src/Events/CommentReactionToggledEvent.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Kirschbaum\Commentions\Events;
+
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+use Kirschbaum\Commentions\Comment;
+use Kirschbaum\Commentions\CommentReaction;
+use Illuminate\Foundation\Auth\User as Authenticatable;
+
+class CommentReactionToggledEvent
+{
+    use Dispatchable, SerializesModels;
+
+    public function __construct(
+        public Comment $comment,
+        public ?CommentReaction $reaction,
+        public Authenticatable $user,
+        public string $reactionType,
+        public bool $wasCreated
+    ) {
+    }
+}
diff --git a/src/Livewire/Comment.php b/src/Livewire/Comment.php
@@ -110,40 +110,14 @@ public function cancelEditing()
         $this->commentBody = '';
     }
 
-    // #[Renderless]
+    #[Renderless]
     public function toggleReaction(string $reaction): void
     {
-        $user = Config::resolveAuthenticatedUser();
-
-        if (! $user) {
-            return;
-        }
-
-        if (! in_array($reaction, Config::getAllowedReactions())) {
-            return;
-        }
-
         if (! $this->comment instanceof CommentModel) {
             return;
         }
 
-        /** @var CommentReaction $existingReaction */
-        $existingReaction = $this->comment
-            ->reactions()
-            ->where('reactor_id', $user->getKey())
-            ->where('reactor_type', $user->getMorphClass())
-            ->where('reaction', $reaction)
-            ->first();
-
-        if ($existingReaction) {
-            $existingReaction->delete();
-        } else {
-            $this->comment->reactions()->create([
-                'reactor_id' => $user->getKey(),
-                'reactor_type' => $user->getMorphClass(),
-                'reaction' => $reaction,
-            ]);
-        }
+        $this->comment->toggleReaction($reaction);
 
         $this->dispatch('comment:reaction:saved');
     }
diff --git a/tests/Feature/CommentReactionTest.php b/tests/Feature/CommentReactionTest.php
@@ -1,8 +1,10 @@
 <?php
 
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Event;
 use Kirschbaum\Commentions\Comment as CommentModel;
 use Kirschbaum\Commentions\Config;
+use Kirschbaum\Commentions\Events\CommentReactionToggledEvent;
 use Kirschbaum\Commentions\Livewire\Comment as CommentComponent;
 use Tests\Models\Post;
 use Tests\Models\User;
@@ -13,6 +15,7 @@
 beforeEach(function () {
     config(['commentions.allowed_reactions' => ['👍', '❤️']]);
     Config::resolveAuthenticatedUserUsing(fn () => Auth::user());
+    Event::fake();
 });
 
 test('user can add configured reactions to a comment', function (string $reactionEmoji) {
@@ -27,6 +30,15 @@
     livewire(CommentComponent::class, ['comment' => $comment])
         ->call('toggleReaction', $reactionEmoji);
 
+    Event::assertDispatched(CommentReactionToggledEvent::class, function (CommentReactionToggledEvent $event) use ($comment, $user, $reactionEmoji) {
+        return $event->comment->is($comment)
+            && $event->user->is($user)
+            && $event->reactionType === $reactionEmoji
+            && $event->wasCreated === true
+            && $event->reaction !== null
+            && $event->reaction->reaction === $reactionEmoji;
+    });
+
     $this->assertDatabaseHas('comment_reactions', [
         'comment_id' => $comment->id,
         'reactor_id' => $user->id,
@@ -49,7 +61,7 @@
     $comment = CommentModel::factory()->author($user)->commentable($post)->create();
 
     // Add reaction first
-    $comment->reactions()->create([
+    $reaction = $comment->reactions()->create([
         'reactor_id' => $user->id,
         'reactor_type' => $user->getMorphClass(),
         'reaction' => $reactionEmoji,
@@ -65,6 +77,15 @@
     livewire(CommentComponent::class, ['comment' => $comment])
         ->call('toggleReaction', $reactionEmoji);
 
+    Event::assertDispatched(CommentReactionToggledEvent::class, function (CommentReactionToggledEvent $event) use ($comment, $user, $reactionEmoji, $reaction) {
+        return $event->comment->is($comment)
+            && $event->user->is($user)
+            && $event->reactionType === $reactionEmoji
+            && $event->wasCreated === false
+            && $event->reaction !== null // The deleted reaction model is passed
+            && $event->reaction->is($reaction);
+    });
+
     $this->assertDatabaseMissing('comment_reactions', [
         'comment_id' => $comment->id,
         'reactor_id' => $user->id,
