Blog Post Comments

app/Http/Livewire/Blog/CommentLike.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace App\Http\Livewire\Blog;
+
+use App\Models\Comment;
+use Livewire\Component;
+
+class CommentLike extends Component
+{
+    public Comment $comment;
+    public int $count;
+    public $user;
+    public bool $liked;
+
+    public function mount(Comment $comment)
+    {
+        $this->comment = $comment;
+        $this->user = auth()->user();
+        $this->count = $this->comment->likers()->count();
+        $this->liked = $this->user ? $this->comment->isLikedBy($this->user) : false;
+    }
+
+    public function like()
+    {
+        // Redirect guest to login page
+        if (auth()->guest()) {
+            return redirect()->route('login');
+        }
+        // else if user; like
+        $this->user->toggleLike($this->comment);
+        $this->count = $this->comment->likers()->count();
+        $this->liked = $this->comment->isLikedBy($this->user);
+    }
+
+    public function render()
+    {
+        return view('livewire.blog.comment-like');
+    }
+}

app/Http/Livewire/Blog/CommentModal.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Http\Livewire\Blog;
+
+use App\Models\Post;
+use LivewireUI\Modal\ModalComponent;
+
+class CommentModal extends ModalComponent
+{
+    public int|Post $post;
+    public $body;
+    public $parentComment = null;
+
+    public function mount(int|Post $post, $parentComment)
+    {
+        $this->post = Post::find($post);
+        $this->body = '';
+        $this->parentComment = $parentComment;
+    }
+
+    public function save()
+    {
+        $this->validate([
+            'body' => ['required', 'string', 'min:10', 'max:255'],
+        ]);
+
+        $commentData = [
+            'title' => null,
+            'body' => $this->body,
+        ];
+
+        if ($this->parentComment) {
+            $this->parentComment = \AliBayat\LaravelCommentable\Comment::find($this->parentComment);
+        }
+
+        $this->post->comment($commentData, auth()->user(), $this->parentComment);
+
+        $this->emit('commentAdded');
+
+        $this->closeModal();
+    }
+
+    public function render()
+    {
+        return view('livewire.blog.comment-modal');
+    }
+}

app/Http/Livewire/Blog/CommentSection.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Livewire\Blog;
+
+use App\Models\Post;
+use Livewire\Component;
+
+class CommentSection extends Component
+{
+    public int|Post $post;
+    public $comments;
+
+    protected $listeners = [
+        'commentAdded' => 'update',
+    ];
+
+    public function mount(int|Post $post)
+    {
+        if ($post instanceof Post) {
+            $this->post = $post;
+        } else {
+            $this->post = Post::find($post);
+        }
+        $this->comments = $this->post->comments;
+    }
+
+    public function update()
+    {
+        $this->comments = $this->post->comments;
+    }
+
+    public function render()
+    {
+        return view('livewire.blog.comment-section');
+    }
+}

app/Models/Comment.php

@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Models;
+
+use Overtrue\LaravelLike\Traits\Likeable;
+use Spatie\Activitylog\LogOptions;
+use Spatie\Activitylog\Traits\LogsActivity;
+
+class Comment extends \AliBayat\LaravelCommentable\Comment
+{
+    use LogsActivity;
+    use Likeable;
+
+    /**
+     * The attributes that should be logged for the user.
+     *
+     * @return array
+     */
+    public function getActivitylogOptions(): LogOptions
+    {
+        return LogOptions::defaults()
+            ->logFillable()
+            ->logOnlyDirty();
+    }
+}

app/Models/Post.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use AliBayat\LaravelCommentable\Commentable;
 use Spatie\Tags\HasTags;
 use App\Models\BaseModel;
 use Illuminate\Support\Str;
@@ -21,6 +22,7 @@ class Post extends BaseModel implements Viewable
     use SoftDeletes;
     use HasTags;
     use LogsActivity;
+    use Commentable;
 
     protected $removeViewsOnDelete = true;
 

composer.json

