Fix deleting children comments as well on comment delete and update c…

…omment count properly.

app/Models/Comment.php

@@ -42,4 +42,24 @@ public function isOwner($userId)
     {
         return $this->user_id == $userId;
     }
+
+    public static function getAllChildrenComments($comment): array
+    {
+        $comments = Comment::query()->where('post_id', $comment->post_id)->get();
+        $result = [$comment];
+        self::_getAllChildrenComments($comments, $comment->id, $result);
+
+        return $result;
+    }
+
+    private static function _getAllChildrenComments($comments, $parentId, &$result = []): void
+    {
+        foreach ($comments as $comment) {
+            if ($comment->parent_id === $parentId) {
+                $result[] = $comment;
+                // Find all comment which has parentId as $comment->id
+                self::_getAllChildrenComments($comments, $comment->id, $result);
+            }
+        }
+    }
 }

database/migrations/2023_12_23_113538_add_foreign_key_on_comments_table_for_parent_id.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('comments', function(Blueprint $table) {
+            $table->foreign('parent_id')
+                  ->references('id')
+                  ->on('comments')
+                  ->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('comments', function(Blueprint $table) {
+            $table->dropForeign(['parent_id']);
+        });
+
+    }
+};

resources/js/Components/app/CommentList.vue

@@ -54,15 +54,14 @@ function deleteComment(comment) {
     }
     axiosClient.delete(route('comment.delete', comment.id))
         .then(({data}) => {
-            console.log(props.data.comments)
 
             const commentIndex = props.data.comments.findIndex(c => c.id === comment.id)
             props.data.comments.splice(commentIndex, 1)
             console.log(props.data.comments)
             if (props.parentComment) {
-                props.parentComment.num_of_comments--;
+                props.parentComment.num_of_comments -= data.deleted;
             }
-            props.post.num_of_comments--;
+            props.post.num_of_comments-= data.deleted;
             emit('commentDelete', comment)
         })
 }
@@ -106,7 +105,7 @@ function onCommentDelete(comment) {
 </script>
 
 <template>
-    <div class="flex gap-2 mb-3">
+    <div v-if="authUser" class="flex gap-2 mb-3">
         <Link :href="route('profile', authUser.username)">
             <img :src="authUser.avatar_url"
                  class="w-[40px] rounded-full border border-2 transition-all hover:border-blue-500"/>
@@ -183,6 +182,9 @@ function onCommentDelete(comment) {
                 </Disclosure>
             </div>
         </div>
+        <div v-if="!data.comments.length" class="py-4 text-center dark:text-gray-100">
+            There are no comments.
+        </div>
     </div>
 </template>