Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

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

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue