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" });
    }
},
Código inicial
Aprende Firebase en Escuela Vue

¿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.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