Likes from larval to livewire with broadcast

Hi I want to have a polymorphic relationship for likes. Now it is only for tweets. sometime ago I made a polymorphic relationship for likes. Now I want to use this in livewire component and after updating the likes I want to broadcast it. I don't know how exactly I must do it. How to convert my controller to a livewire component and how to add the broadcasting.

This is my controller:

<?php

namespace App\Http\Controllers;

use App\Models\Like;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Illuminate\Database\Eloquent\Relations\Relation;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Gate;

class LikeController extends Controller
{
   
   public function store(Request $request, string $type, int $id)
    {
        $likeable = $this->findLikeable($type, $id);

        $likeable->likes()->create([
            'user_id' => $request->user()->id,
        ]);

        $likeable->increment('likes_count');

        return back();
    }

    protected function findLikeable(string $type, int $id): Model
    {
        $modelName = Relation::getMorphedModel($type);

        if ($modelName === null) {
            throw new ModelNotFoundException;
        }

        $likeable = $modelName::findOrFail($id);

        return $likeable;
    }

    public function destroy(Request $request, string $type, int $id)
    {
        $likeable = $this->findLikeable($type, $id);

        $likeable->likes()->whereBelongsTo($request->user())->delete();

        $likeable->decrement('likes_count');

        return back();
    }
}

I also have an Event for Broadcast.

<?php

namespace App\Events;

use App\Models\Tweet;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class TweetLikesUpdated implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(public Tweet $tweet)
    {
        //
    }

    public function broadcastWith(): array
    {
        return [
            'tweet' => $this->tweet->id,
            'likes' => $this->tweet->likes->count(),
        ];
    }

    public function broadcastOn(): array
    {
        return [
            new PrivateChannel('tweets'),
        ];
    }
}
```php

Who can help me

LaryAI

1 year ago

Level 58

To convert your existing controller logic into a Livewire component and add broadcasting, you'll need to follow these steps:

Create a Livewire Component: First, create a Livewire component that will handle the likes functionality.
Move Logic to Livewire Component: Transfer the logic from your controller to the Livewire component.
Broadcast the Event: Use the existing event to broadcast changes when a like is added or removed.

Here's how you can achieve this:

Step 1: Create a Livewire Component

Run the following command to create a Livewire component:

php artisan make:livewire LikeComponent

Step 2: Implement the Logic in the Livewire Component

Edit the LikeComponent.php file to include the logic for liking and unliking, and dispatch the event for broadcasting.

<?php

namespace App\Http\Livewire;

use App\Events\TweetLikesUpdated;
use App\Models\Like;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Illuminate\Database\Eloquent\Relations\Relation;
use Livewire\Component;

class LikeComponent extends Component
{
    public $type;
    public $id;
    public $likesCount;

    public function mount($type, $id)
    {
        $this->type = $type;
        $this->id = $id;
        $this->likesCount = $this->findLikeable($type, $id)->likes()->count();
    }

    public function like()
    {
        $likeable = $this->findLikeable($this->type, $this->id);

        $likeable->likes()->create([
            'user_id' => auth()->id(),
        ]);

        $likeable->increment('likes_count');
        $this->likesCount++;

        broadcast(new TweetLikesUpdated($likeable))->toOthers();
    }

    public function unlike()
    {
        $likeable = $this->findLikeable($this->type, $this->id);

        $likeable->likes()->whereBelongsTo(auth()->user())->delete();

        $likeable->decrement('likes_count');
        $this->likesCount--;

        broadcast(new TweetLikesUpdated($likeable))->toOthers();
    }

    protected function findLikeable(string $type, int $id): Model
    {
        $modelName = Relation::getMorphedModel($type);

        if ($modelName === null) {
            throw new ModelNotFoundException;
        }

        return $modelName::findOrFail($id);
    }

    public function render()
    {
        return view('livewire.like-component');
    }
}

Step 3: Create the Blade View

Create a Blade view for the Livewire component at resources/views/livewire/like-component.blade.php:

<div>
    <button wire:click="like">Like</button>
    <button wire:click="unlike">Unlike</button>
    <span>{{ $likesCount }} likes</span>
</div>

Step 4: Update Your Event

Ensure your TweetLikesUpdated event is set up to broadcast on the correct channel. You might need to adjust the channel name based on your application logic.

Step 5: Use the Component in Your Blade Template

Include the Livewire component in your Blade template where you want the like functionality to appear:

<livewire:like-component :type="$type" :id="$id" />

Step 6: Set Up Broadcasting

Ensure your broadcasting is configured correctly in config/broadcasting.php and that you have a broadcasting service like Pusher or Laravel Echo set up to listen for the events.

This setup should allow you to manage likes using Livewire and broadcast updates in real-time. Make sure to test thoroughly and adjust the channel names and event data as needed for your specific application.