@@ -10,10 +10,17 @@
         "laravel"
     ],
     "license": "gpl-3.0-only",
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/DanielRTRD/Laravel-Commentable"
+        }
+    ],
     "require": {
         "php": "^8.0.2",
         "akaunting/laravel-language": "^1.0",
         "alibayat/laravel-categorizable": "1.0.x-dev",
+        "alibayat/laravel-commentable": "1.1.x-dev",
         "anlutro/l4-settings": "^1.0",
         "assada/laravel-achievements": "^2.3",
         "betterapp/laravel-db-encrypter": "^1.0",

config/laravel-commentable.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Laravel Commentable Package by Ali Bayat.
+ */
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Eloquent Model
+    |--------------------------------------------------------------------------
+    */
+
+    'model' => \App\Models\Comment::class,
+];

database/migrations/2022_04_03_125632_create_comments_table.php

@@ -0,0 +1,33 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Laravel Commentable Package by Ali Bayat.
+ */
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Kalnoy\Nestedset\NestedSet;
+
+class CreateCommentsTable extends Migration
+{
+    public function up()
+    {
+        Schema::create('comments', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('title')->nullable();
+            $table->boolean('active')->default(false);
+            $table->text('body');
+            $table->morphs('commentable');
+            $table->morphs('creator');
+            NestedSet::columns($table);
+            $table->timestamps();
+        });
+    }
+
+    public function down()
+    {
+        Schema::dropIfExists('comments');
+    }
+}

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/app.js": "/js/app.js?id=b9b4c7cb5c903535c15cb23812e23dda",
-    "/css/app.css": "/css/app.css?id=bd2475c578a1582bed4a14b802932d12"
+    "/css/app.css": "/css/app.css?id=6ccef9c7f3126ce34563c22ae7535914"
 }

resources/views/blog/index.blade.php

@@ -33,7 +33,7 @@
 						</p>
 					</div>
 				</div>
-				
+
 			</div>
 
 			<div class="grid w-full grid-cols-1 gap-8 sm:max-w-2xl">
@@ -84,6 +84,10 @@
 												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
 												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
 											</svg> {{ App\Helpers\NumberHelper::nearestK(views($post)->count()) }}
+
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                                <path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
+                                            </svg> {{ App\Helpers\NumberHelper::nearestK($post->commentCount()) }}
 										</p>
 									</div>
 								</div>
@@ -99,4 +103,4 @@
 			</div>
 		</div>
 	</div>
-</x-guest-layout>
+</x-guest-layout>

resources/views/blog/show.blade.php

@@ -7,8 +7,8 @@
                 </a>
             </div>
 
-            <div class="w-full p-6 pt-4 mt-6 mb-10 overflow-hidden bg-white rounded-lg shadow-md sm:max-w-2xl dark:bg-gray-800">
-                
+            <div class="w-full p-6 pt-4 mt-6 mb-8 overflow-hidden bg-white rounded-lg shadow-md sm:max-w-2xl dark:bg-gray-800">
+
                 <ul class="flex mb-8 text-sm text-gray-500 lg:text-base">
                     <li class="inline-flex items-center">
                         <a href="{{ route('home') }}">@lang('Home')</a>
@@ -54,6 +54,10 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                     </svg> {{ App\Helpers\NumberHelper::nearestK(views($post)->count()) }}
+
+                    <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
+                    </svg> {{ App\Helpers\NumberHelper::nearestK($post->commentCount()) }}
                 </p>
 
                 <div class="flex items-center justify-center pb-8 mt-4 text-xs leading-5 text-center border-b border-gray-100 dark:border-gray-700">
@@ -75,6 +79,7 @@
                     {!! Str::of($post->body)->markdown() !!}
                 </article>
             </div>
+            @livewire('blog.comment-section', ['post' => $post])
         </div>
     </div>
 </x-guest-layout>

resources/views/layouts/guest.blade.php

@@ -14,6 +14,7 @@
 
 		<!-- Styles -->
 		<link rel="stylesheet" href="{{ mix('css/app.css') }}">
+        @livewireStyles
 
 		<!-- Scripts -->
 		<script src="{{ mix('js/app.js') }}" defer></script>
@@ -45,7 +46,8 @@ function $buo_f(){
 
 		{{ $slot }}
 
-		@livewireScripts
+        @livewireScripts
+        @livewire('livewire-ui-modal')
 
 		<script>
             var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');