Mostrar nombre de usuario y tiempo

• 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" });
    }
},