Lo primero que vamos a hacer es eliminar todos los mensajes que tenemos actualmente en FireBase y dejar la base de datos vacía, porque luego vamos a escribir nosotros varios mensajes y necesitamos que todos tengan la fecha para poder ordenarlos:
Ahora vamos a modificar la función "cargarMensajes()" del servicio del chat como sigue:
Como se puede ver, hemos añadido, en primer lugar, una query a la consulta que nos va a traer los 5 últimos mensajes ordenados por fecha descendente. Luego recorremos esos 5 mensajes y los vamos incluyendo en la variable "chats" del servicio utilizando el método "unshift", que es igual que el "add" pero introduciendo los elementos al principio, en lugar de al final. De esta forma los mensajes quedan ordenados ascendentemente.
Ahora cada vez que entremos en la aplicación, aparecerán los 5 últimos mensajes del chat ordenados por fecha.
Pero queda hacer una última cosa. Cada vez que escribimos un mensaje, éste aparece en la caja del chat, pero tenemos que mover el scroll hacia abajo de forma manual para poder verlo. Vamos a hacer una pequeña modificación para que cada vez que se carguen los mensajes, el scroll se mueva automáticamente hacia abajo.
Si nos vamos al html del componente chat, recordamos que le pusimos un id al contenedor donde se muestran los mensajes:
Así que modificamos el componente del chat de la siguiente forma:
Como se puede ver, hemos creado una variable "elemento" de tipo any, a la que modificamos el scroll en el constructor utilizando un Timeout (hay que esperar un poco a que carguen los mensajes), y a la que asignamos el contenedor del html de los mensajes en el método "ngOnInit" del componente.
Y con esto ya lo tendríamos. Si arrancamos la aplicación y vamos escribiendo mensajes, vemos que estos se muestran de forma ordenada y además el scroll baja automáticamente para mostrar el último mensaje:
Y eso es todo.
No hay comentarios:
Publicar un comentario