Eliminar mensajes y archivos adjuntos

• 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
>