Mark all read

CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 * Moved SVG icons into anonymous components for easier reuse / overwriting.[PR#35](https://github.com/mikebarlow/megaphone/pull/35)
 * Reworked notification type templates into components. [PR#35](https://github.com/mikebarlow/megaphone/pull/35)
+* Added "mark all as read" feature for unread notifications. [PR#37](https://github.com/mikebarlow/megaphone/pull/37)
 
 ## [2.0.0] - 2023-09-11
 

resources/views/popout.blade.php

@@ -10,9 +10,15 @@
         </div>
 
         @if ($unread->count() > 0)
-            <h2 tabindex="0" class="focus:outline-none text-sm leading-normal pt-8 border-b pb-2 border-gray-300 text-gray-600">
-                Unread Notifications
-            </h2>
+            <div class="border-b pb-2 border-gray-300 text-gray-600 flex justify-between">
+                <h2 class="focus:outline-none text-sm leading-normal pt-8">
+                    Unread Notifications
+                </h2>
+
+                @if ($unread->count() > 1)
+                    <button class="focus:outline-none text-sm leading-normal pt-8 hover:text-indigo-700" wire:click="markAllRead()">Mark all as read</button>
+                @endif
+            </div>
 
             @foreach ($unread as $announcement)
                 <div class="w-full p-3 mt-4 bg-white rounded flex flex-shrink-0 {{ $announcement->read_at === null ? "drop-shadow shadow border" : ""  }}">

src/Livewire/Megaphone.php

@@ -59,4 +59,15 @@ public function markAsRead(DatabaseNotification $notification)
         $notification->markAsRead();
         $this->loadAnnouncements($this->getNotifiable());
     }
+
+    public function markAllRead()
+    {
+        DatabaseNotification::query()
+            ->where('notifiable_type', config('megaphone.model'))
+            ->where('notifiable_id', $this->notifiableId)
+            ->whereNull('read_at')
+            ->update(['read_at' => now()]);
+
+        $this->loadAnnouncements($this->getNotifiable());
+    }
 }

tests/MegaphoneComponentTest.php

@@ -100,6 +100,60 @@
         ->assertSet('announcements', $user->readNotifications);
 });
 
+it('can mark all notifications as read', function () {
+    $this->actingAs(
+        $user = $this->createTestUser()
+    );
+
+    $this->createTestNotification(
+        $user,
+        \MBarlow\Megaphone\Types\General::class
+    );
+    $this->createTestNotification(
+        $user,
+        \MBarlow\Megaphone\Types\Important::class
+    );
+
+    $this->livewire(Megaphone::class)
+        ->call('markAllRead')
+        ->assertSet('unread', $user->announcements()->get()->whereNull('read_at'))
+        ->assertSet('announcements', $user->readNotifications);
+});
+
+it('doesn\'t shows mark all as read if only 1 or less', function () {
+    $this->actingAs(
+        $user = $this->createTestUser()
+    );
+
+    $this->createTestNotification(
+        $user,
+        \MBarlow\Megaphone\Types\General::class
+    );
+
+    $this->livewire(Megaphone::class)
+        ->assertViewIs('megaphone::megaphone')
+        ->assertDontSeeHtml('<button class="focus:outline-none text-sm leading-normal pt-8 hover:text-indigo-700" wire:click="markAllRead()">Mark all as read</button');
+});
+
+it('shows mark all as read if more than 1 notification', function () {
+    $this->actingAs(
+        $user = $this->createTestUser()
+    );
+
+    $this->createTestNotification(
+        $user,
+        \MBarlow\Megaphone\Types\General::class
+    );
+    $this->createTestNotification(
+        $user,
+        \MBarlow\Megaphone\Types\Important::class
+    );
+
+    $this->livewire(Megaphone::class)
+        ->assertViewIs('megaphone::megaphone')
+        ->assertSeeHtml('<button class="focus:outline-none text-sm leading-normal pt-8 hover:text-indigo-700" wire:click="markAllRead()">Mark all as read</button');
+});
+
 it('can render the megaphone component with general notification', function () {
     $this->actingAs(
         $user = $this->createTestUser()