Reusable sorting & pagination logic for multiple Livewire components. Livewire 3

Hello everyone

Goal: Create reusable sorting and pagination logic for multiple Livewire components.

Description of the problem:

RecipeList.php is responsible for filtering recipes based on URI parameters, as well as sorting and paginating them.

After creating RecipeList.php, I needed to create 2 more components to display lists of recipes for liked & saved recipes. Each recipe list should have sorting and pagination logic, and I'm wondering: is it possible to reuse the sorting and pagination logic to avoid repetition in these three components?

Which logic do the components have in common?

• sorting
• pagination

What's different about the components?

• different recipe lists

Code:

RecipeList.php (short version):

class RecipeList extends Component
{
    public $sort = 'popularity';

    public $dish_category = '';
    public $dish_subcategory = '';
    public $cuisine = '';
    public $menu = '';

    protected $queryString = [
        'dish_category',
        'dish_subcategory',
        'cuisine',
        'menu',
    ];

    public function mount(RecipeFilterRequest $request): void
    {
        // mount component
    }

    public function render()
    {
        $recipes = $this->getFilteredRecipes();
        return view('livewire.recipe-list', ['recipes' => $recipes]);
    }

    public function getFilteredRecipes(): LengthAwarePaginator
    {
        // Filter logic using URL parameters
        $query = Recipe::with('...');

        // Sort filtered recipes using $this->sort
        if ($this->sort == 'popularity') {
            $query->orderByDesc('likesCount');
        } elseif {
            // order logic for newest & oldest
           // ...
        }

        return $query->paginate(3);
    }
}

recipe-list.blade.php:

{{-- Dropdown filter --}}
<span>Sort by:</span>
<select name="sorting" wire:model.live="sort">
    <option value="popularity">By Popularity</option>
    <option value="newest">Newest</option>
    <option value="oldest">Oldest</option>
</select>

{{-- Pagination --}}
<div>
    {{ $recipes->links(data: ['scrollTo' => false]) }}
</div>

{{-- Recipes--}}
@forelse($recipes as $recipe)
    <div wire:key="recipe-{{ $recipe->id }}">
        <x-recipe-card :recipe="$recipe"/>
    </div>
@empty
    <span>empty</span>
@endforelse

What options do I have to avoid repeating myself & re-writing the same code for sorting & pagination?

Would be grateful for your help