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.

  • Primero debemos crear las acciones en el módulo messages para eliminar archivos desde Cloud Storage y luego el documento que representa el mensaje desde Cloud Firestore.
// Para los archivos adjuntos al mnensaje
async deleteFile(context, file) {
  const fileRef = storage.refFromURL(file);
  await fileRef.delete();
}

// Para el mensaje en sí
async deleteMessage(context, { roomID, messageID }) {
  await db
    .collection("rooms")
    .doc(roomID)
    .collection("messages")
    .doc(messageID)
    .delete();
},
  • Ahora debemos consumir las acciones desde el componente local ViewRoom.
async deleteMessage(messageID) {
  try {
    await this.$store.dispatch("utils/requestConfirmation", {
      props: { message: "¿Delete message?" },
      component: "ConfirmationModal"
    });

    const message = this.messages.find(message => message.id === messageID);

    if (message.photo) {
      await this.$store.dispatch("messages/deleteFile", message.photo);
    }

    if (message.audio) {
      await this.$store.dispatch("messages/deleteFile", message.audio);
    }

    await this.$store.dispatch("messages/deleteMessage", {
      roomID: this.id,
      messageID
    });

    this.$toast.success("Message deleted");
  } catch (error) {
    console.error(error.message);
    this.$toast.error(error.message);
  }
}
  • Y añadir el botón necesario que sólo se muestra en nuestros propios mensajes.
<!-- Delete message -->
<a
  href="#"
  v-if="message.userId === $store.getters['user/getUserUid']"
  @click="deleteMessage(message.id)"
  class="message__delete is-pulled-right button is-small is-danger is-outlined"
  >X</a
>

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


Cloud Functions ☁


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue