How to create a comment system using Laravel Livewire: Part 4

This is the last part of the Comment System topic. In the previous article, I talked about the Comments. In this article, we will discuss the CommentItem component of the entire process.

The CommentItem Component

This component has two files. One is the CommentItem class and comment-item.blade.php view file. We will talk about the class.

// app/Http/Livewire/CommentItem.php

namespace App\Http\Livewire;
 
use App\Models\Comment;
use Livewire\Component;
 
class CommentItem extends Component
{
    public Comment $comment;
    public bool $replying = false;
    public bool $editing = false;

    public $listeners = [
        'commentUpdated'   => 'commentUpdated',
        'commentCreated'   => 'commentCreated',
        'hideCommentForm'  => 'hideCommentForm'
    ];

    public function mount(Comment $comment)
    {
        $this->comment = $comment;
    }

    public function render()
    {
        return view('livewire.comment-item');
    }

    public function startReplying()
    {
        $this->replying = true;
        $this->editing = false;
    }

    public function cancelReplying()
    {
        $this->replying = false;
    }

    private function commentUpdated()
    {
        $this->editing = false;
    }

    public function hideCommentForm()
    {
        $this->cancelReplying();
        $this->cancelEditing();
    }

    public function deleteComment()
    {
        $user = auth()->user();
        if (!$user) {
            return $this->redirect(route('login'));
        }
        if ($user->id != $this->comment->user_id) {
            return response('You are allowed to perform this action.')->status(403);
        }

        $id = $this->comment->id;
        $this->comment->delete();

        $this->emitUp('commentDeleted', $id);
    }

    private function commentCreated(int $replyId)
    {
        $this->cancelReplying();
    }
}

The CommentItem block will render a single block of comments in the Comment System. This also handles the comment delete functionality 

Properties

This class declares two public properties including $comment, $replying, $editing, and $listeners.

• • $comment: An instance of the Comment class. This property is likely used to store the data of a specific comment.
  • $replying: A boolean flag indicating whether the user is currently replying to the comment. It is initialized as false and can be toggled to true or false as needed.
  • $editing: A boolean flag indicating whether the user is currently editing the comment. It is also initialized as false and can be toggled to true or false.
  • $listeners: An array property that defines the event listeners for this component. It specifies which methods should be called when certain events occur. The keys in the array represent the event names, and the values are the corresponding method names in the CommentItem class that should handle those events. In this case:
    • 'commentUpdated' event will trigger the commentUpdated() method.
    • 'commentCreated' event will trigger the commentCreated() method.
    • 'hideCommentForm' event will trigger the hideCommentForm() method.

startReplying method

public function startReplying()
{
    $this->replying = true;
    $this->editing = false;
}

The startReplying() method is used to initiate the replying state. It sets the $replying property to true and ensures that the $editing property is false, indicating that the user is not simultaneously editing the comment while starting to reply.

cancelReplying method

public function cancelReplying()
{
    $this->replying = false;
}

The cancelReplying() method is used to cancel the replying state. It sets the $replying property to false, indicating that the user has decided not to proceed with the reply.

commentUpdated method

private function commentUpdated()
{
    $this->editing = false;
}

the commentUpdated method is responsible for handling events emitted from the CommentCreate component when a comment is updated. It sets the $editing property to false, indicating that the user has decided not to proceed with the edit. 

hideCommentForm method

 public function hideCommentForm()
 {
     $this->cancelReplying();
     $this->cancelEditing();
 }

the hideCommentForm method is responsible for handling events emitted from the CommentCreate component when a comment is updated or a reply is made. It calls the cancelReplying and cancelEditing methods

deleteComment method

public function deleteComment()
{
     $user = auth()->user();
     if (!$user) {
        return $this->redirect(route('login'));
     }
     if ($user->id != $this->comment->user_id) {
         return response('You are allowed to perform this action.')->status(403);
     }

     $id = $this->comment->id;
     $this->comment->delete();
     $this->emitUp('commentDeleted', $id);
}

The deleteComment() method is responsible for deleting a comment. It performs checks to ensure that the user is logged in and has permission to delete the comment. If the checks pass, it deletes the comment, emits an event to the Comments component about the deletion, and completes its execution.

1. The deleteComment() method is invoked to delete a comment.
2. It starts by getting the currently authenticated user using auth()->user() and assigning it to the $user variable.
3. It checks if the $user variable is falsy, which means the user is not logged in.
   • If the user is not logged in, it redirects them to the login page using the redirect() function and the route() helper to generate the login route.
4. If the user is logged in, it checks if the ID of the logged-in user ($user->id) is not equal to the user ID associated with the comment ($this->comment->user_id).
   • If the condition is true, it returns a response with the message "You are allowed to perform this action." and the HTTP status code 403 (Forbidden). This means that the user does not have permission to delete the comment.
5. If the conditions for the user check pass, it proceeds with deleting the comment.
   • It assigns the ID of the comment to be deleted ($this->comment->id) to the $id variable.
   • It deletes the comment by calling the delete() method on the $this->comment object.
   • It emits an event named 'commentDeleted' with the ID of the deleted comment ($id) to the Comments component about the deletion.
6. After deleting the comment and emitting the event, the method completes its execution.

Finally, we were able to complete the topic. This is really huge article. Hope you understand it properly. Let me know your opinion about this article.