feat(panel-app): S6 — componente Livewire Reactions (#545)

app-modules/panel-app/resources/views/livewire/timeline/reactions.blade.php

@@ -0,0 +1,40 @@
+@php
+    use He4rt\Activity\Reaction\Enums\TimelineReaction;
+@endphp
+
+<div x-data="{ open: false }" class="relative" @click.outside="open = false">
+    <button
+        type="button"
+        @click="open = !open"
+        class="hover:text-primary-500 flex items-center gap-1.5 transition {{ $mine !== null ? 'text-primary-500' : '' }}"
+    >
+        @if ($mine !== null)
+            <span class="text-sm leading-none">{{ TimelineReaction::from($mine)->getEmoji() }}</span>
+        @else
+            <x-heroicon-o-face-smile class="h-4 w-4" />
+        @endif
+
+        @if (array_sum($counts) > 0)
+            <span>{{ Number::abbreviate(array_sum($counts)) }}</span>
+        @endif
+    </button>
+
+    <div
+        x-show="open"
+        x-cloak
+        x-transition
+        class="absolute bottom-full left-0 mb-2 flex items-center gap-1 rounded-full border border-gray-200 bg-white px-2 py-1.5 shadow-lg dark:border-white/10 dark:bg-gray-800"
+    >
+        @foreach ($reactions as $reaction)
+            <button
+                type="button"
+                wire:click="reactWith('{{ $reaction->value }}')"
+                @click="open = false"
+                title="{{ $reaction->getLabel() }}"
+                class="flex h-7 w-7 items-center justify-center rounded-full text-base transition hover:scale-125 {{ $mine === $reaction->value ? 'bg-primary-500/10' : '' }}"
+            >
+                {{ $reaction->getEmoji() }}
+            </button>
+        @endforeach
+    </div>
+</div>

app-modules/panel-app/src/Livewire/Timeline/Reactions.php

@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+namespace He4rt\PanelApp\Livewire\Timeline;
+
+use He4rt\Activity\Reaction\Actions\ReactWith;
+use He4rt\Activity\Reaction\DTOs\ReactWithDTO;
+use He4rt\Activity\Reaction\Enums\TimelineReaction;
+use He4rt\Activity\Reaction\Queries\ReactionSummary;
+use He4rt\Identity\User\Models\User;
+use Illuminate\Container\Attributes\CurrentUser;
+use Illuminate\View\View;
+use Livewire\Attributes\Locked;
+use Livewire\Component;
+
+final class Reactions extends Component
+{
+    #[Locked]
+    public string $timelineId;
+
+    /** @var array<string, int> */
+    public array $counts = [];
+
+    public ?string $mine = null;
+
+    /** @param array<string, int> $counts */
+    public function mount(string $timelineId, array $counts = [], ?string $mine = null): void
+    {
+        $this->timelineId = $timelineId;
+        $this->counts = $counts;
+        $this->mine = $mine;
+    }
+
+    public function reactWith(string $reaction, #[CurrentUser] ?User $user): void
+    {
+        if (!$user instanceof User) {
+            return;
+        }
+
+        $case = TimelineReaction::tryFrom($reaction);
+        if ($case === null) {
+            return;
+        }
+
+        resolve(ReactWith::class)->handle(new ReactWithDTO($user->id, $this->timelineId, $case));
+
+        $summary = resolve(ReactionSummary::class)
+            ->forTimelines([$this->timelineId], $user->id)
+            ->first();
+
+        $this->counts = $summary->counts;
+        $this->mine = $summary->mine?->value;
+
+        $this->dispatch('timeline.reaction-updated');
+    }
+
+    public function render(): View
+    {
+        return view('panel-app::livewire.timeline.reactions', [
+            'reactions' => TimelineReaction::cases(),
+        ]);
+    }
+}

app-modules/panel-app/src/PanelAppServiceProvider.php

@@ -13,6 +13,7 @@
 use He4rt\PanelApp\Livewire\Timeline\Composer;
 use He4rt\PanelApp\Livewire\Timeline\Feed;
 use He4rt\PanelApp\Livewire\Timeline\PostShow;
+use He4rt\PanelApp\Livewire\Timeline\Reactions;
 use He4rt\PanelApp\Livewire\Timeline\ReplyComposer;
 use He4rt\PanelApp\Livewire\Timeline\ThreadReplies;
 use Illuminate\Support\ServiceProvider;
@@ -41,5 +42,6 @@ public function boot(): void
         Livewire::component('timeline-post-show', PostShow::class);
         Livewire::component('timeline-reply-composer', ReplyComposer::class);
         Livewire::component('timeline-thread-replies', ThreadReplies::class);
+        Livewire::component('timeline-reactions', Reactions::class);
     }
 }

