Mostrar nombre de usuario y tiempo
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- Vamos a añadir el nombre de usuario que envía el mensaje junto al mensaje en sí. Algo sencillo.
...
<span v-if="message.userId !== $store.getters['user/getUserUid']">
<br />
<small><i>{{ message.userName }}</i></small>
</span>
- Ahora, y gracias a DayJS, podemos procesar el timestamp que acompaña cada mensaje para mostrar el tiempo relativo que ha transcurrido desde que se creó.
const dayjs = require("dayjs");
const relativeTime = require("dayjs/plugin/relativeTime");
dayjs.extend(relativeTime);
filters: {
timeAgo(timestamp) {
const date = new Date(timestamp);
return dayjs().from(dayjs(date), true);
}
}
<small>
<i>{{ message.userName }} {{ message.createdAt | timeAgo }} ago</i>
</small>
- Contiamos realizando un refactor necesario añadiendo en nuestra acción
getRoom
la capacidad de consultar primero el estado local.
async getRoom({ getters }, roomID) {
// Grab from local state
let room = getters["getRoom"](roomID);
if (!room) {
// Grab from Cloud Firestore 🔥
room = await db
.collection("rooms")
.doc(roomID)
.get();
if (!room.exists) throw new Error("Could not find room");
room = room.data();
}
return room;
},
- Esto hace que las llamadas desde los métodos locales sean mucho más sencillas (y legibles).
async created() {
try {
this.room = await this.$store.dispatch("rooms/getRoom", this.id);
this.$store.dispatch("messages/getMessages", this.id);
} catch (error) {
console.error(error.message);
this.$toast.error(error.message);
this.$router.push({ name: "home" });
}
},
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.