Mostrar listado de chats
Comprar curso

25. Mostrar listado de chats

Se enseñará cómo mostrar el listado de chats disponibles en la aplicación de chat. Se explicará cómo recuperar los datos de la base de datos y cómo mostrarlos en la vista.


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Francisco Morales Sánchez

    Francisco Morales Sánchez hace 9 meses

    Obtengo un error al hacer click en un chat
    Unable to call component method. Public method [open_chat({"id":4,"name":"Robert garcia","image_url":null,"is_group":0,"created_at":"2023-09-07T01:44:52.000000Z","updated_at":"2023-09-07T01:44:52.000000Z","pivot":{"user_id":11,"chat_id":4,"color":null,"active":0,"created_at":null,"updated_at":null}}] not found on component: [chat-component]

    ete es mi codigo:
    <div class="h-[calc(100vh-10.5rem)] overflow-auto border-t border-gray-200">
        @if ($this->chats->count() == 0 || $search)
        <div class="px-4 py-3">
            <h2 class="text-teal-600 text-lg mb-4">Contactos</h2>
            <ul class="space-y-4">
                @forelse($this->contacts as $contact)
                   <li class="cursor-pointer" wire:click="open_chat_contact({{$contact}})">
                       <div class="flex">
                           <figure class="flex-shrink-0">
                               <img class="h-12 w-12 object-cover object-center rounded-full" src="{{$contact->user->profile_photo_url}}" alt="{{$contact->name}}">
                           </figure>

                           <div class="flex-1 ml-5 border-b border-gray-200">
                            <p class="text-gray-800">
                                {{$contact->name}}
                            </p>
                               <p class="text-gray-600 text-xs">
                                   {{$contact->user->email}}
                               </p>
                           </div>
                       </div>
                   </li>
                @empty

                @endforelse
            </ul>
        </div>
        @else
            @foreach($this->chats as $chatItem)
                <div wire:key="chat-{{$chatItem->id}}"
                     wire:click="open_chat({{ $chatItem }}"
                    class="flex items-center hover:bg-gray-100 cursor-pointer px-3">
                    <figure>
                        <img src="{{ $chatItem->image }}" alt="" class="h-12 w-12 object-cover object-center rounded-full">
                    </figure>
                    <div class="ml-4 flex-1 py-4 border-b border-gray-200">
                        <p>{{$chatItem->name}}</p>

                        <p>
                            12:45 pm
                        </p>
                    </div>
                </div>
            @endforeach
        @endif
    </div>

    Agradezco la ayuda

    • Victor Arana Flores hace 9 meses

      Hola Francisco, te agradecería que revises detalladamente el codigo. Tambien tienes a tu disposicion el repositorio del curso:

      https://github.com/coders-free/whatsapp

      Lamentablemente por este medio no puedo brindar soporte a nivel de aplicacion (analisis de codigo) solo es para aclarar conceptos.

      Te sugiero que dejes capturas de tu codigo en el grupo Coders Free de Facebook, donde cualquiera que este llevando el curso te podrá ayudar.

    • Francisco Morales Sánchez hace 9 meses

      gracias Victor, con el repo me ayudas bastante.
      no sabia lo del grupo de facebook. me uniré enseguida.

      saludos