Hello I’m making a project where I have a sub-header where you can apply filters for posts and this filters go to a grid parent component where the posts appear. Right now it’s working what I have but I would like to know if i’m doing it well since now i’m trying to add Pagination and it’s giving me a headache to add the Pagination with what I have already built.

I just want to know if this is the correct way and i’m in the good path since I didn’t find another way. Right now, I have the filters of type, province, town and search term which are in a child component of sub-header. This filters goes to the parent component (grid) using dispatch and only the search term applies when using the submit button, the rest of filters apply instantly.

I’m using an $applyFilters function to update the posts depending on the filters on the grid but this way of using this function is driving me crazy when I try to add Pagination to the posts.

Am I doing it good? Or should I approach this another way to be able to add pagination later?

<?php

use function LivewireVolt{state, uses, on, mount, computed};

use AppModelsPost;

state([
    'posts' => collect(),
]);

state([
    'searchTerm' => '',
])->url(as: 'search');
state(['selectedProvince'])->url(as: 'province');
state(['selectedTown'])->url(as: 'town');
state(['selectedType'])->url(as: 'type');

mount(function () {
    $this->applyFilters();
});

$applyFilters = function () {
    $query = Post::query();

    $query->when($this->searchTerm, function ($query) {
        $query->where(function ($query) {
            $query->where('title', 'like', "%{$this->searchTerm}%")->orWhere('description', 'like', "%{$this->searchTerm}%")->orWhere('phone', 'like', "%{$this->searchTerm}%");
        });
    });

    $query->when($this->selectedType, function ($query) {
        $query->where('type_id', $this->selectedType);
    });

    $query->when($this->selectedProvince, function ($query) {
        $query->where('province_id', $this->selectedProvince);
    });

    $query->when($this->selectedTown, function ($query) {
        $query->where('town_id', $this->selectedTown);
    });

    $this->posts = $query->get();
};

on([
    'type-selected' => function ($typeId) {
        $this->selectedType = $typeId;
        $this->applyFilters();
    },
]);

on([
    'province-selected' => function ($provinceId) {
        if ($this->selectedProvince !== $provinceId) {
            $this->selectedTown = null;
            $this->searchTerm = '';
        }
        $this->selectedProvince = $provinceId;
        $this->applyFilters();
    },
]);

on([
    'town-selected' => function ($townId) {
        $this->selectedTown = $townId;
        $this->applyFilters();
    },
]);

on([
    'post-searched' => function ($searchTerm) {
        $this->searchTerm = $searchTerm;
        $this->applyFilters();
    },
]);

?>

<div class="block">
    <div class="flex-grow bg-primary-black-darker/50 p-4 mx-auto w-full rounded-md mb-8">
        <livewire:sub-header :selectedType="$selectedType"
                             :selectedProvince="$selectedProvince"
                             :selectedTown="$selectedTown"
                             :posts="$posts" />
    </div>
    <div class="bg-primary-black-darker/50 p-4 container w-full rounded-lg grid grid-cols-2 gap-4">
        @forelse ($this->posts as $post)
        <a class="relative flex bg-primary-black-darker/50 border border-gray-500/10 p-4 rounded-md mb-4 w-full hover:border-gray-500/30 transition hover:-translate-y-1 hover:bg-primary-black-darker/40"
           href="{{ route('posts.show', $post->slug) }}"
           wire:navigate>
            <div class="p-4 absolute -top-8 right-0">
                <p
                   class="uppercase text-[10px] rounded-md font-semibold w-full border py-1 px-2 bg-primary-red text-primary-white">
                    {{ $post->type->name }}
                </p>
            </div>
            <div class="w-[400px] items-center justify-center">
                <img src="{{ $post->main_image->image_path }}"
                     alt="{{ $post->title }}"
                     class="w-[200px] h-48 object-cover rounded-md">
            </div>
            <div class="flex flex-col justify-between px-2 pb-8">
                <h3 class="text-pretty text-lg font-bold justify-self-start tracking-wide">
                    {{ $post->title }}</h3>
                <p class="text-pretty text-base line-clamp-3 tracking-normal">{{ $post->description }}</p>
            </div>
            <div class="p-4 mt-8 absolute bottom-0 right-0">
                <p class="uppercase text-xs font-semibold w-full opacity-40">
                    {{ $post->created_at->diffForHumans() }}
                </p>
            </div>
        </a>
        @empty
        <div class="col-span-2 flex items-center justify-center text-primary-white/70 text-center">
            No se han encontrado posts
        </div>
        @endforelse
    </div>
</div>

Right now this is working but without pagination and I was wondering if I’m doing it well since when I try to add the it’s driving me crazy. Maybe i’m doing something wrong that needs to be changed before adding pagination? If you need the child component to see where the filters come from I will share it right away.

Remember i’m using Laravel Livewire with Volt package.