Skip to content

Instantly share code, notes, and snippets.

@Log1x

Log1x/PostSearch.php

Last active October 13, 2024 11:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Log1x/d45d69fe3b943768457fb3e9945416e5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Log1x/d45d69fe3b943768457fb3e9945416e5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Log1x revised this gist Jan 4, 2024. No changes.
  2. Log1x revised this gist Jan 4, 2024. 1 changed file with 1 addition and 5 deletions.
    6 changes: 1 addition & 5 deletions post-search.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -14,11 +14,7 @@ class="w-full p-3 text-lg border border-gray-300 rounded"

    @if ($posts)
    <div class="mt-4">
    @if ($search)
    Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total for "{{ $search }}".
    @else
    Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total.
    @endif
    Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total{{ $search ? " for {$search}." : '.' }}
    </div>

    <ul class="mt-4 space-y-2">
  3. Log1x revised this gist Jan 4, 2024. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions PostSearch.php
    View file
    Original file line number Diff line number Diff line change
    @@ -4,13 +4,10 @@

    use Livewire\Attributes\Url;
    use Livewire\Component;
    use Livewire\WithPagination;
    use WP_Query;

    class PostSearch extends Component
    {
    use WithPagination;

    /**
    * The posts.
    */
  4. Log1x revised this gist Jan 4, 2024. 1 changed file with 9 additions and 0 deletions.
    9 changes: 9 additions & 0 deletions front-page.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    @extends('layouts.app')

    @section('content')
    <x-hero title="Welcome to Sage" />

    <x-container>
    <livewire:post-search lazy />
    </x-container>
    @endsection
  5. Log1x created this gist Jan 4, 2024.
    108 changes: 108 additions & 0 deletions PostSearch.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    <?php

    namespace App\Livewire;

    use Livewire\Attributes\Url;
    use Livewire\Component;
    use Livewire\WithPagination;
    use WP_Query;

    class PostSearch extends Component
    {
    use WithPagination;

    /**
    * The posts.
    */
    public array $posts = [];

    /**
    * The WordPress query.
    */
    protected ?WP_Query $query;

    /**
    * The post range.
    */
    public string $range = '';

    /**
    * The search query.
    */
    #[Url('query')]
    public string $search = '';

    /**
    * The page.
    */
    #[Url]
    public int $page = 1;

    /**
    * The total posts.
    */
    public int $totalPosts = 0;

    /**
    * The total pages.
    */
    public int $totalPages = 1;

    /**
    * The amount of posts to show per page.
    */
    protected int $amount = 5;

    /**
    * Render the component.
    *
    * @return \Illuminate\View\View
    */
    public function render()
    {
    $this->query = new WP_Query([
    'post_type' => 'post',
    'post_status' => 'publish',
    'paged' => $this->page,
    'posts_per_page' => $this->amount,
    's' => $this->search,
    ]);

    $this->totalPages = $this->query->max_num_pages ?? 1;
    $this->totalPosts = $this->query->found_posts ?? 0;

    $this->page = min(max(1, $this->page), $this->totalPages);

    $start = ($this->page - 1) * $this->amount + 1;
    $end = min($this->totalPosts, $this->page * $this->amount);

    $this->range = "{$start}-{$end}";

    $this->posts = $this->query ? collect($this->query->posts)
    ->map(fn ($post) => [
    'title' => get_the_title($post),
    'url' => get_permalink($post),
    ])->all() : [];

    return view('livewire.post-search', [
    'hasPrevious' => $this->page > 1,
    'hasNext' => $this->page < $this->totalPages,
    ]);
    }

    /**
    * Go to the next page.
    */
    public function nextPage()
    {
    $this->page = min($this->totalPages, $this->page + 1);
    }

    /**
    * Go to the previous page.
    */
    public function previousPage()
    {
    $this->page = max(1, $this->page - 1);
    }
    }
    56 changes: 56 additions & 0 deletions post-search.blade.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    <div>
    <input
    wire:model.live="search"
    type="text"
    placeholder="Search for a post..."
    class="w-full p-3 text-lg border border-gray-300 rounded"
    >

    @empty($posts)
    <div class="mt-4">
    No posts found.
    </div>
    @endempty

    @if ($posts)
    <div class="mt-4">
    @if ($search)
    Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total for "{{ $search }}".
    @else
    Showing <b>{{ $range }}</b> posts out of <b>{{ $totalPosts }}</b> total.
    @endif
    </div>

    <ul class="mt-4 space-y-2">
    @foreach ($posts as $post)
    <li>
    <a href="{{ $post['url'] }}" class="text-lg text-blue-500 hover:text-blue-600">
    {{ $post['title'] }}
    </a>
    </li>
    @endforeach
    </ul>

    @if ($hasPrevious || $hasNext)
    <div class="flex justify-between mt-4">
    @if ($hasPrevious)
    <button
    wire:click="previousPage"
    class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-600"
    >
    &larr; Previous
    </button>
    @endif

    @if ($hasNext)
    <button
    wire:click="nextPage"
    class="px-4 py-2 mt-4 ml-auto text-white bg-blue-500 rounded hover:bg-blue-600"
    >
    Next &rarr;
    </button>
    @endif
    </div>
    @endif
    @endif
    </div>