Add likes to comments

app/Livewire/Comment.php

@@ -1,10 +1,17 @@
 <?php
 
+
 namespace App\Livewire;
 
+use App\Models\User;
+
 use Livewire\Component;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Cache;
 use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 
+use Maize\Markable\Models\Like;
+
 class Comment extends Component
 {
     use AuthorizesRequests;
@@ -13,6 +20,10 @@ class Comment extends Component
 
     public $isReplying = false;
 
+    public $likeCount = 0;
+
+    public $liked = false;
+
     public $replyState = [
         'body' => ''
     ];
@@ -85,6 +96,34 @@ class Comment extends Component
         $this->dispatch('refresh')->self(); 
     }
 
+    public function like()
+    {
+        if (! Auth::check()) {
+            return;
+        }
+
+        Like::toggle($this->comment, User::where('id', Auth::user()->id)->firstOrFail());
+
+        Cache::forget('commentLikes'.$this->comment->id);
+
+        if ($this->liked) {
+            $this->liked = false;
+            $this->likeCount--;
+            return;
+        }
+
+        $this->liked = true;
+        $this->likeCount++;
+    }
+
+    public function mount()
+    {
+        if (Auth::check()) {
+            $this->likeCount = $this->comment->likeCount();
+            $this->liked = Like::has($this->comment, User::where('id', Auth::user()->id)->firstOrFail());
+        }
+    }
+
     public function render()
     {
         return view('livewire.comment');

app/Models/Comment.php

@@ -8,9 +8,16 @@ use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 
+use Maize\Markable\Markable;
+use Maize\Markable\Models\Like;
+
 class Comment extends Model
 {
-    use HasFactory, SoftDeletes;
+    use HasFactory, SoftDeletes, Markable;
+
+    protected static $marks = [
+        Like::class
+    ];
 
     /**
      * The attributes that are mass assignable.
@@ -58,4 +65,12 @@ class Comment extends Model
             ? $this->parent->depth() + 1
             : 0;
     }
+
+    /**
+     * Get cached like count
+     */
+    public function likeCount(): int
+    {
+        return cache()->remember('commentLikes' . $this->id, 300, fn() => $this->likes->count());
+    }
 }

resources/views/livewire/comment.blade.php

@@ -37,10 +37,28 @@
                     <div class="text-gray-700 dark:text-gray-200">{!! $comment->presenter()->markdownBody() !!}</div>
                 @endif
             </div>
-            <div class="mt-2 space-x-2">
+            <div class="mt-2 space-x-2 flex flex-row">
+                @guest
+                    <span data-te-toggle="tooltip" title="Please login to like the episode" class=" text-gray-800 cursor-pointer dark:text-gray-200">
+                        <i class="fa-regular fa-heart pr-[4px]"></i> {{ $comment->likeCount() }}
+                    </span>
+                @endguest
+
+                @auth
+                    <!-- Like Button -->
+                    <button class="text-xl text-gray-800 dark:text-gray-200 leading-tight cursor-pointer whitespace-nowrap" wire:click="like">
+                        @if ($liked)
+                        <i class="fa-solid fa-heart pr-[4px] text-rose-600"></i> {{ $likeCount }}
+                        @else
+                        <i class="fa-regular fa-heart pr-[4px]"></i> {{ $likeCount }}
+                        @endif
+                    </button>
+                @endauth
+
                 <span class="text-gray-500 dark:text-gray-300 font-medium">
                     {{ $comment->presenter()->relativeCreatedAt() }}
                 </span>
+
                 @auth
                     @if ($comment->depth() < 2)
                         <button wire:click="$toggle('isReplying')" type="button" class="text-gray-900 dark:text-gray-100 font-medium">