app-modules/panel-app/tests/Feature/Timeline/ReactionsTest.php

@@ -0,0 +1,122 @@
+<?php
+
+declare(strict_types=1);
+
+use He4rt\Activity\Reaction\Enums\TimelineReaction;
+use He4rt\Activity\Reaction\Models\UserReaction;
+use He4rt\Activity\Timeline\Delegated\PostEntry;
+use He4rt\Activity\Timeline\Timeline;
+use He4rt\Identity\User\Models\User;
+use He4rt\PanelApp\Livewire\Timeline\Reactions;
+
+use function Pest\Livewire\livewire;
+
+beforeEach(function (): void {
+    $this->user = User::factory()->create();
+
+    $postEntry = PostEntry::factory()->create();
+    $this->post = Timeline::factory()->create([
+        'postable_type' => (new PostEntry)->getMorphClass(),
+        'postable_id' => $postEntry->id,
+    ]);
+});
+
+test('shows the six available reactions with icon and label', function (): void {
+    $this->actingAs($this->user);
+
+    livewire(Reactions::class, ['timelineId' => $this->post->id])
+        ->assertSee('Curtir')
+        ->assertSee('Amei')
+        ->assertSee('Haha')
+        ->assertSee('Parabéns')
+        ->assertSee('Fogo')
+        ->assertSee('Triste');
+});
+
+test('registers a reaction, updates state and dispatches the update event', function (): void {
+    $this->actingAs($this->user);
+
+    livewire(Reactions::class, ['timelineId' => $this->post->id])
+        ->call('reactWith', TimelineReaction::Love->value)
+        ->assertDispatched('timeline.reaction-updated')
+        ->assertSet('mine', TimelineReaction::Love->value)
+        ->assertSet('counts', [TimelineReaction::Love->value => 1]);
+
+    expect(UserReaction::query()
+        ->where('user_id', $this->user->id)
+        ->where('timeline_id', $this->post->id)
+        ->first()?->reaction)->toBe(TimelineReaction::Love);
+});
+
+test('replaces an existing reaction with another one', function (): void {
+    $this->actingAs($this->user);
+
+    UserReaction::factory()->create([
+        'user_id' => $this->user->id,
+        'timeline_id' => $this->post->id,
+        'reaction' => TimelineReaction::Like,
+    ]);
+
+    livewire(Reactions::class, [
+        'timelineId' => $this->post->id,
+        'counts' => [TimelineReaction::Like->value => 1],
+        'mine' => TimelineReaction::Like->value,
+    ])
+        ->call('reactWith', TimelineReaction::Laugh->value)
+        ->assertDispatched('timeline.reaction-updated')
+        ->assertSet('mine', TimelineReaction::Laugh->value)
+        ->assertSet('counts', [TimelineReaction::Laugh->value => 1]);
+
+    expect(UserReaction::query()
+        ->where('user_id', $this->user->id)
+        ->where('timeline_id', $this->post->id)
+        ->count())->toBe(1)
+        ->and(UserReaction::query()->first()?->reaction)->toBe(TimelineReaction::Laugh);
+});
+
+test('toggles off the current reaction when chosen again', function (): void {
+    $this->actingAs($this->user);
+
+    UserReaction::factory()->create([
+        'user_id' => $this->user->id,
+        'timeline_id' => $this->post->id,
+        'reaction' => TimelineReaction::Like,
+    ]);
+
+    livewire(Reactions::class, [
+        'timelineId' => $this->post->id,
+        'counts' => [TimelineReaction::Like->value => 1],
+        'mine' => TimelineReaction::Like->value,
+    ])
+        ->call('reactWith', TimelineReaction::Like->value)
+        ->assertDispatched('timeline.reaction-updated')
+        ->assertSet('mine', null)
+        ->assertSet('counts', []);
+
+    expect(UserReaction::query()
+        ->where('user_id', $this->user->id)
+        ->where('timeline_id', $this->post->id)
+        ->exists())->toBeFalse();
+});
+
+test('rejects a reaction outside the closed set', function (): void {
+    $this->actingAs($this->user);
+
+    livewire(Reactions::class, ['timelineId' => $this->post->id])
+        ->call('reactWith', 'xpto')
+        ->assertNotDispatched('timeline.reaction-updated');
+
+    expect(UserReaction::query()
+        ->where('timeline_id', $this->post->id)
+        ->exists())->toBeFalse();
+});
+
+test('blocks an unauthenticated user from reacting', function (): void {
+    livewire(Reactions::class, ['timelineId' => $this->post->id])
+        ->call('reactWith', TimelineReaction::Love->value)
+        ->assertNotDispatched('timeline.reaction-updated');
+
+    expect(UserReaction::query()
+        ->where('timeline_id', $this->post->id)
+        ->exists())->toBeFalse();
+});