sample livewire api component

http response

return Http::response([
    "052055412:general-sports-baseball" => 123344,
    "052055216:johns-events" => 123123,
    "052055268:moms-bakery" => 8924793284,
    "052055267:our-storefront" => 12312323,
    "052055266:private-store" => 98274213234,
    "052055265:sample-lansing" => 123213834,
], 200);

test.blade.php

<div>
    <form wire:submit.prevent="fetchData" class="pb-4 space-y-4 ">
        <div class=" w-full sm:w-1/2 md:w-2/6">
            <div class="flex items-center space-x-4">
                <div class="flex-1 flex rounded-md shadow-sm">
                    <div class="relative flex-grow focus-within:z-10">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <x-icon.search class="h-5 w-5 text-cool-gray-400" />
                        </div>
                        <input id="search_str" class="form-input block w-full rounded-md pl-10 transition ease-in-out duration-150 sm:hidden" placeholder="Search">
                        <input wire:model="searchStr" id="search_str" class="hidden form-input w-full rounded-md pl-10 transition ease-in-out duration-150 sm:block sm:text-sm sm:leading-5" placeholder="Search By Merchant or MID">
                    </div>
                </div>
                <x-button.primary>Search</x-button.primary>
            </div>
        </div>
    </form>

    <div class="grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
        @forelse($accounts as $account)
            <x-accounts.account-card :username="$account['name']" :id="$account['id']" />
        @empty
            <x-blank-slate />
        @endforelse
    </div>

</div>

Test.php

<?php

namespace App\Http\Livewire\Accounts;

use Livewire\Component;
use Illuminate\Support\Arr;
use Illuminate\Support\Facades\Http;
use App\Services\ApiHeaders;

class Test extends Component
{
    use ApiHeaders;

    public $accounts;
    public $searchStr;

    public function fetchData()
    {
        $response = Http::withHeaders($this->getHeaders())
            ->get('https://api.url.com' . '/accounts')
            ->json('data');

        $this->accounts = collect(
            $this->transformData($response))
            ->sortBy('name')
            ->filter(function ($account)  {
                if ($this->searchStr) {
                    return Arr::where($account, function ($value, $key) {
                        return $value == $this->searchStr;
                    });
                }
                return $account;
            });
    }

    public function render()
    {
        return view('livewire.accounts.index', [
            'accounts' => $this->accounts
        ]);
    }

    protected function transformData($accounts)
    {
        $dataArray = [];

        foreach($accounts as $key => $value) {
            $dataArray[] = [
                'name'         =>formatName($key), // helper to take 052055216:johns-events into Johns Events
                'id'          => $value,
                'sample_user' => $key,
            ];
        }

        return $dataArray;
    }

}